Merge pull request #698 from nervosnetwork/rc/v0.1.0-alpha.11

[ᚬmaster] Release v0.1.0 alpha.11

lerna.json

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

package.json

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

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

@@ -1,3 +1,4 @@
 import '@storybook/addon-actions/register'
 import '@storybook/addon-links/register'
 import '@storybook/addon-viewport/register'
+import '@storybook/addon-knobs/register';

packages/neuron-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nervosnetwork/neuron-ui",
-  "version": "0.1.0-alpha.10",
+  "version": "0.1.0-alpha.11",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",
@@ -56,6 +56,7 @@
   },
   "devDependencies": {
     "@storybook/addon-actions": "5.1.9",
+    "@storybook/addon-knobs": "5.1.9",
     "@storybook/addon-links": "5.1.9",
     "@storybook/addon-viewport": "5.1.9",
     "@storybook/addons": "5.1.9",
@@ -68,6 +69,7 @@
     "@types/react-dom": "16.8.4",
     "@types/react-router-dom": "4.3.3",
     "@types/storybook-react-router": "1.0.0",
+    "@types/storybook__addon-knobs": "5.0.3",
     "@types/storybook__react": "4.0.2",
     "@types/styled-components": "4.1.16",
     "babel-jest": "24.8.0",

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

@@ -14,12 +14,7 @@ const backToTop = () => {
   }
 }
 
