Merge pull request #680 from nervosnetwork/rc/v0.1.0-alpha.9

[ᚬmaster] Release v0.1.0 alpha.9

Author: ashchan

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.1.0-alpha.8",
+  "version": "0.1.0-alpha.9",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

package.json

@@ -2,7 +2,7 @@
   "name": "@nervosnetwork/neuron",
   "productName": "Neuron",
   "description": "CKB Neuron Wallet",
-  "version": "0.1.0-alpha.8",
+  "version": "0.1.0-alpha.9",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",

packages/neuron-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nervosnetwork/neuron-ui",
-  "version": "0.1.0-alpha.8",
+  "version": "0.1.0-alpha.9",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",

packages/neuron-ui/src/components/ErrorBoundary/index.tsx

@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+import { appCalls } from 'services/UILayer'
+import { Stack, Spinner } from 'office-ui-fabric-react'
+
+const handleError = (error: Error) => {
+  appCalls.handleViewError(error.toString())
+  setTimeout(() => {
+    window.location.reload()
+  }, 0)
+  return { hasError: true }
+}
+
+class ErrorBoundary extends Component<{ children: React.ReactChild }, { hasError: boolean }> {
+  state = {
+    hasError: false,
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return handleError(error)
+  }
+
+  public componentDidCatch(error: Error) {
+    this.setState(handleError(error))
+  }
+
+  render() {
+    const { hasError } = this.state
+    const { children } = this.props
+    return hasError ? (
+      <Stack verticalFill verticalAlign="center">
+        <Spinner />
+      </Stack>
+    ) : (
+      children
+    )
+  }
+}
+
+export default ErrorBoundary

packages/neuron-ui/src/components/History/index.tsx

