Merge pull request #688 from nervosnetwork/rc/v0.1.0-alpha.10

[ᚬmaster] Release v0.1.0 alpha.10
nervosnetwork · Jul 18, 2019 · 501f8b4 · 501f8b4
2 parents ff61c51 + 09506fa
commit 501f8b4
Show file tree

Hide file tree

Showing 22 changed files with 293 additions and 130 deletions.
diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.1.0-alpha.9",
+  "version": "0.1.0-alpha.10",
   "npmClient": "yarn",
   "useWorkspaces": true
 }
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@nervosnetwork/neuron",
   "productName": "Neuron",
   "description": "CKB Neuron Wallet",
-  "version": "0.1.0-alpha.9",
+  "version": "0.1.0-alpha.10",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",

diff --git a/packages/neuron-ui/package.json b/packages/neuron-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nervosnetwork/neuron-ui",
-  "version": "0.1.0-alpha.9",
+  "version": "0.1.0-alpha.10",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",

diff --git a/packages/neuron-ui/src/components/LaunchScreen/index.tsx b/packages/neuron-ui/src/components/LaunchScreen/index.tsx
@@ -9,21 +9,17 @@ import { Routes } from 'utils/const'
 
 export const LaunchScreen = ({
   wallet: { id = '' },
-  settings: { networks = [] },
   history,
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
   const { t } = useTranslation()
 
   useEffect(() => {
-    if (!networks.length) {
-      return
-    }
     if (id) {
       history.push(Routes.Overview)
     } else {
       history.push(`${Routes.WalletWizard}${WalletWizardPath.Welcome}`)
     }
-  }, [networks.length, id, history])
+  }, [id, history])
 
   return (
     <Panel isOpen type={PanelType.custom} customWidth="100vw">

diff --git a/packages/neuron-ui/src/components/Overview/index.tsx b/packages/neuron-ui/src/components/Overview/index.tsx
@@ -1,9 +1,10 @@
-import React, { useCallback, useMemo, useEffect } from 'react'
+import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import {
   Stack,
   Text,
+  DefaultButton,
   DetailsList,
   DetailsRow,
   IColumn,
@@ -13,6 +14,7 @@ import {
   IDetailsRowProps,
   IDetailsRowStyles,
   FontSizes,
+  Callout,
 } from 'office-ui-fabric-react'
 
 import { StateWithDispatch } from 'states/stateProvider/reducer'
@@ -79,16 +81,18 @@ const PropertyList = ({
 )
 const Overview = ({
   dispatch,
-  wallet: { id, balance = '' },
+  app: { tipBlockNumber, chain, epoch, difficulty },
+  wallet: { id, name, balance = '' },
   chain: {
-    networkID = '',
     transactions: { items = [] },
-    tipBlockNumber = '0',
   },
-  settings: { networks = [] },
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
   const [t] = useTranslation()
-  const currentNetwork = useMemo(() => networks.find(n => n.id === networkID), [networkID, networks])
+  const [displayBlockchainInfo, setDisplayBlockchainInfo] = useState(false)
+  const [displayMinerInfo, setDisplayMinerInfo] = useState(false)
+
+  const blockchainInfoRef = useRef<HTMLDivElement>(null)
+  const minerInfoRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     dispatch(actionCreators.getTransactions({ pageNo: 1, pageSize: PAGE_SIZE, keywords: '', walletID: id }))
@@ -182,6 +186,31 @@ const Overview = ({
           key: 'label',
           name: 'label',
           fieldName: 'label',
+          maxWidth: 100,
+        },
+        {
+          key: 'value',
+          name: 'value',
+          fieldName: 'value',
+        },
+      ].map(col => ({
+        isResizable: true,
+        minWidth: 200,
+        fieldName: col.key,
+        ariaLabel: col.name,
+        ...col,
+      })),
+    []
+  )
+
+  const blockchainStatusColumns: IColumn[] = useMemo(
+    () =>
+      [
+        {
+          key: 'label',
+          name: 'label',
+          fieldName: 'label',
+          maxWidth: 100,
         },
         {
           key: 'value',
@@ -201,70 +230,92 @@ const Overview = ({
   const balanceItems = useMemo(
     () => [
       {
-        label: t('overview.amount'),
+        label: t('overview.balance'),
         value: <span title={`${balance} shannon`}>{`${shannonToCKBFormatter(balance)} CKB`}</span>,
       },
-      { label: t('overview.live-cells'), value: 'mock living cells' },
-      { label: t('overview.cell-types'), value: 'mock cell typ' },
     ],
     [t, balance]
   )
-
-  const blockchainStatusColumns = balanceColumns
-
   const blockchainStatusItems = useMemo(
     () => [
-      { label: t('overview.blockchain-identity'), value: 'mock chain id' },
-      { label: t('overview.block-number'), value: localNumberFormatter(tipBlockNumber) },
-      { label: t('overview.rpc-service'), value: currentNetwork ? currentNetwork.name : '' },
+      {
+        label: t('overview.chain-identity'),
+        value: chain,
+      },
+      {
+        label: t('overview.tip-block-number'),
+        value: localNumberFormatter(tipBlockNumber),
+      },
+      {
+        label: t('overview.epoch'),
+        value: epoch,
+      },
+      {
+        label: t('overview.difficulty'),
+        value: difficulty,
+      },
     ],
-    [t, currentNetwork, tipBlockNumber]
+    [t, chain, epoch, difficulty, tipBlockNumber]
   )
 
+  const showBlockchainStatus = useCallback(() => {
+    setDisplayBlockchainInfo(true)
+  }, [setDisplayBlockchainInfo])
+  const hideBlockchainStatus = useCallback(() => {
+    setDisplayBlockchainInfo(false)
+  }, [setDisplayBlockchainInfo])
+  const showMinerInfo = useCallback(() => {
+    setDisplayMinerInfo(true)
+  }, [setDisplayMinerInfo])
+  const hideMinerInfo = useCallback(() => {
+    setDisplayMinerInfo(false)
+  }, [setDisplayMinerInfo])
+
   return (
-    <Stack horizontal horizontalAlign="space-evenly" verticalFill tokens={{ childrenGap: 15 }} wrap>
-      <Stack
-        tokens={{
-          childrenGap: 15,
-        }}
-        styles={{
-          root: {
-            minWidth: '680px',
-          },
-        }}
-      >
-        <Stack>
-          <Text as="h1" variant={TITLE_FONT_SIZE}>
-            {t('overview.balance')}
-          </Text>
-          <PropertyList columns={balanceColumns} items={balanceItems} isHeaderVisible={false} />
+    <Stack tokens={{ childrenGap: 15 }} verticalFill horizontalAlign="stretch">
+      <Text as="h1" variant={TITLE_FONT_SIZE}>
+        {name}
+      </Text>
+      <Stack horizontal>
+        <PropertyList columns={balanceColumns} items={balanceItems} isHeaderVisible={false} />
+        <Stack tokens={{ childrenGap: 15 }}>
+          <div ref={blockchainInfoRef}>
+            <DefaultButton onClick={showBlockchainStatus} styles={{ root: { width: '200px' } }}>
+              Blockchain Status
+            </DefaultButton>
+          </div>
+          <div ref={minerInfoRef}>
+            <DefaultButton onClick={showMinerInfo} styles={{ root: { width: '200px' } }}>
+              Miner Info
+            </DefaultButton>
+          </div>
         </Stack>
-        <Stack.Item>
-          <Text as="h1" variant={TITLE_FONT_SIZE}>
-            {t('overview.blockchain-status')}
-          </Text>
-          {currentNetwork ? (
-            <PropertyList columns={blockchainStatusColumns} items={blockchainStatusItems} isHeaderVisible={false} />
-          ) : null}
-        </Stack.Item>
-      </Stack>
-      <Stack
-        horizontalAlign="stretch"
-        styles={{
-          root: {
-            minWidth: '680px',
-          },
-        }}
-      >
-        <Text as="h1" variant={TITLE_FONT_SIZE}>
-          {t('overview.recent-activities')}
-        </Text>
-        {items.length ? (
-          <PropertyList columns={activityColumns} items={items} onRenderRow={onTransactionRowRender} />
-        ) : (
-          <div>{t('overview.no-recent-activities')}</div>
-        )}
       </Stack>
+      <Text as="h2" variant={TITLE_FONT_SIZE}>
+        {t('overview.recent-activities')}
+      </Text>
+      {items.length ? (
+        <PropertyList columns={activityColumns} items={items} onRenderRow={onTransactionRowRender} />
+      ) : (
+        <div>{t('overview.no-recent-activities')}</div>
+      )}
+      {blockchainInfoRef.current ? (
+        <Callout
+          target={blockchainInfoRef.current}
+          hidden={!displayBlockchainInfo}
+          onDismiss={hideBlockchainStatus}
+          gapSpace={0}
+        >
+          <Stack>
+            <PropertyList columns={blockchainStatusColumns} items={blockchainStatusItems} isHeaderVisible={false} />
+          </Stack>
+        </Callout>
+      ) : null}
+      {minerInfoRef.current ? (
+        <Callout target={minerInfoRef.current} hidden={!displayMinerInfo} onDismiss={hideMinerInfo} gapSpace={0}>
+          Miner Info
+        </Callout>
+      ) : null}
     </Stack>
   )
 }

diff --git a/packages/neuron-ui/src/components/WalletWizard/index.tsx b/packages/neuron-ui/src/components/WalletWizard/index.tsx
@@ -8,6 +8,7 @@ import withWizard, { WizardElementProps, WithWizardState } from 'components/with
 import { MnemonicAction, BUTTON_GAP } from 'utils/const'
 import { verifyWalletSubmission } from 'utils/validators'
 import { helpersCall, walletsCall } from 'services/UILayer'
+import { validateMnemonic, showErrorMessage } from 'services/remote'
 import { registerIcons, buttonGrommetIconStyles } from 'utils/icons'
 
 export enum WalletWizardPath {
@@ -138,13 +139,18 @@ const Mnemonic = ({
     if (isCreate) {
       history.push(`${rootPath}${WalletWizardPath.Mnemonic}/${MnemonicAction.Verify}`)
     } else {
-      history.push(
-        `${rootPath}${WalletWizardPath.Submission}/${
-          type === MnemonicAction.Verify ? MnemonicAction.Create : MnemonicAction.Import
-        }`
-      )
+      const isMnemonicValid = validateMnemonic(imported)
+      if (isMnemonicValid) {
+        history.push(
+          `${rootPath}${WalletWizardPath.Submission}/${
+            type === MnemonicAction.Verify ? MnemonicAction.Create : MnemonicAction.Import
+          }`
+        )
+      } else {
+        showErrorMessage(t('messages.error'), t('messages.invalid-mnemonic'))
+      }
     }
-  }, [isCreate, history, rootPath, type])
+  }, [isCreate, history, rootPath, type, imported, t])
 
   return (
     <Stack verticalFill verticalAlign="center" horizontalAlign="stretch" tokens={{ childrenGap: 15 }}>

diff --git a/packages/neuron-ui/src/containers/Footer/index.tsx b/packages/neuron-ui/src/containers/Footer/index.tsx
@@ -7,6 +7,7 @@ import { Alert as AlertIcon, Nodes as ConnectIcon } from 'grommet-icons'
 
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 import { ConnectStatus, FULL_SCREENS, Routes } from 'utils/const'
+import { localNumberFormatter } from 'utils/formatters'
 import { NeuronWalletContext } from 'states/stateProvider'
 
 const theme = getTheme()
@@ -39,10 +40,14 @@ export const SyncStatus = ({
       {+syncedBlockNumber + bufferBlockNumber < +tipBlockNumber ? (
         <>
           {t('sync.syncing')}
-          <ProgressIndicator percentComplete={percentage} styles={{ root: { width: '120px', marginLeft: '5px' } }} />
+          <ProgressIndicator
+            percentComplete={percentage}
+            styles={{ root: { width: '120px', marginLeft: '5px', marginRight: '5px' } }}
+          />
+          {`${localNumberFormatter(syncedBlockNumber) || '0'}/${localNumberFormatter(tipBlockNumber) || '0'}`}
         </>
       ) : (
-        t('sync.synced')
+        <>{`${t('sync.synced')}, ${t('sync.block-number')}: ${localNumberFormatter(tipBlockNumber)}`}</>
       )}
     </div>
   )