Merge pull request #1676 from nervosnetwork/rc/v0.31.0

Rc/v0.31.0-rc1

.ckb-version

@@ -1 +1 @@
-v0.31.1
+v0.32.0

.gitignore

@@ -8,7 +8,6 @@ node_modules
 # testing
 /coverage
 *.snap
-/packages/neuron-wallet/tests-e2e/errors
 
 # production
 build

CHANGELOG.md

@@ -1,3 +1,29 @@
+# 0.31.0-rc1 (2020-05-29)
+
+### Bundled CKB node
+
+[CKB v0.32.0](https://github.com/nervosnetwork/ckb/releases/tag/v0.32.0) was released on May 22nd, 2020. This version of CKB node is now bundled and preconfigured in Neuron. 
+
+### New features
+
+We added several new features with this version:
+
+* New style of logo.
+* Enable exporting transaction history.
+* Make the `Settings` window to be independent with new style.
+* Add Language Switching function in `Settings` - `General` page.
+* Export more bundled CKB logs for debug info.
+* Include the bundled CKB version on the `About Neuron` window.
+* Replace the `Expected speed` drop-down box with `Quick Pick Price` in `Advanced fee settings`.
+
+### User Experience
+
+We also make some improvements for better user expeierence:
+
+* Optimize the `Copy` component, also remove unnecessary normal context menu (right-click menu).
+* Display password error in password dialog.
+
+
 # 0.30.0 (2020-05-15)
 
 ### Bundled CKB node

azure-pipelines.yml

@@ -4,7 +4,6 @@ trigger:
     include:
       - master
       - develop
-      - e2e-tests
       - rc/*
   tags:
     include:
@@ -90,27 +89,6 @@ stages:
         yarn test
       name: Test
 
-- stage: e2e_tests
-  displayName: Integration Tests
-  dependsOn: []
-  condition: false # eq(variables['build.sourceBranch'], 'refs/heads/master')
-  jobs:
-  - job: Integration
-    displayName: Integration Tests
-    pool:
-      vmImage: 'macos-10.14'
-    steps:
-    - task: NodeTool@0
-      inputs:
-        versionSpec: 12.x
-      displayName: 'Install Node.js'
-    - script: |
-        yarn global add lerna
-        yarn bootstrap
-      name: Bootstrap
-    - script: yarn test:e2e
-      name: Test
-
 - stage: release
   displayName: Release Binaries
   condition: eq(variables['build.sourceBranch'], 'refs/heads/master')

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.30.0",
+  "version": "0.31.0-rc1",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

package.json

@@ -2,7 +2,7 @@
   "name": "neuron",
   "productName": "Neuron",
   "description": "CKB Neuron Wallet",
-  "version": "0.30.0",
+  "version": "0.31.0-rc1",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",
@@ -31,7 +31,6 @@
     "build": "lerna run --stream build",
     "release": "yarn build && ./scripts/copy-ui-files.sh && ./scripts/release.sh",
     "test": "lerna run --parallel test",
-    "test:e2e": "yarn build && ./scripts/copy-ui-files.sh && lerna run --parallel test:e2e",
     "lint": "lerna run --stream lint",
     "postinstall": "lerna run rebuild:nativemodules",
     "db:chain": "node ./node_modules/.bin/typeorm"

packages/neuron-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neuron-ui",
-  "version": "0.30.0",
+  "version": "0.31.0-rc1",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",
@@ -58,7 +58,6 @@
     "react-dom": "16.12.0",
     "react-i18next": "11.2.5",
     "react-router-dom": "5.1.2",
-    "react-scripts": "3.3.1",
     "styled-components": "5.0.0-beta.0"
   },
   "devDependencies": {
@@ -93,6 +92,7 @@
     "node-sass": "4.13.0",
     "prettier": "1.19.1",
     "react-app-rewired": "2.1.5",
+    "react-scripts": "3.4.1",
     "react-test-renderer": "16.12.0",
     "rimraf": "3.0.0",
     "storybook-react-router": "1.0.8"

packages/neuron-ui/src/components/Addresses/addresses.module.scss

@@ -14,14 +14,14 @@ $change-color: #6666cc;
   border-collapse: collapse;
 
   tbody {
-    input+span {
+    input + span {
       display: none !important;
     }
 
     tr:hover {
       background-color: #f5f5f5;
 
-      input+span {
+      input + span {
         display: flex !important;
       }
     }
@@ -36,12 +36,10 @@ $change-color: #6666cc;
     border-bottom: 1px solid #b3b3b3;
   }
 
-
   th {
-    @include SemiBoldText;
+    @include semi-bold-text;
     font-size: 1rem;
     font-weight: 600;
-    letter-spacing: 0.6px;
     color: #000;
     padding: 18px 0;
 
@@ -52,7 +50,6 @@ $change-color: #6666cc;
 
   td {
     font-size: 0.875rem;
-    letter-spacing: 0.5px;
     color: #000;
     padding: 10px 0;
 
@@ -69,7 +66,6 @@ $change-color: #6666cc;
     }
   }
 
-
   .type {
     width: 100px;
     word-wrap: none;
@@ -84,6 +80,7 @@ $change-color: #6666cc;
   }
 
   .address {
+    line-height: 1.625rem;
     &:hover {
       div::after {
         display: block;
@@ -99,7 +96,7 @@ $change-color: #6666cc;
       .addressOverflow {
         word-break: break-all;
         text-align: right;
-        height: 1rem;
+        height: 1.625rem;
         overflow: hidden;
         text-align: right;
       }
@@ -109,22 +106,21 @@ $change-color: #6666cc;
       }
 
       @media screen and (max-width: 1365px) {
-
         .ellipsis {
           display: inline;
         }
       }
 
       @media screen and (max-width: 1680px) {
-        width: 30vw;
+        width: 20vw;
 
         &::after {
           position: absolute;
           top: 150%;
           left: 50%;
+          z-index: 1;
           content: attr(data-address);
           font-size: 0.875rem;
-          letter-spacing: 0.5px;
           color: #000;
           box-shadow: 1px 2px 6px 0 rgba(97, 97, 97, 0.5);
           background: #fff;
@@ -134,14 +130,9 @@ $change-color: #6666cc;
         }
       }
 
-      @media screen and (max-width: 1350px) {
-        width: 20vw;
-      }
-
       @media screen and (max-width: 1000px) {
         width: 15vw;
       }
-
     }
   }
 
@@ -167,13 +158,13 @@ $change-color: #6666cc;
   }
 
   .descriptionField {
-    @include descriptionField;
+    @include description-field;
 
     input {
       font-size: 0.875rem;
     }
 
-    &>div {
+    & > div {
       border: none;
     }
 
@@ -185,11 +176,16 @@ $change-color: #6666cc;
   }
 
   .balance {
+    div {
+      display: flex;
+      align-items: center;
+      height: 1.625rem;
+    }
     span {
       display: inline-block;
       min-width: 200px;
 
-      @media screen and (max-width:1160px) {
+      @media screen and (max-width: 1160px) {
         min-width: auto;
         width: 8vw;
       }
@@ -199,5 +195,4 @@ $change-color: #6666cc;
   .txCount {
     min-width: 100px;
   }
-
 }

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

@@ -3,16 +3,21 @@ import { useHistory } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { Edit } from 'grommet-icons'
 import TextField from 'widgets/TextField'
+import CopyZone from 'widgets/CopyZone'
 
-import { useState as useGlobalState, useDispatch } from 'states/stateProvider'
+import { useState as useGlobalState, useDispatch } from 'states'
 import { openExternal, openContextMenu } from 'services/remote'
 
-import { useLocalDescription } from 'utils/hooks'
-import { localNumberFormatter, shannonToCKBFormatter } from 'utils/formatters'
-import { Routes } from 'utils/const'
-import { backToTop } from 'utils/animations'
-import getExplorerUrl from 'utils/getExplorerUrl'
-import isMainnetUtil from 'utils/isMainnet'
+import {
+  useLocalDescription,
+  backToTop,
+  RoutePath,
+  localNumberFormatter,
+  shannonToCKBFormatter,
+  getExplorerUrl,
+  isMainnet as isMainnetUtil,
+} from 'utils'
+
 import styles from './addresses.module.scss'
 
 const Addresses = () => {
@@ -54,7 +59,7 @@ const Addresses = () => {
           {
             label: t('addresses.request-payment'),
             click: () => {
-              history.push(`${Routes.Receive}/${item.address}`)
+              history.push(`${RoutePath.Receive}/${item.address}`)
             },
           },
           {
@@ -85,16 +90,20 @@ const Addresses = () => {
           {addresses.map(addr => {
             const isSelected = localDescription.key === addr.address
             const typeLabel = addr.type === 0 ? t('addresses.receiving-address') : t('addresses.change-address')
+            const balance = `${shannonToCKBFormatter(addr.balance)} CKB`
+
             return (
               <tr key={addr.address} onContextMenu={onContextMenu(addr)}>
                 <td className={styles.type} data-type={addr.type === 0 ? 'receiving' : 'change'} title={typeLabel}>
                   {typeLabel}
                 </td>
-                <td className={`${styles.address} monospacedFont`}>
+                <td className={styles.address}>
                   <div data-address={addr.address}>
-                    <span className={styles.addressOverflow}>{addr.address.slice(0, -6)}</span>
-                    <span className={styles.ellipsis}>...</span>
-                    <span>{addr.address.slice(-6)}</span>
+                    <CopyZone content={addr.address} name={t('addresses.copy-address')}>
+                      <span className={styles.addressOverflow}>{addr.address.slice(0, -6)}</span>
+                      <span className={styles.ellipsis}>...</span>
+                      <span>{addr.address.slice(-6)}</span>
+                    </CopyZone>
                   </div>
                 </td>
                 <td title={addr.description} className={styles.description}>
@@ -127,8 +136,10 @@ const Addresses = () => {
                     }
                   />
                 </td>
-                <td className={styles.balance} title={`${shannonToCKBFormatter(addr.balance)} CKB`}>
-                  <span className="textOverflow">{`${shannonToCKBFormatter(addr.balance)} CKB`}</span>
+                <td className={styles.balance} title={balance}>
+                  <CopyZone content={balance.slice(0, -4).replace(/,/g, '')}>
+                    <span className="textOverflow">{balance}</span>
+                  </CopyZone>
                 </td>
                 <td className={styles.txCount} title={localNumberFormatter(addr.txCount)}>
                   {localNumberFormatter(addr.txCount)}

packages/neuron-ui/src/components/BalanceSyncingIcon/balanceSyncIcon.module.scss

@@ -5,17 +5,17 @@ $arrow: 10px;
   position: relative;
   font-size: 0.75rem;
   color: var(--nervos-green);
-  user-select: none;
   border-radius: 2px;
   z-index: 1;
 
   svg {
     width: 1rem;
     height: 0.75rem;
     pointer-events: none;
+    position: relative;
+    top: 1px;
   }
 
-
   &::after {
     display: none;
     content: attr(data-content);
@@ -47,7 +47,6 @@ $arrow: 10px;
   }
 
   &:hover {
-
     &::after,
     &::before {
       display: block;

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { ConnectionStatus, SyncStatus } from 'utils/const'
+import { ConnectionStatus, SyncStatus } from 'utils'
 import { ReactComponent as BalanceSyncing } from 'widgets/Icons/BalanceSyncing.svg'
 import { ReactComponent as BalanceSyncFailed } from 'widgets/Icons/BalanceSyncFailed.svg'
 import styles from './balanceSyncIcon.module.scss'

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

@@ -1,11 +1,10 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import getCompensationPeriod from 'utils/getCompensationPeriod'
-import getCompensatedTime from 'utils/getCompensatedTime'
-import { WITHDRAW_EPOCHS, CompensationPeriod, IMMATURE_EPOCHS } from 'utils/const'
-import { uniformTimeFormatter } from 'utils/formatters'
+import { getCompensatedTime, getCompensationPeriod, CONSTANTS, CompensationPeriod, uniformTimeFormatter } from 'utils'
 import styles from './compensationPeriodTooltip.module.scss'
 
+const { WITHDRAW_EPOCHS, IMMATURE_EPOCHS } = CONSTANTS
+
 const HOUR = 3_600_000
 const HOURS_PER_EPOCH = 4 * HOUR
 const SECS_PER_DAY = 24 * HOUR