@@ -50,8 +50,8 @@ const History = ({
       <Stack horizontal horizontalAlign="end" tokens={{ childrenGap: 15 }}>
         <SearchBox
           value={keywords}
-          styles={{ root: { width: 200 } }}
-          placeholder="Search"
+          styles={{ root: { width: 500 } }}
+          placeholder={t('history.search.placeholder')}
           onChange={onKeywordsChange}
           onSearch={onSearch}
           iconProps={{ iconName: 'Search', styles: { root: { height: '18px' } } }}

packages/neuron-ui/src/components/TransactionList/index.tsx

@@ -89,11 +89,11 @@ const TransactionList = ({
           key: 'hash',
           fieldName: 'hash',
           minWidth: 100,
-          maxWidth: 500,
+          maxWidth: 600,
           onRender: (item?: FormatTransaction) => {
             if (item) {
               return (
-                <span className="text-overflow" title={item.hash}>
+                <span className="text-overflow fixedWidth" title={item.hash}>
                   {item.hash}
                 </span>
               )
@@ -187,7 +187,7 @@ const TransactionList = ({
     <DetailsList
       columns={transactionColumns}
       items={txs}
-      groups={groups}
+      groups={groups.filter(group => group.count !== 0)}
       groupProps={{
         onRenderHeader,
       }}

packages/neuron-ui/src/containers/Footer/index.tsx

@@ -22,26 +22,33 @@ const stackItemStyles = {
   root: [theme.fonts.small],
 }
 
-const SyncStatus = ({
+export const SyncStatus = ({
   tipBlockNumber = '',
-  syncBlockNumber = '',
-}: React.PropsWithoutRef<{ tipBlockNumber: string; syncBlockNumber: string }>) => {
+  syncedBlockNumber = '',
+  bufferBlockNumber = 10,
+}: React.PropsWithoutRef<{ tipBlockNumber: string; syncedBlockNumber: string; bufferBlockNumber?: number }>) => {
   const [t] = useTranslation()
   if (tipBlockNumber === '') {
     return <Text variant="small">{t('footer.fail-to-fetch-tip-block-number')}</Text>
   }
 
-  const percentage = +syncBlockNumber / +tipBlockNumber
+  const percentage = +syncedBlockNumber / +tipBlockNumber
 
   return (
     <div style={{ display: 'flex', alignItems: 'center', fontSize: theme.fonts.small.fontSize }}>
-      {t('sync.syncing')}
-      <ProgressIndicator percentComplete={percentage} styles={{ root: { width: '120px', marginLeft: '5px' } }} />
+      {+syncedBlockNumber + bufferBlockNumber < +tipBlockNumber ? (
+        <>
+          {t('sync.syncing')}
+          <ProgressIndicator percentComplete={percentage} styles={{ root: { width: '120px', marginLeft: '5px' } }} />
+        </>
+      ) : (
+        t('sync.synced')
+      )}
     </div>
   )
 }
 
-const NetworkStatus = ({ name, online }: { name: string; online: boolean }) => {
+export const NetworkStatus = ({ name, online }: { name: string; online: boolean }) => {
   return (
     <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 5 }}>
       {online ? <ConnectIcon size="small" color="green" /> : <AlertIcon size="small" color="red" />}
@@ -56,7 +63,7 @@ const Footer = ({
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
   const {
     app: { tipBlockNumber },
-    chain: { networkID, connectStatus },
+    chain: { networkID, connectStatus, tipBlockNumber: syncedBlockNumber },
     settings: { networks },
   } = useContext(NeuronWalletContext)
   const [t] = useTranslation()
@@ -80,7 +87,7 @@ const Footer = ({
       styles={stackStyles}
     >
       <Stack.Item styles={stackItemStyles}>
-        <SyncStatus tipBlockNumber={tipBlockNumber} syncBlockNumber="100" />
+        <SyncStatus tipBlockNumber={tipBlockNumber} syncedBlockNumber={syncedBlockNumber} />
       </Stack.Item>
 
       <Stack styles={stackItemStyles} onClick={goToNetworksSetting} horizontal>

packages/neuron-ui/src/containers/Main/hooks.ts

@@ -52,8 +52,12 @@ export const useChannelListeners = ({
       (
         _e: Event,
         _actionType: 'create' | 'update' | 'delete',
-        dataType: 'address' | 'transaction' | 'wallet' | 'network'
+        dataType: 'address' | 'transaction' | 'wallet' | 'network',
+        walletIDOfMessage?: string
       ) => {
+        if (walletIDOfMessage && walletIDOfMessage !== walletID) {
+          return
+        }
         switch (dataType) {
           case 'address': {
             walletsCall.getAllAddresses(walletID)
@@ -198,7 +202,7 @@ export const useChannelListeners = ({
             dispatch({
               type: NeuronWalletActions.Chain,
               payload: {
-                tipBlockNumber: args.result,
+                tipBlockNumber: args.result || '0',
               },
             })
             break
@@ -335,7 +339,7 @@ export const useChannelListeners = ({
             })
             break
           }
-          case WalletsMethod.AllAddresses: {
+          case WalletsMethod.GetAllAddresses: {
             const addresses = args.result || []
             dispatch({
               type: NeuronWalletActions.Wallet,

packages/neuron-ui/src/index.tsx

@@ -11,6 +11,7 @@ import Navbar from 'containers/Navbar'
 import Notification from 'containers/Notification'
 import Main from 'containers/Main'
 import Footer from 'containers/Footer'
+import ErrorBoundary from 'components/ErrorBoundary'
 import withProviders from 'states/stateProvider'
 
 loadTheme({
@@ -63,7 +64,11 @@ const App = withProviders(({ dispatch }: any) => (
         <Route
           {...container}
           key={container.name}
-          render={routeProps => <container.comp {...routeProps} dispatch={dispatch} />}
+          render={routeProps => (
+            <ErrorBoundary>
+              <container.comp {...routeProps} dispatch={dispatch} />
+            </ErrorBoundary>
+          )}
         />
       )
     })}

packages/neuron-ui/src/locales/en.json

@@ -16,7 +16,7 @@
       "balance": "Balance",
       "live-cells": "Live Cells",
       "cell-types": "Cell Types",
-      "recent-activities": "Recent Activites",
+      "recent-activities": "Recent Activities",
       "no-recent-activities": "No Recent Activities",
       "blockchain-status": "Blockchain Status",
       "blockchain-identity": "Chain Identity",
@@ -71,7 +71,7 @@
     "receive": {
       "click-to-copy": "Click to copy the address",
       "address-not-found": "Address not found",
-      "prompt": "Neuron picks a new receiving address for better privacy. Please go to the Address Book if you want to use a previously used receiving addresses.",
+      "prompt": "Neuron picks a new receiving address for better privacy. Please go to the Address Book if you want to use a previously used receiving address.",
       "address-qrcode": "Address QR Code"
     },
     "history": {
@@ -94,7 +94,10 @@
       "description": "Description",
       "status": "Status",
       "blockNumber": "Block Number",
-      "basic-information": "Basic Information"
+      "basic-information": "Basic Information",
+      "search": {
+        "placeholder": "Search tx hash, address or date (yyyy-mm-dd)"
+      }
     },
     "transaction": {
       "goBack": "Go back"
@@ -207,7 +210,8 @@
       "no-transactions": "No transactions"
     },
     "sync": {
-      "syncing": "Syncing"
+      "syncing": "Syncing",
+      "synced": "Synced"
     },
     "pagination": {
       "previous-page": "Previous page",