feat(neuron-ui): display address field of input on the transaction de… (#987)

* feat(neuron-ui): display address field of input on the transaction detail view

* fix(neuron-ui): fix the typo of cellbase

Author: Keith-CY

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

@@ -13,6 +13,20 @@ import { explorerNavButton } from './style.module.scss'
 
 const MIN_CELL_WIDTH = 70
 
+const CompactAddress = ({ address }: { address: string }) => (
+  <div
+    title={address}
+    style={{
+      overflow: 'hidden',
+      display: 'flex',
+    }}
+    className="monospacedFont"
+  >
+    <span className="textOverflow">{address.slice(0, -6)}</span>
+    <span>{address.slice(-6)}</span>
+  </div>
+)
+
 const Transaction = () => {
   const [t] = useTranslation()
   const [transaction, setTransaction] = useState(transactionState)
@@ -27,25 +41,42 @@ const Transaction = () => {
           name: t('transaction.index'),
           minWidth: 60,
           maxWidth: 60,
-          onRender: (_item?: any, index?: number) => {
+          onRender: (_input?: State.DetailedInput, index?: number) => {
             if (undefined !== index) {
               return index
             }
             return null
           },
         },
         {
-          key: 'outPointCell',
-          name: 'OutPoint Cell',
-          minWidth: 150,
-          maxWidth: 600,
-          onRender: (item: any) => {
-            const text = item.previousOutput ? `${item.previousOutput.txHash}[${item.previousOutput.index}]` : 'none'
-            return (
-              <span title={text} className="textOverflow">
-                {text}
-              </span>
-            )
+          key: 'address',
+          name: t('transaction.address'),
+          minWidth: 200,
+          maxWidth: 500,
+          onRender: (input?: State.DetailedInput, _index?: number, column?: IColumn) => {
+            if (!input) {
+              return null
+            }
+            if (!input.lock) {
+              return t('transaction.cell-from-cellbase')
+            }
+            try {
+              const address = ckbCore.utils.bech32Address(input.lock.args, {
+                prefix: addressPrefix,
+                type: ckbCore.utils.AddressType.HashIdx,
+                codeHashIndex: '0x00',
+              })
+              if (column && (column.calculatedWidth || 0) < 450) {
+                return <CompactAddress address={address} />
+              }
+              return (
+                <span title={address} className="monospacedFont">
+                  {address}
+                </span>
+              )
+            } catch {
+              return null
+            }
           },
         },
         {
@@ -67,7 +98,7 @@ const Transaction = () => {
           ...col,
         })
       ),
-    [t]
+    [addressPrefix, t]
   )
 
   const outputColumns: IColumn[] = useMemo(
@@ -101,19 +132,7 @@ const Transaction = () => {
                 codeHashIndex: '0x00',
               })
               if (column && (column.calculatedWidth || 0) < 450) {
-                return (
-                  <div
-                    title={address}
-                    style={{
-                      overflow: 'hidden',
-                      display: 'flex',
-                    }}
-                    className="monospacedFont"
-                  >
-                    <span className="textOverflow">{address.slice(0, -6)}</span>
-                    <span>{address.slice(-6)}</span>
-                  </div>
-                )
+                return <CompactAddress address={address} />
               }
               return (
                 <span title={address} className="monospacedFont">

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

@@ -150,7 +150,8 @@
       "inputs": "Inputs",
       "outputs": "Outputs",
       "view-in-explorer": "Explorer",
-      "view-in-explorer-button-title": "View on explorer"
+      "view-in-explorer-button-title": "View on explorer",
+      "cell-from-cellbase": "From cellbase"
     },
     "addresses": {
       "addresses": "Addresses",

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

@@ -150,7 +150,8 @@
       "inputs": "输入",
       "outputs": "输出",
       "view-in-explorer": "浏览器",
-      "view-in-explorer-button-title": "浏览器中查看详情"
+      "view-in-explorer-button-title": "浏览器中查看详情",
+      "cell-from-cellbase": "来自 Cellbase"
     },
     "addresses": {
       "addresses": "地址",

packages/neuron-ui/src/types/App/index.d.ts

@@ -11,6 +11,19 @@ declare namespace State {
     status: 'pending' | 'success' | 'failed'
   }
 
+  interface DetailedInput {
+    capacity: string | null
+    lockHash: string | null
+    previousOutput: {
+      blockHash: string | null
+      cell: {
+        txHash: string
+        index: string
+      } | null
+    }
+    lock: CKBComponents.Script | null
+  }
+
   interface DetailedOutput {
     capacity: string
     lock: {
@@ -27,17 +40,7 @@ declare namespace State {
     blockHash: string
     blockNumber: string
     deps: any[]
-    inputs: {
-      capacity: string | null
-      lockHash: string | null
-      previousOutput: {
-        blockHash: string | null
-        cell: {
-          txHash: string
-          index: string
-        } | null
-      }
-    }[]
+    inputs: DetailedInput[]
     inputsCount: string
     outputs: DetailedOutput[]
     outputsCount: string

packages/neuron-ui/src/utils/formatters.ts

@@ -102,6 +102,9 @@ export const shannonToCKBFormatter = (shannon: string = '0', showPositiveSign?:
     console.warn(`Shannon is not a valid number`)
     return shannon
   }
+  if (shannon === null) {
+    return '0'
+  }
   let sign = ''
   if (shannon.startsWith('-')) {
     sign = '-'