Merge pull request #715 from nervosnetwork/rc/v0.1.0-alpha.13

[ᚬmaster] Rc/v0.1.0 alpha.13

lerna.json

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

package.json

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

packages/neuron-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nervosnetwork/neuron-ui",
-  "version": "0.1.0-alpha.12",
+  "version": "0.1.0-alpha.13",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",

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

@@ -17,7 +17,7 @@ import { appCalls } from 'services/UILayer'
 
 import { useLocalDescription } from 'utils/hooks'
 import { MIN_CELL_WIDTH, Routes } from 'utils/const'
-import { shannonToCKBFormatter } from 'utils/formatters'
+import { localNumberFormatter, shannonToCKBFormatter } from 'utils/formatters'
 
 const Addresses = ({
   wallet: { id, addresses = [] },
@@ -150,7 +150,7 @@ const Addresses = ({
         isCollapsible: false,
         onRender: (item?: State.Address) => {
           if (item) {
-            return (+item.txCount).toLocaleString()
+            return localNumberFormatter(item.txCount)
           }
           return '-'
         },

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

@@ -1,9 +1,11 @@
 import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
+import { Copy } from 'grommet-icons'
 import {
   Stack,
   Text,
+  ActionButton,
   DefaultButton,
   DetailsList,
   DetailsRow,
@@ -15,13 +17,24 @@ import {
   IDetailsRowStyles,
   FontSizes,
   Callout,
+  MessageBar,
+  MessageBarType,
 } from 'office-ui-fabric-react'
 
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 import actionCreators from 'states/stateProvider/actionCreators'
 
+import { showErrorMessage } from 'services/remote'
+
 import { localNumberFormatter, shannonToCKBFormatter } from 'utils/formatters'
 import { PAGE_SIZE, MIN_CELL_WIDTH } from 'utils/const'
+import { registerIcons } from 'utils/icons'
+
+registerIcons({
+  icons: {
+    Copy: <Copy size="small" />,
+  },
+})
 
 const timeFormatter = new Intl.DateTimeFormat(undefined, {
   year: 'numeric',
@@ -82,8 +95,9 @@ const PropertyList = ({
 const Overview = ({
   dispatch,
   app: { tipBlockNumber, chain, epoch, difficulty },
-  wallet: { id, name, balance = '' },
+  wallet: { id, name, balance = '', addresses = [] },
   chain: {
+    codeHash = '',
     transactions: { items = [] },
   },
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
@@ -252,7 +266,7 @@ const Overview = ({
       },
       {
         label: t('overview.difficulty'),
-        value: difficulty,
+        value: localNumberFormatter(+difficulty),
       },
     ],
     [t, chain, epoch, difficulty, tipBlockNumber]
@@ -271,6 +285,20 @@ const Overview = ({
     setDisplayMinerInfo(false)
   }, [setDisplayMinerInfo])
 
+  const defaultAddress = useMemo(() => {
+    return addresses.find(addr => addr.type === 0 && addr.index === 0)
+  }, [addresses])
+
+  const onCopyPubkeyHash = useCallback(() => {
+    if (defaultAddress) {
+      window.navigator.clipboard.writeText(defaultAddress.identifier)
+      hideMinerInfo()
+      // TODO: Add notification
+    } else {
+      showErrorMessage(t('messages.error'), t('messages.can-not-find-the-default-address'))
+    }
+  }, [defaultAddress, t, hideMinerInfo])
+
   return (
     <Stack tokens={{ childrenGap: 15 }} verticalFill horizontalAlign="stretch">
       <Text as="h1" variant={TITLE_FONT_SIZE}>
@@ -306,15 +334,46 @@ const Overview = ({
           onDismiss={hideBlockchainStatus}
           gapSpace={0}
         >
-          <Stack>
+          <Stack tokens={{ padding: 15 }}>
             <PropertyList columns={blockchainStatusColumns} items={blockchainStatusItems} isHeaderVisible={false} />
           </Stack>
         </Callout>
       ) : null}
-      {/* TODO: Implement this */}
       {minerInfoRef.current ? (
         <Callout target={minerInfoRef.current} hidden={!displayMinerInfo} onDismiss={hideMinerInfo} gapSpace={0}>
-          {t('overview.miner-info')}
+          <Stack tokens={{ padding: 15 }}>
+            {defaultAddress ? (
+              <Stack tokens={{ childrenGap: 15 }}>
+                <Stack tokens={{ childrenGap: 15 }}>
+                  <Text variant="medium">{t('overview.address')}</Text>
+                  <Text variant="small" className="fixedWidth">
+                    {defaultAddress.address}
+                  </Text>
+                </Stack>
+                <Stack tokens={{ childrenGap: 15 }}>
+                  <Text variant="medium">{t('overview.code-hash')}</Text>
+                  <Text variant="small" className="fixedWidth">
+                    {codeHash}
+                  </Text>
+                </Stack>
+                <Stack tokens={{ childrenGap: 15 }}>
+                  <Text variant="medium">{t('overview.lock-arg')}</Text>
+                  <Text variant="small" className="fixedWidth">
+                    {defaultAddress.identifier}
+                  </Text>
+                </Stack>
+                <Stack horizontalAlign="end">
+                  <ActionButton iconProps={{ iconName: 'Copy' }} onClick={onCopyPubkeyHash}>
+                    {t('overview.copy-pubkey-hash')}
+                  </ActionButton>
+                </Stack>
+              </Stack>
+            ) : (
+              <MessageBar messageBarType={MessageBarType.error}>
+                {t('messages.can-not-find-the-default-address')}
+              </MessageBar>
+            )}
+          </Stack>
         </Callout>
       ) : null}
     </Stack>

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

@@ -23,7 +23,7 @@ const Receive = ({
   )
 
   const copyAddress = useCallback(() => {
-    window.clipboard.writeText(accountAddress)
+    window.navigator.clipboard.writeText(accountAddress)
   }, [accountAddress])
 
   if (!accountAddress) {

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

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 import { Route, RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { Stack, Pivot, PivotItem, IconButton } from 'office-ui-fabric-react'
+import { Stack, Pivot, PivotItem, IconButton, Text } from 'office-ui-fabric-react'
 import { FormPreviousLink } from 'grommet-icons'
 
 import { StateWithDispatch } from 'states/stateProvider/reducer'
@@ -54,12 +54,12 @@ const Settings = ({
     <Stack tokens={{ childrenGap: 15 }}>
       <Stack horizontal>
         <Stack.Item align="center">
-          <IconButton onClick={goToOverview}>
+          <IconButton onClick={goToOverview} styles={{ root: { marginRight: 20 } }}>
             <FormPreviousLink />
           </IconButton>
         </Stack.Item>
         <Stack.Item align="center">
-          <h1>{t('navbar.settings')}</h1>
+          <Text variant="xLarge" as="h1">{t('navbar.settings')}</Text>
         </Stack.Item>
       </Stack>
 

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

@@ -24,6 +24,7 @@ import {
   addresses as addressesCache,
   currentNetworkID as currentNetworkIDCache,
   currentWallet as currentWalletCache,
+  systemScript as systemScriptCache,
 } from 'utils/localCache'
 
 let timer: NodeJS.Timeout
@@ -116,6 +117,7 @@ export const useChannelListeners = ({
           locale: string
           tipNumber: string
           connectStatus: boolean
+          codeHash: string
         }>
       ) => {
         if (args.status) {
@@ -129,6 +131,7 @@ export const useChannelListeners = ({
             transactions = initStates.chain.transactions,
             tipNumber = '0',
             connectStatus = false,
+            codeHash = '',
           } = args.result
           if (locale !== i18n.language) {
             i18n.changeLanguage(locale)
@@ -148,6 +151,7 @@ export const useChannelListeners = ({
             type: NeuronWalletActions.Chain,
             payload: {
               tipBlockNumber: tipNumber,
+              codeHash,
               connectStatus: connectStatus ? ConnectStatus.Online : ConnectStatus.Offline,
               transactions: { ...chain.transactions, ...transactions },
             },
@@ -158,6 +162,7 @@ export const useChannelListeners = ({
           walletsCache.save(wallets)
           addressesCache.save(addresses)
           networksCache.save(networks)
+          systemScriptCache.save({ codeHash })
         } else {
           /* eslint-disable no-alert */
           // TODO: better prompt, prd required
@@ -207,6 +212,16 @@ export const useChannelListeners = ({
             })
             break
           }
+          case ChainMethod.SystemScript: {
+            const { codeHash = '' } = args.result
+            dispatch({
+              type: NeuronWalletActions.Chain,
+              payload: {
+                codeHash,
+              },
+            })
+            break
+          }
           default: {
             break
           }

packages/neuron-ui/src/locales/en.json

@@ -25,7 +25,12 @@
       "tip-block-number": "Block Number",
       "epoch": "Epoch",
       "difficulty": "Difficulty",
-      "miner-info": "Miner Info"
+      "miner-info": "Miner Info",
+      "lock-arg": "Lock Arg",
+      "address": "Address",
+      "code-hash": "Code Hash",
+      "copy-pubkey-hash": "Copy Lock Arg (Pubkey Hash)",
+      "can-not-find-the-default-address": "Cannot find the default address"
     },
     "wizard": {
       "welcome-to-nervos-neuron": "Welcome to Neuron",

packages/neuron-ui/src/locales/zh.json

@@ -25,7 +25,12 @@
       "tip-block-number": "区块高度",
       "epoch": "Epoch",
       "difficulty": "难度",
-      "miner-info": "挖矿信息"
+      "miner-info": "挖矿信息",
+      "lock-arg": "Lock Arg",
+      "address": "地址",
+      "code-hash": "Code Hash",
+      "copy-pubkey-hash": "复制 Lock Arg (Pubkey Hash)",
+      "can-not-find-the-default-address": "未获得默认地址"
     },
     "wizard": {
       "welcome-to-nervos-ckb": "欢迎使用 Neuron",
@@ -71,7 +76,7 @@
     "receive": {
       "click-to-copy": "点击复制地址",
       "address-not-found": "未找到地址",
-      "prompt": "为了保护隐私，Neuron 会怎么选择一个新收款地址。如果您想使用旧的收款地址，请访问地址管理页面。",
+      "prompt": "为了保护隐私，Neuron 会自动选择一个新收款地址。如果您想使用旧的收款地址，请访问地址管理页面。",
       "address-qrcode": "地址二维码"
     },
     "history": {
@@ -209,7 +214,8 @@
       "wallet-not-found": "未找到钱包",
       "no-transactions": "没有交易",
       "error": "错误",
-      "invalid-mnemonic": "助记词不合法"
+      "invalid-mnemonic": "助记词不合法",
+      "can-not-find-the-default-address": "找不到默认地址"
     },
     "sync": {
       "syncing": "同步中",

packages/neuron-ui/src/services/UILayer.ts

@@ -13,6 +13,7 @@ export enum AppMethod {
 export enum ChainMethod {
   Status = 'status',
   TipBlockNumber = 'tipBlockNumber',
+  SystemScript = 'systemScript',
 }
 
 export enum WalletsMethod {

packages/neuron-ui/src/states/initStates/chain.ts

@@ -1,9 +1,10 @@
-import { currentNetworkID } from 'utils/localCache'
+import { currentNetworkID, systemScript } from 'utils/localCache'
 
 const chainState: State.Chain = {
   networkID: currentNetworkID.load(),
   connectStatus: 'offline',
   tipBlockNumber: '',
+  codeHash: systemScript.load().codeHash,
   transaction: {
     value: '',
     hash: '',

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

@@ -30,6 +30,7 @@ stories.addDecorator(withKnobs).add('With knobs', () => {
     type: number(`${idx}-Type`, addr.type) as 0 | 1,
     txCount: number(`${idx}-Tx count`, addr.txCount),
     balance: text(`${idx}-Balance`, addr.balance),
+    index: number(`${idx}-Index`, addr.index),
   }))
   return <AddressWithRouteProps addresses={addrs} />
 })

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

@@ -8,17 +8,24 @@ import Overview from 'components/Overview'
 import initStates from 'states/initStates'
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 import transactions from './data/transactions'
+import addresses from './data/addresses'
 
 const stateTemplate = {
   dispatch: (dispatchAction: any) => action(dispatchAction),
   ...initStates,
   app: {
     ...initStates.app,
     epoch: '1',
-    difficulty: '0x111',
+    difficulty: '0x111111',
     chain: 'chain_dev',
   },
-  wallet: { ...initStates.wallet, id: 'wallet id', name: 'Current Wallet Name', balance: '213' },
+  wallet: {
+    ...initStates.wallet,
+    id: 'wallet id',
+    name: 'Current Wallet Name',
+    balance: '213',
+    addresses: addresses['Content List'],
+  },
   chain: {
     ...initStates.chain,
     networkID: 'testnet',

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

@@ -55,6 +55,7 @@ stories.addDecorator(withKnobs).add('With knobs', () => {
         type: number(`Type`, addr.type) as 0 | 1,
         txCount: number(`Tx count`, 0),
         balance: text(`Balance`, addr.balance),
+        index: number(`Index`, addr.index),
       })),
     },
   }