-export const useSearch = (
-  search: string = '',
-  incomingKeywords: string = '',
-  walletID: string = '',
-  dispatch: React.Dispatch<any>
-) => {
+export const useSearch = (search: string = '', walletID: string = '', dispatch: React.Dispatch<any>) => {
   const [keywords, setKeywords] = useState('')
 
   const onKeywordsChange = (_e?: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => {
@@ -28,10 +23,6 @@ export const useSearch = (
     }
   }
 
-  useEffect(() => {
-    setKeywords(incomingKeywords)
-  }, [incomingKeywords, setKeywords])
-
   useEffect(() => {
     backToTop()
     const params = queryParsers.history(search)

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

@@ -34,15 +34,15 @@ registerIcons({
 const History = ({
   wallet: { id },
   chain: {
-    transactions: { pageNo = 1, pageSize = 15, totalCount = 0, items = [], keywords: incomingKeywords = '' },
+    transactions: { pageNo = 1, pageSize = 15, totalCount = 0, items = [] },
   },
   history,
   location: { search },
   dispatch,
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
   const [t] = useTranslation()
 
-  const { keywords, onKeywordsChange } = useSearch(search, incomingKeywords, id, dispatch)
+  const { keywords, onKeywordsChange } = useSearch(search, id, dispatch)
   const onSearch = useCallback(() => history.push(`${Routes.History}?keywords=${keywords}`), [history, keywords])
 
   return (

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

@@ -139,6 +139,10 @@ const Mnemonic = ({
     if (isCreate) {
       history.push(`${rootPath}${WalletWizardPath.Mnemonic}/${MnemonicAction.Verify}`)
     } else {
+      dispatch({
+        type: 'imported',
+        payload: imported.trim().replace(/(\s+|\n+)/g, ' '),
+      })
       const isMnemonicValid = validateMnemonic(imported)
       if (isMnemonicValid) {
         history.push(
@@ -150,7 +154,7 @@ const Mnemonic = ({
         showErrorMessage(t('messages.error'), t('messages.invalid-mnemonic'))
       }
     }
-  }, [isCreate, history, rootPath, type, imported, t])
+  }, [isCreate, history, rootPath, type, imported, t, dispatch])
 
   return (
     <Stack verticalFill verticalAlign="center" horizontalAlign="stretch" tokens={{ childrenGap: 15 }}>

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

@@ -468,6 +468,7 @@ export const useSyncChainData = ({ chainURL, dispatch }: { chainURL: string; dis
     if (chainURL) {
       ckbCore.setNode(chainURL)
       syncTipNumber()
+      syncBlockchainInfo()
       timer = setInterval(() => {
         syncTipNumber()
         syncBlockchainInfo()

packages/neuron-ui/src/states/stateProvider/reducer.ts

@@ -89,9 +89,13 @@ export const reducer = (
           ...payload,
         },
       }
-      newState.chain.transactions.items = newState.chain.transactions.items.sort(
-        (item1, item2) => +(item2.timestamp || item2.createdAt) - +(item1.timestamp || item1.createdAt)
-      )
+      const pendingTxs = newState.chain.transactions.items
+        .filter(item => item.status === 'pending')
+        .sort((item1, item2) => +(item2.timestamp || item2.createdAt) - +(item1.timestamp || item1.createdAt))
+      const determinedTxs = newState.chain.transactions.items
+        .filter(item => item.status !== 'pending')
+        .sort((item1, item2) => +(item2.timestamp || item2.createdAt) - +(item1.timestamp || item1.createdAt))
+      newState.chain.transactions.items = [...pendingTxs, ...determinedTxs]
       return newState
     }
     case NeuronWalletActions.Settings: {
@@ -136,6 +140,15 @@ export const reducer = (
         },
       }
     }
+    case AppActions.UpdateChainInfo: {
+      return {
+        ...state,
+        app: {
+          ...app,
+          ...payload,
+        },
+      }
+    }
     case AppActions.UpdateTransactionID: {
       return {
         ...state,

packages/neuron-ui/src/stories/Addresses.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Route, RouteComponentProps } from 'react-router-dom'
 import StoryRouter from 'storybook-react-router'
 import { storiesOf } from '@storybook/react'
+import { withKnobs, text, number } from '@storybook/addon-knobs'
 import Addresses from 'components/Addresses'
 import initStates from 'states/initStates'
 import addressesStates from './data/addresses'
@@ -20,3 +21,15 @@ const stories = storiesOf('Addresses', module).addDecorator(StoryRouter())
 Object.entries(addressesStates).forEach(([title, list]) => {
   stories.add(title, () => <AddressWithRouteProps addresses={list} />)
 })
+
+stories.addDecorator(withKnobs).add('With knobs', () => {
+  const addrs = addressesStates['Content List'].map((addr, idx) => ({
+    address: text(`${idx}-Address`, addr.address),
+    identifier: text(`${idx}-Identifier`, addr.identifier),
+    description: text(`${idx}-Description`, addr.description),
+    type: number(`${idx}-Type`, addr.type) as 0 | 1,
+    txCount: number(`${idx}-Tx count`, addr.txCount),
+    balance: text(`${idx}-Balance`, addr.balance),
+  }))
+  return <AddressWithRouteProps addresses={addrs} />
+})

packages/neuron-ui/src/stories/GeneralSetting.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import { withKnobs, boolean } from '@storybook/addon-knobs'
 import GeneralSetting from 'components/GeneralSetting'
 import initStates from 'states/initStates'
 
@@ -14,3 +15,14 @@ Object.entries(states).forEach(([title, showAddressBook]) => {
   const props = { ...initStates, settings: { ...initStates.settings, showAddressBook }, dispatch: () => {} }
   stories.add(title, () => <GeneralSetting {...props} />)
 })
+
+stories.addDecorator(withKnobs).add('With knobs', () => {
+  const props = {
+    ...initStates,
+    settings: {
+      ...initStates.settings,
+      showAddressBook: boolean('Show Address Book', false),
+    },
+  }
+  return <GeneralSetting {...props} dispatch={() => {}} />
+})

packages/neuron-ui/src/stories/History.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Route, RouteComponentProps } from 'react-router-dom'
 import { storiesOf } from '@storybook/react'
+import { withKnobs, text, number } from '@storybook/addon-knobs'
 import { action } from '@storybook/addon-actions'
 import StoryRouter from 'storybook-react-router'
 import History from 'components/History'
@@ -110,3 +111,29 @@ const stories = storiesOf('History', module).addDecorator(StoryRouter())
 Object.entries(states).forEach(([title, props]) => {
   stories.add(title, () => <HistoryWithRouteProps {...props} />)
 })
+
+stories.addDecorator(withKnobs).add('With knobs', () => {
+  const props = {
+    ...stateTemplate,
+    chain: {
+      ...stateTemplate.chain,
+      transactions: {
+        pageNo: number('Page No', 14),
+        pageSize: number('Page Size', 15),
+        totalCount: number('Total Count', 200),
+        items: transactions['Content List'].map((tx, idx) => ({
+          type: text(`${idx}-Type`, tx.type) as 'send' | 'receive' | 'other',
+          createdAt: text(`${idx}-Created at`, tx.createdAt),
+          updatedAt: text(`${idx}-Updated at`, tx.updatedAt),
+          timestamp: text(`${idx}-Timestamp`, tx.timestamp),
+          value: text(`${idx}-Value`, tx.value),
+          hash: text(`${idx}-Hash`, tx.hash),
+          description: text(`${idx}-Description`, tx.description),
+          status: text(`${idx}-Status`, tx.status) as 'pending' | 'success' | 'failed',
+        })),
+        keywords: '',
+      },
+    },
+  }
+  return <HistoryWithRouteProps {...props} />
+})

packages/neuron-ui/src/stories/Overview.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Route } from 'react-router-dom'
 import { storiesOf } from '@storybook/react'
+import { withKnobs, text } from '@storybook/addon-knobs'
 import StoryRouter from 'storybook-react-router'
 import { action } from '@storybook/addon-actions'
 import Overview from 'components/Overview'
@@ -53,3 +54,51 @@ const stories = storiesOf(`Overview`, module).addDecorator(StoryRouter())
 Object.entries(states).forEach(([title, props]) => {
   stories.add(title, () => <OverviewWithRouteProps {...props} />)
 })
+
+stories.addDecorator(withKnobs).add('With knobs', () => {
+  const props = {
+    dispatch: (dispatchAction: any) => action(dispatchAction),
+    ...initStates,
+    app: {
+      ...initStates.app,
+      epoch: text('Epoch', '1'),
+      difficulty: text('Difficulty', '0x111'),
+      chain: text('Chain', 'chain_dev'),
+    },
+    wallet: {
+      ...initStates.wallet,
+      id: text('Wallet ID', 'wallet id'),
+      name: text('Wallet Name', 'Current Wallet Name'),
+      balance: text('Balance', '213'),
+    },
+    chain: {
+      ...initStates.chain,
+      networkID: text('Network ID', 'testnet'),
+      transactions: {
+        ...initStates.chain.transactions,
+        items: transactions[`Content List`].map((tx, idx) => ({
+          type: text(`${idx}-Type`, tx.type) as 'send' | 'receive' | 'other',
+          createdAt: text(`${idx}-Created at`, tx.createdAt),
+          updatedAt: text(`${idx}-Updated at`, tx.updatedAt),
+          timestamp: text(`${idx}-Timestamp`, tx.timestamp),
+          value: text(`${idx}-Value`, tx.value),
+          hash: text(`${idx}-Hash`, tx.hash),
+          description: text(`${idx}-Description`, tx.description),
+          status: text(`${idx}-Status`, tx.status) as 'pending' | 'success' | 'failed',
+        })),
+      },
+      tipBlockNumber: text('Tip block number', '123'),
+    },
+    settings: {
+      ...initStates.settings,
+      networks: [
+        {
+          id: text('Network iD', 'testnet'),
+          name: text('Network Name', 'Testnet'),
+          remote: text('Network Address', 'http://testnet.nervos.com'),
+        },
+      ],
+    },
+  }
+  return <OverviewWithRouteProps {...props} />
+})

packages/neuron-ui/src/stories/Receive.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Route, RouteComponentProps } from 'react-router-dom'
 import StoryRouter from 'storybook-react-router'
 import { storiesOf } from '@storybook/react'
+import { withKnobs, text, number } from '@storybook/addon-knobs'
 import { action } from '@storybook/addon-actions'
 import Receive from 'components/Receive'
 import initStates from 'states/initStates'
@@ -41,3 +42,21 @@ const stories = storiesOf('Receive', module).addDecorator(StoryRouter())
 Object.entries(states).forEach(([title, props]) => {
   stories.add(title, () => <ReceiveWithRouteProps {...props} />)
 })
+
+stories.addDecorator(withKnobs).add('With knobs', () => {
+  const props = {
+    ...initStates,
+    wallet: {
+      ...initStates.wallet,
+      addresses: addresses['Content List'].slice(1).map(addr => ({
+        address: text(`Address`, addr.address),
+        identifier: text(`Identifier`, addr.identifier),
+        description: text(`Description`, addr.description),
+        type: number(`Type`, addr.type) as 0 | 1,
+        txCount: number(`Tx count`, 0),
+        balance: text(`Balance`, addr.balance),
+      })),
+    },
+  }
+  return <ReceiveWithRouteProps {...props} dispatch={() => {}} />
+})

packages/neuron-ui/src/stories/SyncStatus.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
+import { withKnobs, text, number } from '@storybook/addon-knobs'
 import { SyncStatus } from 'containers/Footer'
 
 const stories = storiesOf('SyncStatus', module)
@@ -40,3 +41,12 @@ const states = {
 Object.entries(states).forEach(([title, props]) => {
   stories.add(title, () => <SyncStatus {...props} />)
 })
+
+stories.addDecorator(withKnobs).add('With knobs', () => {
+  const props = {
+    tipBlockNumber: text('Tip block number', '100'),
+    syncedBlockNumber: text('Synced block number', '0'),
+    bufferBlockNumber: number('Buffer block number', 10),
+  }
+  return <SyncStatus {...props} />
+})