Merge pull request #666 from nervosnetwork/rc/v0.1.0-alpha.8

[ᚬmaster] Release v0.1.0 alpha.8

Author: ashchan

lerna.json

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

package.json

@@ -2,7 +2,7 @@
   "name": "@nervosnetwork/neuron",
   "productName": "Neuron",
   "description": "CKB Neuron Wallet",
-  "version": "0.1.0-alpha.7",
+  "version": "0.1.0-alpha.8",
   "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.7",
+  "version": "0.1.0-alpha.8",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",
@@ -42,6 +42,7 @@
     "@nervosnetwork/ckb-sdk-core": "0.15.1",
     "@uifabric/experiments": "7.4.2",
     "@uifabric/styling": "7.1.1",
+    "canvg": "2.0.0",
     "grommet-icons": "4.2.0",
     "i18next": "15.1.3",
     "office-ui-fabric-react": "7.6.1",

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

@@ -17,6 +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'
 
 const Addresses = ({
   wallet: { id, addresses = [] },
@@ -77,6 +78,16 @@ const Addresses = ({
         maxWidth: 450,
         isResizable: true,
         isCollapsible: false,
+        onRender: (item?: State.Address) => {
+          if (item) {
+            return (
+              <span className="text-overflow" title={item.address}>
+                {item.address}
+              </span>
+            )
+          }
+          return '-'
+        },
       },
       {
         name: 'addresses.description',
@@ -118,6 +129,16 @@ const Addresses = ({
         maxWidth: 250,
         isResizable: true,
         isCollapsible: false,
+        onRender: (item?: State.Address) => {
+          if (item) {
+            return (
+              <span title={`${item.balance} shannon`} className="text-overflow">
+                {`${shannonToCKBFormatter(item.balance)} CKB`}
+              </span>
+            )
+          }
+          return '-'
+        },
       },
       {
         name: 'addresses.transactions',
@@ -127,6 +148,12 @@ const Addresses = ({
         maxWidth: 150,
         isResizable: true,
         isCollapsible: false,
+        onRender: (item?: State.Address) => {
+          if (item) {
+            return (+item.txCount).toLocaleString()
+          }
+          return '-'
+        },
       },
     ],
     [onDescriptionChange, localDescription, onDescriptionFieldBlur, onDescriptionPress, t, semanticColors]
@@ -148,6 +175,10 @@ const Addresses = ({
               display: 'flex',
               alignItems: 'center',
             },
+            '.text-overflow': {
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            },
           },
         },
       }}

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

@@ -44,7 +44,6 @@ const NetworkSetting = ({
               key: network.id,
               text: network.name,
               checked: chain.networkID === network.id,
-              disabled: chain.networkID === network.id,
               onRenderLabel: ({ text }: IChoiceGroupOption) => {
                 return (
                   <span className="ms-ChoiceFieldLabel" onContextMenu={onContextMenu(network.id)}>

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

@@ -18,7 +18,7 @@ import {
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 import actionCreators from 'states/stateProvider/actionCreators'
 
-import { localNumberFormatter } from 'utils/formatters'
+import { localNumberFormatter, shannonToCKBFormatter } from 'utils/formatters'
 import { PAGE_SIZE, MIN_CELL_WIDTH } from 'utils/const'
 
 const timeFormatter = new Intl.DateTimeFormat(undefined, {
@@ -155,7 +155,14 @@ const Overview = ({
       {
         key: 'value',
         name: t('overview.amount'),
+        title: 'value',
         minWidth: 2 * MIN_CELL_WIDTH,
+        onRender: (item?: State.Transaction) => {
+          if (item) {
+            return <span title={`${item.value} shannon`}>{`${shannonToCKBFormatter(item.value)} CKB`}</span>
+          }
+          return '-'
+        },
       },
     ].map(
       (col): IColumn => ({
@@ -193,7 +200,10 @@ const Overview = ({
 
   const balanceItems = useMemo(
     () => [
-      { label: t('overview.amount'), value: balance },
+      {
+        label: t('overview.amount'),
+        value: <span title={`${balance} shannon`}>{`${shannonToCKBFormatter(balance)} CKB`}</span>,
+      },
       { label: t('overview.live-cells'), value: 'mock living cells' },
       { label: t('overview.cell-types'), value: 'mock cell typ' },
     ],
@@ -212,8 +222,17 @@ const Overview = ({
   )
 
   return (
-    <Stack horizontal horizontalAlign="space-evenly" verticalFill tokens={{ childrenGap: 15 }}>
-      <Stack tokens={{ childrenGap: 15 }}>
+    <Stack horizontal horizontalAlign="space-evenly" verticalFill tokens={{ childrenGap: 15 }} wrap>
+      <Stack
+        tokens={{
+          childrenGap: 15,
+        }}
+        styles={{
+          root: {
+            minWidth: '680px',
+          },
+        }}
+      >
         <Stack>
           <Text as="h1" variant={TITLE_FONT_SIZE}>
             {t('overview.balance')}
@@ -229,7 +248,14 @@ const Overview = ({
           ) : null}
         </Stack.Item>
       </Stack>
-      <Stack horizontalAlign="stretch">
+      <Stack
+        horizontalAlign="stretch"
+        styles={{
+          root: {
+            minWidth: '680px',
+          },
+        }}
+      >
         <Text as="h1" variant={TITLE_FONT_SIZE}>
           {t('overview.recent-activities')}
         </Text>

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

@@ -1,18 +1,12 @@
 import React, { useState, useCallback, useMemo } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { Stack, Text, TextField, TooltipHost, Modal } from 'office-ui-fabric-react'
+import { Stack, Text, TextField, TooltipHost, Modal, FontSizes } from 'office-ui-fabric-react'
 
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 import QRCode from 'widgets/QRCode'
 import { Copy } from 'grommet-icons'
 
-declare global {
-  interface Window {
-    clipboard: any
-  }
-}
-
 const Receive = ({
   wallet: { addresses = [] },
   match: { params },
@@ -37,24 +31,35 @@ const Receive = ({
   }
 
   return (
-    <Stack tokens={{ childrenGap: 15 }} horizontalAlign="center">
-      <Stack onClick={() => setShowLargeQRCode(true)} style={{ alignSelf: 'center' }}>
-        <QRCode value={accountAddress} size={256} />
-      </Stack>
-      <Stack styles={{ root: { maxWidth: 500 } }}>
-        <TooltipHost content={t('receive.click-to-copy')} calloutProps={{ gapSpace: 0 }}>
-          <Stack horizontal horizontalAlign="stretch" tokens={{ childrenGap: 15 }}>
-            <TextField
-              styles={{ root: { flex: 1 } }}
-              readOnly
-              placeholder={accountAddress}
-              onClick={copyAddress}
-              description={t('receive.prompt')}
-            />
-            <Copy onClick={copyAddress} />
-          </Stack>
-        </TooltipHost>
+    <>
+      <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 }}>
+              <TextField
+                styles={{
+                  root: {
+                    flex: 1,
+                  },
+                  description: {
+                    fontSize: FontSizes.medium,
+                  },
+                }}
+                readOnly
+                placeholder={accountAddress}
+                onClick={copyAddress}
+                description={t('receive.prompt')}
+              />
+              <Copy onClick={copyAddress} />
+            </Stack>
+          </TooltipHost>
+        </Stack>
+
+        <Stack style={{ alignSelf: 'center' }}>
+          <QRCode value={accountAddress} onQRCodeClick={() => setShowLargeQRCode(true)} size={256} exportable />
+        </Stack>
       </Stack>
+
       <Modal isOpen={showLargeQRCode} onDismiss={() => setShowLargeQRCode(false)}>
         <Stack
           styles={{
@@ -77,7 +82,7 @@ const Receive = ({
           <QRCode value={accountAddress} size={400} />
         </Stack>
       </Modal>
-    </Stack>
+    </>
   )
 }
 

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

@@ -20,6 +20,7 @@ import { StateWithDispatch } from 'states/stateProvider/reducer'
 import appState from 'states/initStates/app'
 
 import { PlaceHolders, CapacityUnit } from 'utils/const'
+import { shannonToCKBFormatter } from 'utils/formatters'
 
 import { useInitialize } from './hooks'
 
@@ -143,7 +144,7 @@ const Send = ({
 
       <TransactionFeePanel fee="10" cycles="10" price={send.price} onPriceChange={updateTransactionPrice} />
 
-      <div>{`${t('send.balance')}: ${balance}`}</div>
+      <div>{`${t('send.balance')}: ${shannonToCKBFormatter(balance)} CKB`}</div>
 
       <Stack horizontal horizontalAlign="end" tokens={{ childrenGap: 20 }}>
         <DefaultButton type="reset" onClick={onClear}>