feat(neuron-ui): show confirmations on the History View

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

@@ -13,10 +13,12 @@ import { useSearch } from './hooks'
 
 const History = ({
   app: {
+    tipBlockNumber: chainBlockNumber,
     loadings: { transactionList: isLoading, updateDescription: isUpdatingDescription },
   },
   wallet: { id },
   chain: {
+    tipBlockNumber: syncedBlockNumber,
     transactions: { pageNo = 1, pageSize = 15, totalCount = 0, items = [] },
   },
   history,
@@ -33,6 +35,10 @@ const History = ({
   }, [id, history])
   const onSearch = useCallback(() => history.push(`${Routes.History}?keywords=${keywords}`), [history, keywords])
 
+  const tipBlockNumber = useMemo(() => {
+    return Math.max(+syncedBlockNumber, +chainBlockNumber).toString()
+  }, [syncedBlockNumber, chainBlockNumber])
+
   const List = useMemo(() => {
     return (
       <Stack>
@@ -51,6 +57,7 @@ const History = ({
           isUpdatingDescription={isUpdatingDescription}
           walletID={id}
           items={items}
+          tipBlockNumber={tipBlockNumber}
           dispatch={dispatch}
         />
         <Pagination
@@ -83,6 +90,7 @@ const History = ({
     isUpdatingDescription,
     id,
     items,
+    tipBlockNumber,
     dispatch,
     pageNo,
     totalCount,

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

@@ -16,8 +16,14 @@ import { StateDispatch } from 'states/stateProvider/reducer'
 import { contextMenu, showTransactionDetails } from 'services/remote'
 
 import { useLocalDescription } from 'utils/hooks'
-import { shannonToCKBFormatter, uniformTimeFormatter as timeFormatter, uniformTimeFormatter } from 'utils/formatters'
+import {
+  shannonToCKBFormatter,
+  uniformTimeFormatter as timeFormatter,
+  uniformTimeFormatter,
+  localNumberFormatter,
+} from 'utils/formatters'
 import { onRenderRow } from 'utils/fabricUIRender'
+import { CONFIRMATION_THRESHOLD } from 'utils/const'
 
 const theme = getTheme()
 
@@ -50,12 +56,14 @@ const TransactionList = ({
   isUpdatingDescription = false,
   items = [],
   walletID,
+  tipBlockNumber,
   dispatch,
 }: {
   isLoading?: boolean
   isUpdatingDescription?: boolean
   walletID: string
   items: State.Transaction[]
+  tipBlockNumber: string
   dispatch: StateDispatch
 }) => {
   const [t] = useTranslation()
@@ -71,35 +79,95 @@ const TransactionList = ({
   const transactionColumns: IColumn[] = useMemo(
     (): IColumn[] =>
       [
-        { name: t('history.type'), key: 'type', fieldName: 'type', minWidth: MIN_CELL_WIDTH, maxWidth: 50 },
+        {
+          name: t('history.type'),
+          key: 'type',
+          fieldName: 'type',
+          minWidth: MIN_CELL_WIDTH,
+          maxWidth: 50,
+          onRender: (item?: FormatTransaction) => {
+            if (!item) {
+              return null
+            }
+            const type = t(`history.${item.type}`)
+            return <span title={type}>{type}</span>
+          },
+        },
         {
           name: t('history.timestamp'),
           key: 'timestamp',
           fieldName: 'timestamp',
           minWidth: 80,
           maxWidth: 80,
           onRender: (item?: FormatTransaction) => {
-            return item ? <span>{uniformTimeFormatter(item.timestamp || item.createdAt).split(' ')[1]}</span> : null
+            if (!item) {
+              return null
+            }
+            const time = uniformTimeFormatter(item.timestamp || item.createdAt).split(' ')[1]
+            return <span title={time}>{time}</span>
           },
         },
         {
           name: t('history.transaction-hash'),
           key: 'hash',
           fieldName: 'hash',
+          minWidth: 150,
+          maxWidth: 150,
+          onRender: (item?: FormatTransaction) => {
+            if (!item) {
+              return '-'
+            }
+            return (
+              <span className="text-overflow monospacedFont" title={item.hash}>
+                {`${item.hash.slice(0, 8)}...${item.hash.slice(-6)}`}
+              </span>
+            )
+          },
+        },
+        {
+          name: t('history.confirmations'),
+          key: 'confirmation',
           minWidth: 100,
-          maxWidth: 600,
+          maxWidth: +tipBlockNumber > 1e12 ? undefined : 150,
           onRender: (item?: FormatTransaction) => {
-            if (item) {
-              return (
-                <span className="text-overflow monospacedFont" title={item.hash}>
-                  {item.hash}
-                </span>
-              )
+            if (!item || item.status !== 'success') {
+              return null
             }
-            return '-'
+            const confirmationCount = 1 + +tipBlockNumber - +item.blockNumber
+            if (confirmationCount < CONFIRMATION_THRESHOLD) {
+              return t(`history.confirming-with-count`, {
+                confirmations: `${confirmationCount} / ${CONFIRMATION_THRESHOLD}`,
+              })
+            }
+            const confirmations = localNumberFormatter(confirmationCount)
+            return (
+              <span title={`${confirmations}`} className="text-overflow">
+                {confirmations}
+              </span>
+            )
+          },
+        },
+        {
+          name: t('history.status'),
+          key: 'status',
+          fieldName: 'status',
+          minWidth: 80,
+          maxWidth: 80,
+          onRender: (item?: FormatTransaction) => {
+            if (!item) {
+              return null
+            }
+            if (item.status !== 'success') {
+              const status = t(`history.${item.status}`)
+              return <span title={status}>{status}</span>
+            }
+            const confirmationCount = 1 + +tipBlockNumber - +item.blockNumber
+            if (confirmationCount < CONFIRMATION_THRESHOLD) {
+              return t(`history.confirming`)
+            }
+            return t(`history.success`)
           },
         },
-        { name: t('history.status'), key: 'status', fieldName: 'status', minWidth: 50, maxWidth: 50 },
         {
           name: t('history.description'),
           key: 'description',
@@ -151,6 +219,7 @@ const TransactionList = ({
         },
       ].map((col): IColumn => ({ fieldName: col.key, ariaLabel: col.name, ...col })),
     [
+      tipBlockNumber,
       localDescription,
       onDescriptionChange,
       onDescriptionFieldBlur,

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

@@ -126,11 +126,17 @@
       "last": "Last",
       "description": "Description",
       "status": "Status",
+      "pending": "Pending",
+      "success": "Success",
+      "failed": "Failed",
+      "confirming": "Confirming",
       "blockNumber": "Block Number",
       "basic-information": "Basic Information",
       "search": {
         "placeholder": "Search tx hash, address or date (yyyy-mm-dd)"
-      }
+      },
+      "confirmations": "Confirmations",
+      "confirming-with-count": "{{confirmations}} confirmations"
     },
     "transaction": {
       "goBack": "Go back"

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

@@ -126,11 +126,17 @@
       "last": "最后一页",
       "description": "标签",
       "status": "状态",
+      "pending": "已提交",
+      "success": "成功",
+      "failed": "失败",
+      "confirming": "确认中",
       "blockNumber": "区块高度",
       "basic-information": "基本信息",
       "search": {
         "placeholder": "使用交易哈希、地址或日期(yyyy-mm-dd)进行搜索"
-      }
+      },
+      "confirmations": "确认次数",
+      "confirming-with-count": " 已确认 {{confirmations}} 次"
     },
     "transaction": {
       "goBack": "返回"

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

@@ -6,13 +6,21 @@ import transactions from './data/transactions'
 const stories = storiesOf('TransactionList', module)
 Object.entries(transactions).forEach(([title, list]) => {
   stories.add(title, () => (
-    <TransactionList isLoading={false} isUpdatingDescription={false} walletID="1" items={list} dispatch={() => {}} />
+    <TransactionList
+      isLoading={false}
+      tipBlockNumber="123"
+      isUpdatingDescription={false}
+      walletID="1"
+      items={list}
+      dispatch={() => {}}
+    />
   ))
 })
 
 stories.add('Wtih empty pending list', () => (
   <TransactionList
     isLoading={false}
+    tipBlockNumber="123"
     isUpdatingDescription={false}
     walletID="1"
     items={transactions['Content List'].filter(item => item.status !== 'pending')}
@@ -21,5 +29,14 @@ stories.add('Wtih empty pending list', () => (
 ))
 
 stories.add('Shimmered List', () => {
-  return <TransactionList isLoading={false} isUpdatingDescription={false} walletID="1" items={[]} dispatch={() => {}} />
+  return (
+    <TransactionList
+      isLoading={false}
+      tipBlockNumber="123"
+      isUpdatingDescription={false}
+      walletID="1"
+      items={[]}
+      dispatch={() => {}}
+    />
+  )
 })

packages/neuron-ui/src/stories/data/transactions.ts

@@ -25,6 +25,28 @@ const transactions: {
       blockNumber: '120',
       status: 'pending',
     },
+    {
+      type: 'send',
+      createdAt: (new Date(1565240655845).getTime() - 100000).toString(),
+      updatedAt: '',
+      timestamp: '',
+      value: '-10000',
+      hash: '0x70abeeaa2ed08b7d7659341a122b9a2f2ede99bb6bd0df7398d7ffe488beab11',
+      description: 'description of send transaction',
+      blockNumber: '120',
+      status: 'success',
+    },
+    {
+      type: 'receive',
+      createdAt: (new Date(1565240655845).getTime() - 200000).toString(),
+      updatedAt: '',
+      timestamp: '',
+      value: '10000',
+      hash: '0x70abeeaa2ed08b7d7659341a122b9a2f2ede99bb6bd0df7398d7ffe488beab22',
+      description: 'description of receive transaction',
+      blockNumber: '120',
+      status: 'success',
+    },
     {
       type: 'send',
       createdAt: '',