Merge pull request #635 from nervosnetwork/rc/0.1.0-alpha.4

[ᚬmaster] Rc/0.1.0 alpha.4

azure-pipelines.yml

@@ -148,6 +148,7 @@ jobs:
         tag: $(Build.SourceBranchName)
         assets: |
           $(Build.SourcesDirectory)/release/*.zip
+          $(Build.SourcesDirectory)/release/*.dmg
           $(Build.SourcesDirectory)/release/*.exe
           $(Build.SourcesDirectory)/release/*.deb
           $(Build.SourcesDirectory)/release/*.AppImage

lerna.json

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

package.json

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

packages/neuron-ui/.storybook/addons.js

@@ -0,0 +1,3 @@
+import '@storybook/addon-actions/register'
+import '@storybook/addon-links/register'
+import '@storybook/addon-viewport/register'

packages/neuron-ui/.storybook/config.js

@@ -0,0 +1,9 @@
+import {
+  configure
+} from '@storybook/react'
+
+function loadStories() {
+  require('../src/stories')
+}
+
+configure(loadStories, module)

packages/neuron-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nervosnetwork/neuron-ui",
-  "version": "0.1.0-alpha.3",
+  "version": "0.1.0-alpha.4",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",
@@ -16,7 +16,9 @@
     "test": "react-app-rewired test --env=jsdom --color --watchAll=false",
     "build": "react-app-rewired build",
     "clean": "rimraf build/*",
-    "precommit": "lint-staged"
+    "precommit": "lint-staged",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -52,12 +54,20 @@
     "styled-components": "5.0.0-beta.0"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "5.1.9",
+    "@storybook/addon-links": "5.1.9",
+    "@storybook/addon-viewport": "5.1.9",
+    "@storybook/addons": "5.1.9",
+    "@storybook/cli": "5.1.9",
+    "@storybook/react": "5.1.9",
     "@types/enzyme": "3.9.3",
     "@types/enzyme-adapter-react-16": "1.0.5",
     "@types/node": "11.13.5",
     "@types/react": "16.8.19",
     "@types/react-dom": "16.8.4",
     "@types/react-router-dom": "4.3.3",
+    "@types/storybook-react-router": "1.0.0",
+    "@types/storybook__react": "4.0.2",
     "@types/styled-components": "4.1.16",
     "babel-jest": "24.8.0",
     "enzyme": "3.9.0",
@@ -67,6 +77,7 @@
     "lint-staged": "8.1.7",
     "node-sass": "4.12.0",
     "react-app-rewired": "2.1.3",
-    "rimraf": "2.6.3"
+    "rimraf": "2.6.3",
+    "storybook-react-router": "1.0.5"
   }
 }

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

@@ -1,7 +1,15 @@
 import React, { useEffect, useMemo } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { DetailsList, TextField, IColumn, DetailsListLayoutMode, CheckboxVisibility } from 'office-ui-fabric-react'
+import {
+  DetailsList,
+  TextField,
+  IColumn,
+  DetailsListLayoutMode,
+  CheckboxVisibility,
+  ITextFieldStyleProps,
+  getTheme,
+} from 'office-ui-fabric-react'
 
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 
@@ -37,6 +45,9 @@ const Addresses = ({
     dispatch
   )
 
+  const theme = getTheme()
+  const { semanticColors } = theme
+
   const addressColumns: IColumn[] = useMemo(
     () => [
       {
@@ -78,11 +89,23 @@ const Addresses = ({
         onRender: (item?: State.Address, idx?: number) => {
           return item && undefined !== idx ? (
             <TextField
+              borderless
               title={item.description}
               value={localDescription[idx] || ''}
               onKeyPress={onDescriptionPress(idx)}
               onBlur={onDescriptionFieldBlur(idx)}
               onChange={onDescriptionChange(idx)}
+              styles={(props: ITextFieldStyleProps) => {
+                return {
+                  root: {
+                    flex: 1,
+                  },
+                  fieldGroup: {
+                    borderColor: props.focused ? semanticColors.inputBorder : 'transparent',
+                    border: '1px solid',
+                  },
+                }
+              }}
             />
           ) : null
         },
@@ -106,7 +129,7 @@ const Addresses = ({
         isCollapsible: false,
       },
     ],
-    [onDescriptionChange, localDescription, onDescriptionFieldBlur, onDescriptionPress, t]
+    [onDescriptionChange, localDescription, onDescriptionFieldBlur, onDescriptionPress, t, semanticColors]
   )
 
   return (
@@ -118,6 +141,16 @@ const Addresses = ({
       onItemContextMenu={item => {
         appCalls.contextMenu({ type: 'addressList', id: item.identifier })
       }}
+      styles={{
+        contentWrapper: {
+          selectors: {
+            '.ms-DetailsRow-cell': {
+              display: 'flex',
+              alignItems: 'center',
+            },
+          },
+        },
+      }}
     />
   )
 }

packages/neuron-ui/src/components/History/hooks.ts

@@ -1,4 +1,4 @@
-import { useState, useMemo, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import { AppActions } from 'states/stateProvider/reducer'
 import actionCreators from 'states/stateProvider/actionCreators'
 import { queryParsers } from 'utils/parser'
@@ -17,11 +17,10 @@ const backToTop = () => {
 export const useSearch = (
   search: string = '',
   incomingKeywords: string = '',
-  addresses: { address: string }[] = [],
+  walletID: string = '',
   dispatch: React.Dispatch<any>
 ) => {
   const [keywords, setKeywords] = useState('')
-  const defaultKeywords = useMemo(() => addresses.map(addr => addr.address).join(','), [addresses])
 
   const onKeywordsChange = (_e?: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
     if (undefined !== newValue) {
@@ -42,9 +41,9 @@ export const useSearch = (
       payload: null,
     })
 
-    dispatch(actionCreators.getTransactions({ ...params, keywords: params.keywords || defaultKeywords }))
-  }, [search, dispatch, defaultKeywords])
-  return { keywords, addresses, onKeywordsChange }
+    dispatch(actionCreators.getTransactions({ ...params, keywords: params.keywords, walletID }))
+  }, [search, walletID, dispatch])
+  return { keywords, onKeywordsChange }
 }
 
 export default {

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

@@ -1,18 +1,27 @@
 import React, { useCallback, useMemo } from 'react'
 import { NavLink, RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { Stack, SearchBox, DefaultButton } from 'office-ui-fabric-react'
+import { Stack, SearchBox, getTheme } from 'office-ui-fabric-react'
 import { Search as SearchIcon } from 'grommet-icons'
 
 import TransactionList from 'components/TransactionList'
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 
 import { Routes } from 'utils/const'
+import { registerIcons } from 'utils/icons'
 
 import { useSearch } from './hooks'
 
+const theme = getTheme()
+const { semanticColors } = theme
+registerIcons({
+  icons: {
+    Search: <SearchIcon size="16px" color={semanticColors.menuIcon} />,
+  },
+})
+
 const History = ({
-  wallet: { id, addresses = [] },
+  wallet: { id },
   chain: {
     transactions: { pageNo = 1, pageSize = 15, totalCount = 0, items = [], keywords: incomingKeywords = '' },
   },
@@ -22,23 +31,21 @@ const History = ({
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
   const [t] = useTranslation()
 
-  const { keywords, onKeywordsChange } = useSearch(search, incomingKeywords, addresses, dispatch)
+  const { keywords, onKeywordsChange } = useSearch(search, incomingKeywords, id, dispatch)
   const onSearch = useCallback(() => history.push(`${Routes.History}?keywords=${keywords}`), [history, keywords])
   const totalPages = useMemo(() => Math.ceil(totalCount / pageSize) || 1, [totalCount, pageSize])
 
   return (
     <Stack>
-      <Stack horizontal horizontalAlign="start" tokens={{ childrenGap: 15 }}>
+      <Stack horizontal horizontalAlign="end" tokens={{ childrenGap: 15 }}>
         <SearchBox
           value={keywords}
           styles={{ root: { width: 200 } }}
           placeholder="Search"
           onChange={onKeywordsChange}
           onSearch={onSearch}
+          iconProps={{ iconName: 'Search', styles: { root: { height: '18px' } } }}
         />
-        <DefaultButton onClick={onSearch}>
-          <SearchIcon />
-        </DefaultButton>
       </Stack>
       <TransactionList walletID={id} items={items} dispatch={dispatch} />
       <div style={{ display: 'flex', justifyContent: 'center' }}>

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

@@ -79,7 +79,7 @@ const PropertyList = ({
 )
 const General = ({
   dispatch,
-  wallet: { addresses = [], balance = '' },
+  wallet: { id, balance = '' },
   chain: {
     networkID = '',
     transactions: { items = [] },
@@ -89,11 +89,10 @@ const General = ({
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
   const [t] = useTranslation()
   const currentNetwork = useMemo(() => networks.find(n => n.id === networkID), [networkID, networks])
-  const defaultKeywords = useMemo(() => addresses.map(addr => addr.address).join(','), [addresses])
 
   useEffect(() => {
-    dispatch(actionCreators.getTransactions({ pageNo: 1, pageSize: PAGE_SIZE, keywords: defaultKeywords }))
-  }, [dispatch, defaultKeywords])
+    dispatch(actionCreators.getTransactions({ pageNo: 1, pageSize: PAGE_SIZE, keywords: '', walletID: id }))
+  }, [id, dispatch])
 
   const onTransactionRowRender = useCallback((props?: IDetailsRowProps) => {
     if (props) {

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

@@ -31,7 +31,8 @@ const Receive = ({
   const [showLargeQRCode, setShowLargeQRCode] = useState(false)
 
   const accountAddress = useMemo(
-    () => params.address || (addresses.find(addr => addr.type === 0) || { address: '' }).address || '',
+    () =>
+      params.address || (addresses.find(addr => addr.type === 0 && addr.txCount === 0) || { address: '' }).address || '',
     [params, addresses]
   )