Merge pull request #618 from nervosnetwork/rc/v0.1.0-alpha.3

[ᚬmaster] Rc/v0.1.0 alpha.3
nervosnetwork · Jul 10, 2019 · 8c8b222 · 8c8b222
2 parents bb64daf + bd0dad1
commit 8c8b222
Show file tree

Hide file tree

Showing 64 changed files with 1,360 additions and 712 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -7,6 +7,7 @@ module.exports = {
       "printWidth": 120
     }],
     "semi": [2, "never"],
+    "curly": [2, "all"],
     "comma-dangle": [2, {
       "arrays": "always-multiline",
       "objects": "always-multiline",

diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.1.0-alpha.2",
+  "version": "0.1.0-alpha.3",
   "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.2",
+  "version": "0.1.0-alpha.3",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",
@@ -19,8 +19,8 @@
   ],
   "scripts": {
     "bootstrap": "lerna bootstrap && lerna link",
-    "start:ui": "lerna run --scope=@nervosnetwork/neuron-ui start",
-    "start:wallet": "lerna run --scope=@nervosnetwork/neuron-wallet start:dev",
+    "start:ui": "cd packages/neuron-ui && yarn run start",
+    "start:wallet": "cd packages/neuron-wallet && yarn run start:dev",
     "start": "concurrently \"cross-env BROWSER=none yarn run start:ui\" \"wait-on http://localhost:3000 && yarn run start:wallet\"",
     "clean": "lerna run --stream clean",
     "prebuild": "yarn clean",

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.2",
+  "version": "0.1.0-alpha.3",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",
@@ -37,6 +37,7 @@
     "last 2 chrome versions"
   ],
   "dependencies": {
+    "@uifabric/styling": "7.1.1",
     "bootstrap": "4.3.1",
     "grommet-icons": "4.2.0",
     "i18next": "15.1.3",

diff --git a/packages/neuron-ui/public/index.html b/packages/neuron-ui/public/index.html
@@ -24,7 +24,6 @@
 </head>
 
 <body>
-  <header class="header"></header>
   <navbar class="navbar"></navbar>
   <div id="notification" class="notification"></div>
   <main id="root" class="main-content"></main>

diff --git a/packages/neuron-ui/src/components/Addresses/index.tsx b/packages/neuron-ui/src/components/Addresses/index.tsx
@@ -1,72 +1,34 @@
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo } from 'react'
+import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { DetailsList, IColumn, DetailsListLayoutMode, CheckboxVisibility } from 'office-ui-fabric-react'
+import { DetailsList, TextField, IColumn, DetailsListLayoutMode, CheckboxVisibility } from 'office-ui-fabric-react'
 
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 
 import { appCalls } from 'services/UILayer'
 
 import { useLocalDescription } from 'utils/hooks'
-import DescriptionField from 'widgets/InlineInput/DescriptionField'
-import { MIN_CELL_WIDTH } from 'utils/const'
+import { MIN_CELL_WIDTH, Routes } from 'utils/const'
 
-const addressColumns: IColumn[] = [
-  {
-    name: 'addresses.type',
-    key: 'type',
-    fieldName: 'type',
-    minWidth: MIN_CELL_WIDTH,
-    maxWidth: 120,
-    isResizable: true,
-    isCollapsible: false,
-  },
-  {
-    name: 'addresses.address',
-    key: 'address',
-    fieldName: 'address',
-    className: 'fixedWidth',
-    minWidth: MIN_CELL_WIDTH,
-    maxWidth: 450,
-    isResizable: true,
-    isCollapsible: false,
-  },
-  {
-    name: 'addresses.description',
-    key: 'description',
-    fieldName: 'description',
-    minWidth: MIN_CELL_WIDTH,
-    maxWidth: 350,
-    isResizable: true,
-    isCollapsible: false,
-  },
-  {
-    name: 'addresses.balance',
-    key: 'balance',
-    fieldName: 'balance',
-    minWidth: MIN_CELL_WIDTH,
-    maxWidth: 250,
-    isResizable: true,
-    isCollapsible: false,
-  },
-  {
-    name: 'addresses.transactions',
-    key: 'transactions',
-    fieldName: 'transactions',
-    minWidth: MIN_CELL_WIDTH,
-    maxWidth: 150,
-    isResizable: true,
-    isCollapsible: false,
-  },
-]
-
-const Addresses = ({ dispatch, wallet: { addresses = [] } }: React.PropsWithoutRef<StateWithDispatch>) => {
+const Addresses = ({
+  wallet: { id, addresses = [] },
+  settings: { showAddressBook = false },
+  dispatch,
+  history,
+}: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
   const [t] = useTranslation()
+  useEffect(() => {
+    if (!showAddressBook) {
+      history.push(Routes.Overview)
+    }
+  }, [showAddressBook, history])
 
   const { localDescription, onDescriptionPress, onDescriptionFieldBlur, onDescriptionChange } = useLocalDescription(
     'address',
+    id,
     useMemo(
       () =>
-        addresses.map(({ address: key, description }) => ({
+        addresses.map(({ address: key = '', description = '' }) => ({
           key,
           description,
         })),
@@ -75,38 +37,86 @@ const Addresses = ({ dispatch, wallet: { addresses = [] } }: React.PropsWithoutR
     dispatch
   )
 
-  const addressesItems = useMemo(
-    () =>
-      addresses.map(({ type, identifier, address, txCount, balance, description }, idx) => ({
-        key: identifier,
-        type: type === 0 ? t('addresses.receiving-address') : t('addresses.change-address'),
-        address,
-        identifier,
-        description: (
-          <DescriptionField
-            type="text"
-            title={description}
-            value={localDescription[idx]}
-            onKeyPress={onDescriptionPress(idx)}
-            onBlur={onDescriptionFieldBlur(idx)}
-            onChange={onDescriptionChange(idx)}
-            maxLength={300}
-          />
-        ),
-        balance,
-        transactions: txCount,
-      })),
-    [addresses, onDescriptionChange, localDescription, onDescriptionFieldBlur, onDescriptionPress, t]
+  const addressColumns: IColumn[] = useMemo(
+    () => [
+      {
+        name: 'addresses.type',
+        key: 'type',
+        fieldName: 'type',
+        minWidth: MIN_CELL_WIDTH,
+        maxWidth: 120,
+        isResizable: true,
+        isCollapsible: false,
+        onRender: (item?: State.Address) => {
+          if (undefined === item) {
+            return null
+          }
+          if (item.type === 0) {
+            return <span style={{ color: '#28b463' }}>{t('addresses.receiving-address')}</span>
+          }
+          return <span style={{ color: '#cccc00' }}>{t('addresses.change-address')}</span>
+        },
+      },
+      {
+        name: 'addresses.address',
+        key: 'address',
+        fieldName: 'address',
+        className: 'fixedWidth',
+        minWidth: MIN_CELL_WIDTH,
+        maxWidth: 450,
+        isResizable: true,
+        isCollapsible: false,
+      },
+      {
+        name: 'addresses.description',
+        key: 'description',
+        fieldName: 'description',
+        minWidth: MIN_CELL_WIDTH,
+        maxWidth: 350,
+        isResizable: true,
+        isCollapsible: false,
+        onRender: (item?: State.Address, idx?: number) => {
+          return item && undefined !== idx ? (
+            <TextField
+              title={item.description}
+              value={localDescription[idx] || ''}
+              onKeyPress={onDescriptionPress(idx)}
+              onBlur={onDescriptionFieldBlur(idx)}
+              onChange={onDescriptionChange(idx)}
+            />
+          ) : null
+        },
+      },
+      {
+        name: 'addresses.balance',
+        key: 'balance',
+        fieldName: 'balance',
+        minWidth: MIN_CELL_WIDTH,
+        maxWidth: 250,
+        isResizable: true,
+        isCollapsible: false,
+      },
+      {
+        name: 'addresses.transactions',
+        key: 'transactions',
+        fieldName: 'txCount',
+        minWidth: MIN_CELL_WIDTH,
+        maxWidth: 150,
+        isResizable: true,
+        isCollapsible: false,
+      },
+    ],
+    [onDescriptionChange, localDescription, onDescriptionFieldBlur, onDescriptionPress, t]
   )
 
   return (
     <DetailsList
       checkboxVisibility={CheckboxVisibility.hidden}
       layoutMode={DetailsListLayoutMode.justified}
       columns={addressColumns.map(col => ({ ...col, name: t(col.name) }))}
-      items={addressesItems}
+      items={addresses}
       onItemContextMenu={item => {
-        appCalls.contextMenu({ type: 'addressList', id: item.key })
+        appCalls.contextMenu({ type: 'addressList', id: item.identifier })
       }}
     />
   )

diff --git a/packages/neuron-ui/src/components/General/index.tsx b/packages/neuron-ui/src/components/General/index.tsx