Merge pull request #736 from nervosnetwork/rc/v0.1.0-alpha.15

[ᚬmaster] Rc/v0.1.0 alpha.15
nervosnetwork · Jul 25, 2019 · b51cd54 · b51cd54
2 parents 9f54635 + 2ec6c30
commit b51cd54
Show file tree

Hide file tree

Showing 31 changed files with 303 additions and 207 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Neuron
 
-Nervos CKB Wallet
+Nervos CKB Desktop Wallet
 
 [![Azure Pipelines Build Status](https://dev.azure.com/nervosnetwork/neuron/_apis/build/status/nervosnetwork.neuron?branchName=develop)](https://dev.azure.com/nervosnetwork/neuron/_build/latest?definitionId=8&branchName=develop)
 [![TravisCI](https://travis-ci.com/nervosnetwork/neuron.svg?branch=develop)](https://travis-ci.com/nervosnetwork/neuron)
@@ -14,58 +14,62 @@ Nervos CKB Wallet
 
 You will need `node >= 12` and `yarn >= 1.14` to build and run Neuron.
 
-Please be noted that Neuron depends on [node-gyp](https://github.com/nodejs/node-gyp) to build native NPM modules. Follow [this](https://github.com/nodejs/node-gyp#installation) to install node-gyp dependencies.
-
 #### Lerna
 
-Neuron project uses [lerna](https://github.com/lerna/lerna/) for packages management. It can be installed globally, or locally in the project.
+This project uses [lerna](https://github.com/lerna/lerna/) for package management. It can be installed either globally or locally within the project:
 
 ```sh
 $ yarn global add lerna # install lerna globally
 # or
-$ yarn add lerna --exact --ignore-workspace-root-check # install lerna locally in the project
+$ yarn add lerna --exact --ignore-workspace-root-check # install lerna locally within the project
 ```
 
 #### Install Dependencies
 
-After lerna installed, the dependencies can be installed by
+After lerna has been installed, run this to install and link dependencies:
 
 ```sh
 $ yarn bootstrap
 ```
 
 ### Start Neuron
 
-### Start Neuron in development mode
+A local CKB node is required for Neuron wallet to talk to it via RPC APIs and get data. Please follow the [Nervos CKB doc](https://docs.nervos.org/getting-started/introduction) to get CKB node up and running first.
+
+### Start Neuron in Development Mode
 
 ```sh
 $ yarn start
 ```
 
-This command will start two tasks
+This command will start two tasks:
 
-1. start `neuron-ui`, which works for the user interface.
-2. start `neuron-wallet`, works for the wallet functionality.
+1. start `neuron-ui`, which is the React UI layer.
+2. start `neuron-wallet`, which is the core wallet layer.
 
-They are also able to start independently:
+You can also start them independently:
 
 ```sh
 # start neuron-ui at `http://localhost:3000`
-$ cd packages/neuron-ui && yarn start
+$ yarn start:ui
 ```
 
 ```sh
 # start neuron-wallet
-$ cd packages/neuron-wallet && yarn start:dev
+$ yarn start:wallet
 ```
 
 ### Test
 
 ```sh
-# launch the test runner in the watch mode.
+# launch the test runner.
 $ yarn test
 ```
 
+## Download Neuron Binary
+
+If you don't want to bother building from source, you can download a binary from [releases](https://github.com/nervosnetwork/neuron/releases). We offer pre-built binaries for Windows, Linux and macOS.
+
 ## License
 
 Neuron is released under the terms of the MIT license. See [COPYING](COPYING) for more information or see [https://opensource.org/licenses/MIT](https://opensource.org/licenses/MIT).
diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.1.0-alpha.14",
+  "version": "0.1.0-alpha.15",
   "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.14",
+  "version": "0.1.0-alpha.15",
   "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.14",
+  "version": "0.1.0-alpha.15",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",

diff --git a/packages/neuron-ui/src/components/Receive/index.tsx b/packages/neuron-ui/src/components/Receive/index.tsx
@@ -32,7 +32,7 @@ const Receive = ({
 
   return (
     <>
-      <Stack horizontal tokens={{ childrenGap: 40 }} padding="20px 0 0 0 " horizontalAlign="space-between">
+      <Stack horizontal tokens={{ childrenGap: 40 }} padding="20px 0 0 0" horizontalAlign="space-between">
         <Stack styles={{ root: { flex: 1 } }}>
           <TooltipHost content={t('receive.click-to-copy')} calloutProps={{ gapSpace: 0 }}>
             <Stack horizontal horizontalAlign="stretch" tokens={{ childrenGap: 15 }}>

diff --git a/packages/neuron-ui/src/components/Send/index.tsx b/packages/neuron-ui/src/components/Send/index.tsx
@@ -3,6 +3,8 @@ import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import {
   Stack,
+  Label,
+  Text,
   List,
   TextField,
   PrimaryButton,
@@ -50,9 +52,16 @@ const Send = ({
     onDescriptionChange,
     onClear,
   } = useInitialize(address, send.outputs, dispatch, history)
+  const leftStackWidth = '70%'
+  const labelWidth = '140px'
+  const actionSpacer = (
+    <Stack.Item styles={{ root: { width: '48px' } }}>
+      <span> </span>
+    </Stack.Item>
+  )
 
   return (
-    <Stack verticalFill tokens={{ childrenGap: 15 }}>
+    <Stack verticalFill tokens={{ childrenGap: 15 }} padding="20px 0 0 0">
       <Stack.Item>
         <List
           items={send.outputs || []}
@@ -63,14 +72,21 @@ const Send = ({
             return (
               <Stack tokens={{ childrenGap: 15 }}>
                 <Stack horizontal verticalAlign="end" horizontalAlign="space-between">
-                  <Stack horizontal verticalAlign="end" styles={{ root: { width: '70%' } }}>
+                  <Stack
+                    horizontal
+                    verticalAlign="end"
+                    styles={{ root: { width: leftStackWidth } }}
+                    tokens={{ childrenGap: 20 }}
+                  >
+                    <Stack.Item styles={{ root: { width: labelWidth } }}>
+                      <Label>{t('send.address')}</Label>
+                    </Stack.Item>
                     <Stack.Item styles={{ root: { flex: 1 } }}>
                       <TextField
                         disabled={sending}
                         value={item.address || ''}
                         onChange={onItemChange('address', idx)}
                         placeholder={PlaceHolders.send.Address}
-                        label={t('send.address')}
                         required
                       />
                     </Stack.Item>
@@ -86,17 +102,24 @@ const Send = ({
                   <Stack.Item>
                     {send.outputs.length > 1 ? (
                       <IconButton text={t('send.remove-this')} onClick={() => removeTransactionOutput(idx)}>
-                        <RemoveIcon />
+                        <RemoveIcon color="red" />
                       </IconButton>
                     ) : null}
                   </Stack.Item>
                 </Stack>
 
                 <Stack horizontal verticalAlign="end" horizontalAlign="space-between">
-                  <Stack horizontal verticalAlign="end" styles={{ root: { width: '70%' } }}>
+                  <Stack
+                    horizontal
+                    verticalAlign="end"
+                    styles={{ root: { width: leftStackWidth } }}
+                    tokens={{ childrenGap: 20 }}
+                  >
+                    <Stack.Item styles={{ root: { width: labelWidth } }}>
+                      <Label>{t('send.amount')}</Label>
+                    </Stack.Item>
                     <Stack.Item styles={{ root: { flex: 1 } }}>
                       <TextField
-                        label={t('send.amount')}
                         value={item.amount}
                         placeholder={PlaceHolders.send.Amount}
                         onChange={onItemChange('amount', idx)}
@@ -126,25 +149,27 @@ const Send = ({
       </Stack.Item>
 
       <Stack horizontal verticalAlign="end" horizontalAlign="space-between">
-        <Stack horizontal verticalAlign="end" styles={{ root: { width: '70%' } }}>
-          <Stack.Item styles={{ root: { flex: 1 } }}>
-            <TextField
-              label={t('send.description-optional')}
-              id="description"
-              alt="description"
-              value={send.description}
-              onChange={onDescriptionChange}
-            />
+        <Stack horizontal verticalAlign="end" styles={{ root: { width: leftStackWidth } }} tokens={{ childrenGap: 20 }}>
+          <Stack.Item styles={{ root: { width: labelWidth } }}>
+            <Label>{t('send.description')}</Label>
           </Stack.Item>
-          <Stack.Item styles={{ root: { width: '43px', paddingLeft: '5px' } }}>
-            <span> </span>
+          <Stack.Item styles={{ root: { flex: 1 } }}>
+            <TextField id="description" alt="description" value={send.description} onChange={onDescriptionChange} />
           </Stack.Item>
+          {actionSpacer}
         </Stack>
       </Stack>
 
       <TransactionFeePanel fee="10" cycles="10" price={send.price} onPriceChange={updateTransactionPrice} />
 
-      <div>{`${t('send.balance')}: ${shannonToCKBFormatter(balance)} CKB`}</div>
+      <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 20 }}>
+        <Stack.Item styles={{ root: { width: labelWidth } }}>
+          <Label>{t('send.balance')}</Label>
+        </Stack.Item>
+        <Stack.Item>
+          <Text>{`${shannonToCKBFormatter(balance)} CKB`}</Text>
+        </Stack.Item>
+      </Stack>
 
       <Stack horizontal horizontalAlign="end" tokens={{ childrenGap: 20 }}>
         <DefaultButton type="reset" onClick={onClear}>

diff --git a/packages/neuron-ui/src/components/Settings/index.tsx b/packages/neuron-ui/src/components/Settings/index.tsx
@@ -9,6 +9,7 @@ import { StateWithDispatch } from 'states/stateProvider/reducer'
 import GeneralSetting from 'components/GeneralSetting'
 import Wallets from 'components/WalletSetting'
 import NetworkSetting from 'components/NetworkSetting'
+import { WalletWizardPath } from 'components/WalletWizard'
 
 import { Routes } from 'utils/const'
 
@@ -46,15 +47,16 @@ const Settings = ({
   ...neuronWalletState
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
   const [t] = useTranslation()
-  const goToOverview = useCallback(() => {
-    history.push(Routes.Overview)
-  }, [history])
+  const { id } = neuronWalletState.wallet
+  const onLeave = useCallback(() => {
+    return id ? history.push(Routes.Overview) : history.push(`${Routes.WalletWizard}${WalletWizardPath.Welcome}`)
+  }, [id, history])
 
   return (
     <Stack tokens={{ childrenGap: 15 }}>
       <Stack horizontal>
         <Stack.Item align="center">
-          <IconButton onClick={goToOverview} styles={{ root: { marginRight: 20 } }}>
+          <IconButton onClick={onLeave} styles={{ root: { marginRight: 20 } }}>
             <FormPreviousLink />
           </IconButton>
         </Stack.Item>
@@ -69,7 +71,7 @@ const Settings = ({
         selectedKey={location.pathname}
         onLinkClick={(pivotItem?: PivotItem) => {
           if (pivotItem && pivotItem.props && pivotItem.props.itemKey) {
-            history.push(pivotItem.props.itemKey)
+            history.replace(pivotItem.props.itemKey)
           }
         }}
         headersOnly