Merge pull request #849 from nervosnetwork/rc/v0.18.0-alpha.0

[ᚬmaster] Rc/v0.18.0 alpha.0

.gitignore

@@ -7,6 +7,7 @@ node_modules
 
 # testing
 /coverage
+*.snap
 
 # production
 build

CHANGELOG.md

@@ -1,3 +1,13 @@
+# [0.18.0-alpha.0](https://github.com/nervosnetwork/neuron/compare/v0.17.0-alpha.9...v0.18.0-alpha.0) (2019-08-10)
+
+
+### Features
+
+* **neuron-ui:** remove highlight on values in recent activities ([bc052ac](https://github.com/nervosnetwork/neuron/commit/bc052ac))
+* display recent activities in sentence style ([b1af1fb](https://github.com/nervosnetwork/neuron/commit/b1af1fb))
+
+
+
 # [0.17.0-alpha.9](https://github.com/nervosnetwork/neuron/compare/v0.17.0-alpha.8...v0.17.0-alpha.9) (2019-08-08)
 
 

jest.config.js

@@ -7,6 +7,6 @@ module.exports = {
   verbose: true,
   moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
   projects: [
-    "<rootDir>/packages/neuron-wallet"
+    "<rootDir>/packages/neuron-*",
   ]
 };

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.17.0-alpha.9",
+  "version": "0.18.0-alpha.0",
   "npmClient": "yarn",
   "useWorkspaces": true
 }

package.json

@@ -2,7 +2,7 @@
   "name": "neuron",
   "productName": "Neuron",
   "description": "CKB Neuron Wallet",
-  "version": "0.17.0-alpha.9",
+  "version": "0.18.0-alpha.0",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",

packages/neuron-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "neuron-ui",
-  "version": "0.17.0-alpha.9",
+  "version": "0.18.0-alpha.0",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",
@@ -43,7 +43,7 @@
     "last 2 chrome versions"
   ],
   "dependencies": {
-    "@nervosnetwork/ckb-sdk-core": "0.17.1",
+    "@nervosnetwork/ckb-sdk-core": "0.18.0",
     "@uifabric/experiments": "7.10.0",
     "@uifabric/styling": "7.4.0",
     "canvg": "2.0.0",
@@ -62,6 +62,7 @@
     "@storybook/addon-actions": "5.1.9",
     "@storybook/addon-knobs": "5.1.9",
     "@storybook/addon-links": "5.1.9",
+    "@storybook/addon-storyshots": "5.1.10",
     "@storybook/addon-viewport": "5.1.9",
     "@storybook/addons": "5.1.9",
     "@storybook/cli": "5.1.9",
@@ -74,6 +75,7 @@
     "@types/react-router-dom": "4.3.3",
     "@types/storybook-react-router": "1.0.0",
     "@types/storybook__addon-knobs": "5.0.3",
+    "@types/storybook__addon-storyshots": "5.1.0",
     "@types/storybook__react": "4.0.2",
     "@types/styled-components": "4.1.16",
     "babel-jest": "24.8.0",
@@ -84,6 +86,7 @@
     "lint-staged": "9.2.0",
     "node-sass": "4.12.0",
     "react-app-rewired": "2.1.3",
+    "react-test-renderer": "16.8.6",
     "rimraf": "2.6.3",
     "storybook-react-router": "1.0.5"
   }

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

@@ -8,6 +8,7 @@ import {
   DefaultButton,
   DetailsList,
   DetailsRow,
+  Icon,
   IColumn,
   CheckboxVisibility,
   DetailsListLayoutMode,
@@ -24,66 +25,94 @@ import PropertyList, { Property } from 'widgets/PropertyList'
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 import { updateTransactionList, addPopup } from 'states/stateProvider/actionCreators'
 
-import { showErrorMessage } from 'services/remote'
+import { showTransactionDetails, showErrorMessage } from 'services/remote'
 
 import { localNumberFormatter, shannonToCKBFormatter, uniformTimeFormatter as timeFormatter } from 'utils/formatters'
-import { PAGE_SIZE } from 'utils/const'
+import { PAGE_SIZE, Routes, CONFIRMATION_THRESHOLD } from 'utils/const'
 
 const TITLE_FONT_SIZE = 'xxLarge'
+export type ActivityItem = State.Transaction & { confirmations: string; typeLabel: string }
+
+const genTypeLabel = (type: 'send' | 'receive', confirmationCount: number) => {
+  switch (type) {
+    case 'send': {
+      if (confirmationCount < CONFIRMATION_THRESHOLD) {
+        return 'sending'
+      }
+      return 'sent'
+    }
+    case 'receive': {
+      if (confirmationCount < CONFIRMATION_THRESHOLD) {
+        return 'receiving'
+      }
+      return 'received'
+    }
+    default: {
+      return type
+    }
+  }
+}
 
 const ActivityList = ({
   columns,
   items,
+  onGoToHistory,
+  t,
   ...props
 }: React.PropsWithoutRef<{
   columns: IColumn[]
   items: any
+  onGoToHistory: any
+  t: any
   isHeaderVisible?: boolean
   onRenderRow?: IRenderFunction<IDetailsRowProps>
   [index: string]: any
 }>) => (
-  <DetailsList
-    layoutMode={DetailsListLayoutMode.fixedColumns}
-    checkboxVisibility={CheckboxVisibility.hidden}
-    compact
-    items={items}
-    columns={columns}
-    styles={{
-      root: {
-        backgroundColor: 'transparent',
-      },
-      headerWrapper: {
-        selectors: {
-          '.ms-DetailsHeader': {
-            backgroundColor: 'transparent',
-          },
-          '.ms-DetailsHeader-cellName': {
-            fontSize: FontSizes.xLarge,
-          },
+  <Stack>
+    <DetailsList
+      isHeaderVisible={false}
+      layoutMode={DetailsListLayoutMode.justified}
+      checkboxVisibility={CheckboxVisibility.hidden}
+      compact
+      items={items.slice(0, 10)}
+      columns={columns}
+      onItemInvoked={item => {
+        showTransactionDetails(item.hash)
+      }}
+      styles={{
+        root: {
+          backgroundColor: 'transparent',
         },
-      },
-      contentWrapper: {
-        selectors: {
-          '.ms-DetailsRow': {
-            backgroundColor: 'transparent',
-          },
-          '.ms-DetailsRow-cell': {
-            fontSize: FontSizes.mediumPlus,
+        contentWrapper: {
+          selectors: {
+            '.ms-DetailsRow': {
+              backgroundColor: 'transparent',
+            },
+            '.ms-DetailsRow-cell': {
+              fontSize: FontSizes.mediumPlus,
+            },
           },
         },
-      },
-    }}
-    {...props}
-  />
+      }}
+      {...props}
+    />
+    {items.length > 10 ? (
+      <ActionButton onClick={onGoToHistory} styles={{ root: { border: 'none' } }}>
+        {t('overview.more')}
+      </ActionButton>
+    ) : null}
+  </Stack>
 )
 const Overview = ({
   dispatch,
   app: { tipBlockNumber, chain, epoch, difficulty },
   wallet: { id, name, balance = '', addresses = [] },
   chain: {
+    tipBlockNumber: syncedBlockNumber,
     codeHash = '',
     transactions: { items = [] },
   },
+  history,
 }: React.PropsWithoutRef<StateWithDispatch & RouteComponentProps>) => {
   const [t] = useTranslation()
   const [displayBlockchainInfo, setDisplayBlockchainInfo] = useState(false)
@@ -100,6 +129,9 @@ const Overview = ({
       walletID: id,
     })(dispatch)
   }, [id, dispatch])
+  const onGoToHistory = useCallback(() => {
+    history.push(Routes.History)
+  }, [history])
 
   const onTransactionRowRender = useCallback((props?: IDetailsRowProps) => {
     if (props) {
@@ -108,29 +140,22 @@ const Overview = ({
           animationDuration: '0!important',
         },
       }
-      if (props.item.status === 'failed') {
-        customStyles.root = {
-          animationDuration: '0!important',
-          color: 'red',
-        }
-      }
       return <DetailsRow {...props} styles={customStyles} />
     }
     return null
   }, [])
 
-  const onTransactionTypeRender = useCallback((item?: any) => {
+  const onTransactionActivityRender = useCallback((item?: ActivityItem) => {
     if (item) {
       return (
-        <Text
-          variant="mediumPlus"
-          as="span"
-          style={{
-            color: item.type === 'receive' ? '#28b463' : '#e66465',
-          }}
-        >
-          {item.type}
-        </Text>
+        <>
+          <Text variant="mediumPlus" as="span" title={`${item.value} shannon`}>
+            {`${item.typeLabel} ${shannonToCKBFormatter(item.value)} CKB`}
+          </Text>
+          <Text variant="mediumPlus" as="span" title={item.confirmations} styles={{ root: [{ paddingLeft: '5px' }] }}>
+            {item.confirmations}
+          </Text>
+        </>
       )
     }
     return null
@@ -149,6 +174,24 @@ const Overview = ({
 
   const activityColumns: IColumn[] = useMemo(() => {
     return [
+      {
+        key: 'status',
+        name: t('overview.status'),
+        minWidth: 20,
+        maxWidth: 20,
+        onRender: (item?: State.Transaction) => {
+          if (!item) {
+            return null
+          }
+          let iconName = 'TransactionPending'
+          if (item.status === 'success') {
+            iconName = 'TransactionSuccess'
+          } else if (item.status === 'failed') {
+            iconName = 'TransactionFailure'
+          }
+          return <Icon iconName={iconName} title={item.status} />
+        },
+      },
       {
         key: 'timestamp',
         name: t('overview.datetime'),
@@ -157,30 +200,11 @@ const Overview = ({
         onRender: onTimestampRender,
       },
       {
-        key: 'type',
-        name: t('overview.type'),
-        minWidth: 100,
-        maxWidth: 100,
-        onRender: onTransactionTypeRender,
-      },
-      {
-        key: 'status',
-        name: t('overview.status'),
+        key: 'activity',
+        name: t('overview.activity'),
         minWidth: 100,
-        maxWidth: 100,
-      },
-      {
-        key: 'value',
-        name: t('overview.amount'),
-        title: 'value',
-        minWidth: 100,
-        maxWidth: 500,
-        onRender: (item?: State.Transaction) => {
-          if (item) {
-            return <span title={`${item.value} shannon`}>{`${shannonToCKBFormatter(item.value)} CKB`}</span>
-          }
-          return '-'
-        },
+        maxWidth: 600,
+        onRender: onTransactionActivityRender,
       },
     ].map(
       (col): IColumn => ({
@@ -189,7 +213,7 @@ const Overview = ({
         ...col,
       })
     )
-  }, [t, onTimestampRender, onTransactionTypeRender])
+  }, [t, onTimestampRender, onTransactionActivityRender])
 
   const balanceProperties: Property[] = useMemo(
     () => [
@@ -249,6 +273,28 @@ const Overview = ({
     }
   }, [defaultAddress, t, hideMinerInfo, dispatch])
 
+  const activityItems = useMemo(
+    () =>
+      items.map(item => {
+        let confirmations = '(-)'
+        let typeLabel: string = item.type
+        if (item.blockNumber !== undefined) {
+          const confirmationCount = 1 + Math.max(+syncedBlockNumber, +tipBlockNumber) - +item.blockNumber
+          typeLabel = genTypeLabel(item.type, confirmationCount)
+          confirmations =
+            confirmationCount > 1
+              ? `(${t('overview.confirmations', { confirmationCount: localNumberFormatter(confirmationCount) })})`
+              : `(${t('overview.confirmation', { confirmationCount: localNumberFormatter(confirmationCount) })})`
+        }
+        return {
+          ...item,
+          confirmations: item.status === 'success' ? confirmations : '',
+          typeLabel: t(`overview.${typeLabel}`),
+        }
+      }),
+    [items, t, syncedBlockNumber, tipBlockNumber]
+  )
+
   return (
     <Stack tokens={{ childrenGap: 15 }} verticalFill horizontalAlign="stretch">
       <Text as="h1" variant={TITLE_FONT_SIZE}>
@@ -273,7 +319,13 @@ const Overview = ({
         {t('overview.recent-activities')}
       </Text>
       {items.length ? (
-        <ActivityList columns={activityColumns} items={items} onRenderRow={onTransactionRowRender} />
+        <ActivityList
+          columns={activityColumns}
+          items={activityItems}
+          onRenderRow={onTransactionRowRender}
+          onGoToHistory={onGoToHistory}
+          t={t}
+        />
       ) : (
         <div>{t('overview.no-recent-activities')}</div>
       )}