Merge pull request #651 from nervosnetwork/rc/v0.1.0-alpha.7

[ᚬmaster] Release v0.1.0 alpha.7
nervosnetwork · Jul 12, 2019 · 3b0b5cd · 3b0b5cd
2 parents c7d64ba + 53edd46
commit 3b0b5cd
Show file tree

Hide file tree

Showing 28 changed files with 800 additions and 434 deletions.
diff --git a/lerna.json b/lerna.json
@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.1.0-alpha.6",
+  "version": "0.1.0-alpha.7",
   "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.6",
+  "version": "0.1.0-alpha.7",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",
@@ -30,8 +30,8 @@
     "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:migrate": "ts-node ./node_modules/.bin/typeorm migration:generate",
-    "address-db": "ts-node ./node_modules/.bin/typeorm --config ormconfig-address.json"
+    "db:chain": "ts-node ./node_modules/.bin/typeorm",
+    "db:address": "ts-node ./node_modules/.bin/typeorm --config ormconfig-address.json"
   },
   "husky": {
     "hooks": {

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.6",
+  "version": "0.1.0-alpha.7",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",
@@ -39,14 +39,14 @@
     "last 2 chrome versions"
   ],
   "dependencies": {
+    "@nervosnetwork/ckb-sdk-core": "0.15.1",
+    "@uifabric/experiments": "7.4.2",
     "@uifabric/styling": "7.1.1",
-    "bootstrap": "4.3.1",
     "grommet-icons": "4.2.0",
     "i18next": "15.1.3",
     "office-ui-fabric-react": "7.6.1",
     "qr.js": "0.0.0",
     "react": "16.8.6",
-    "react-bootstrap": "1.0.0-beta.9",
     "react-dom": "16.8.6",
     "react-i18next": "10.11.0",
     "react-router-dom": "5.0.0",

diff --git a/packages/neuron-ui/src/components/History/index.tsx b/packages/neuron-ui/src/components/History/index.tsx
@@ -1,8 +1,15 @@
-import React, { useCallback, useMemo } from 'react'
-import { NavLink, RouteComponentProps } from 'react-router-dom'
+import React, { useCallback } from 'react'
+import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { Stack, SearchBox, getTheme } from 'office-ui-fabric-react'
-import { Search as SearchIcon } from 'grommet-icons'
+import { Pagination } from '@uifabric/experiments'
+import {
+  Search as SearchIcon,
+  LinkDown as LinkDownIcon,
+  LinkBottom as LinkBottomIcon,
+  LinkTop as LinkTopIcon,
+  LinkUp as LinkUpIcon,
+} from 'grommet-icons'
 
 import TransactionList from 'components/TransactionList'
 import { StateWithDispatch } from 'states/stateProvider/reducer'
@@ -17,6 +24,10 @@ const { semanticColors } = theme
 registerIcons({
   icons: {
     Search: <SearchIcon size="16px" color={semanticColors.menuIcon} />,
+    FirstPage: <LinkTopIcon size="16px" color={semanticColors.menuIcon} style={{ transform: 'rotate(-90deg)' }} />,
+    LastPage: <LinkBottomIcon size="16px" color={semanticColors.menuIcon} style={{ transform: 'rotate(-90deg)' }} />,
+    PrevPage: <LinkUpIcon size="16px" color={semanticColors.menuIcon} style={{ transform: 'rotate(-90deg)' }} />,
+    NextPage: <LinkDownIcon size="16px" color={semanticColors.menuIcon} style={{ transform: 'rotate(-90deg)' }} />,
   },
 })
 
@@ -33,7 +44,6 @@ const History = ({
 
   const { keywords, onKeywordsChange } = useSearch(search, incomingKeywords, id, dispatch)
   const onSearch = useCallback(() => history.push(`${Routes.History}?keywords=${keywords}`), [history, keywords])
-  const totalPages = useMemo(() => Math.ceil(totalCount / pageSize) || 1, [totalCount, pageSize])
 
   return (
     <Stack>
@@ -48,28 +58,26 @@ const History = ({
         />
       </Stack>
       <TransactionList walletID={id} items={items} dispatch={dispatch} />
-      <div style={{ display: 'flex', justifyContent: 'center' }}>
-        <NavLink to={`${Routes.History}?pageNo=1`}>{t('history.first')}</NavLink>
-        <NavLink
-          to={`${Routes.History}?pageNo=${pageNo - 1}`}
-          style={{
-            pointerEvents: pageNo - 1 < 1 ? 'none' : 'auto',
-            color: pageNo - 1 < 1 ? 'grey' : '#007bff',
-          }}
-        >
-          {t('history.previous')}
-        </NavLink>
-        <NavLink
-          to={`${Routes.History}?pageNo=${pageNo + 1}`}
-          style={{
-            pointerEvents: pageNo + 1 > totalPages ? 'none' : 'auto',
-            color: pageNo + 1 > totalPages ? 'grey' : '#007bff',
-          }}
-        >
-          {t('history.next')}
-        </NavLink>
-        <NavLink to={`${Routes.History}?pageNo=${totalPages}`}>{t('history.last')}</NavLink>
-      </div>
+      <Pagination
+        selectedPageIndex={pageNo - 1}
+        pageCount={Math.ceil(totalCount / pageSize)}
+        itemsPerPage={pageSize}
+        totalItemCount={totalCount}
+        previousPageAriaLabel={t('pagination.previous-page')}
+        nextPageAriaLabel={t('pagination.next-page')}
+        firstPageAriaLabel={t('pagination.first-page')}
+        lastPageAriaLabel={t('pagination.last-page')}
+        pageAriaLabel={t('pagination-page')}
+        selectedAriaLabel={t('pagination-selected')}
+        firstPageIconProps={{ iconName: 'FirstPage' }}
+        previousPageIconProps={{ iconName: 'PrevPage' }}
+        nextPageIconProps={{ iconName: 'NextPage' }}
+        lastPageIconProps={{ iconName: 'LastPage' }}
+        format="buttons"
+        onPageChange={(idx: number) => {
+          history.push(`${Routes.History}?pageNo=${idx + 1}`)
+        }}
+      />
     </Stack>
   )
 }

diff --git a/packages/neuron-ui/src/components/Overview/index.tsx b/packages/neuron-ui/src/components/Overview/index.tsx
@@ -77,7 +77,7 @@ const PropertyList = ({
     {...props}
   />
 )
-const General = ({
+const Overview = ({
   dispatch,
   wallet: { id, balance = '' },
   chain: {
@@ -128,7 +128,7 @@ const General = ({
     if (item) {
       return (
         <Text variant="mediumPlus" as="span">
-          {item.timestamp ? timeFormatter.format(+item.timestamp).toLocaleString() : '-'}
+          {timeFormatter.format(+(item.timestamp || item.createdAt)).toLocaleString()}
         </Text>
       )
     }
@@ -183,7 +183,7 @@ const General = ({
         },
       ].map(col => ({
         isResizable: true,
-        minWidth: MIN_CELL_WIDTH,
+        minWidth: 200,
         fieldName: col.key,
         ariaLabel: col.name,
         ...col,
@@ -194,7 +194,7 @@ const General = ({
   const balanceItems = useMemo(
     () => [
       { label: t('overview.amount'), value: balance },
-      { label: t('overview.live-cells'), value: 'mock livigin cells' },
+      { label: t('overview.live-cells'), value: 'mock living cells' },
       { label: t('overview.cell-types'), value: 'mock cell typ' },
     ],
     [t, balance]
@@ -243,6 +243,6 @@ const General = ({
   )
 }
 
-General.displayName = 'General'
+Overview.displayName = 'Overview'
 
-export default General
+export default Overview
diff --git a/packages/neuron-ui/src/components/Receive/index.tsx b/packages/neuron-ui/src/components/Receive/index.tsx
@@ -1,8 +1,7 @@
 import React, { useState, useCallback, useMemo } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { Stack, TextField, TooltipHost, Modal } from 'office-ui-fabric-react'
-import styled from 'styled-components'
+import { Stack, Text, TextField, TooltipHost, Modal } from 'office-ui-fabric-react'
 
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 import QRCode from 'widgets/QRCode'
@@ -14,15 +13,6 @@ declare global {
   }
 }
 
-const QRCodePanel = styled.div`
-  width: 300px;
-  margin: 50px 0 0 30px;
-`
-
-const QRCodeModal = styled.div`
-  text-align: center;
-`
-
 const Receive = ({
   wallet: { addresses = [] },
   match: { params },
@@ -32,7 +22,9 @@ const Receive = ({
 
   const accountAddress = useMemo(
     () =>
-      params.address || (addresses.find(addr => addr.type === 0 && addr.txCount === 0) || { address: '' }).address || '',
+      params.address ||
+      (addresses.find(addr => addr.type === 0 && addr.txCount === 0) || { address: '' }).address ||
+      '',
     [params, addresses]
   )
 
@@ -45,29 +37,45 @@ const Receive = ({
   }
 
   return (
-    <Stack>
-      <QRCodePanel onClick={() => setShowLargeQRCode(true)} style={{ alignSelf: 'center' }}>
+    <Stack tokens={{ childrenGap: 15 }} horizontalAlign="center">
+      <Stack onClick={() => setShowLargeQRCode(true)} style={{ alignSelf: 'center' }}>
         <QRCode value={accountAddress} size={256} />
-      </QRCodePanel>
-      <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>
+      <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>
       <Modal isOpen={showLargeQRCode} onDismiss={() => setShowLargeQRCode(false)}>
-        <div>{t('receive.address-qrcode')}</div>
-        <div>
-          <QRCodeModal>
-            <QRCode value={accountAddress} size={400} />
-          </QRCodeModal>
-        </div>
+        <Stack
+          styles={{
+            root: {
+              background: '#eee',
+            },
+          }}
+        >
+          <Text
+            variant="large"
+            as="h1"
+            style={{
+              padding: '0 15px',
+            }}
+          >
+            {t('receive.address-qrcode')}
+          </Text>
+        </Stack>
+        <Stack padding="15px">
+          <QRCode value={accountAddress} size={400} />
+        </Stack>
       </Modal>
     </Stack>
   )