From 31ba91950aad808df50857664f25f6ca01a67a1d Mon Sep 17 00:00:00 2001
From: Keith <keithwhisper@gmail.com>
Date: Tue, 15 Oct 2019 14:36:57 +0800
Subject: [PATCH 1/2] feat(neuron-ui): display address field of input on the
 transaction detail view

---
 .../src/components/Transaction/index.tsx      | 71 ++++++++++++-------
 packages/neuron-ui/src/locales/en.json        |  3 +-
 packages/neuron-ui/src/locales/zh.json        |  3 +-
 packages/neuron-ui/src/types/App/index.d.ts   | 25 ++++---
 packages/neuron-ui/src/utils/formatters.ts    |  3 +
 5 files changed, 66 insertions(+), 39 deletions(-)

diff --git a/packages/neuron-ui/src/components/Transaction/index.tsx b/packages/neuron-ui/src/components/Transaction/index.tsx
index f7fa80f1e7..1b93e22285 100644
--- a/packages/neuron-ui/src/components/Transaction/index.tsx
+++ b/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,7 +41,7 @@ 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
             }
@@ -35,17 +49,34 @@ const Transaction = () => {
           },
         },
         {
-          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-coinbase')
+            }
+            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">
diff --git a/packages/neuron-ui/src/locales/en.json b/packages/neuron-ui/src/locales/en.json
index 27d4f4b88c..e91371030d 100644
--- a/packages/neuron-ui/src/locales/en.json
+++ b/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-coinbase": "From coinbase"
     },
     "addresses": {
       "addresses": "Addresses",
diff --git a/packages/neuron-ui/src/locales/zh.json b/packages/neuron-ui/src/locales/zh.json
index 9e018928df..3e131152c7 100644
--- a/packages/neuron-ui/src/locales/zh.json
+++ b/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-coinbase": "来自 Coinbase"
     },
     "addresses": {
       "addresses": "地址",
diff --git a/packages/neuron-ui/src/types/App/index.d.ts b/packages/neuron-ui/src/types/App/index.d.ts
index 4899aa4a23..ac4fd95909 100644
--- a/packages/neuron-ui/src/types/App/index.d.ts
+++ b/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
diff --git a/packages/neuron-ui/src/utils/formatters.ts b/packages/neuron-ui/src/utils/formatters.ts
index ced652e53e..5b11497609 100644
--- a/packages/neuron-ui/src/utils/formatters.ts
+++ b/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 = '-'

From 27df45391736ff96612ab85f898784dce7da34e3 Mon Sep 17 00:00:00 2001
From: Keith <keithwhisper@gmail.com>
Date: Wed, 16 Oct 2019 10:31:39 +0800
Subject: [PATCH 2/2] fix(neuron-ui): fix the typo of cellbase

---
 packages/neuron-ui/src/components/Transaction/index.tsx | 2 +-
 packages/neuron-ui/src/locales/en.json                  | 2 +-
 packages/neuron-ui/src/locales/zh.json                  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/neuron-ui/src/components/Transaction/index.tsx b/packages/neuron-ui/src/components/Transaction/index.tsx
index 1b93e22285..3f038331fd 100644
--- a/packages/neuron-ui/src/components/Transaction/index.tsx
+++ b/packages/neuron-ui/src/components/Transaction/index.tsx
@@ -58,7 +58,7 @@ const Transaction = () => {
               return null
             }
             if (!input.lock) {
-              return t('transaction.cell-from-coinbase')
+              return t('transaction.cell-from-cellbase')
             }
             try {
               const address = ckbCore.utils.bech32Address(input.lock.args, {
diff --git a/packages/neuron-ui/src/locales/en.json b/packages/neuron-ui/src/locales/en.json
index e91371030d..271c939a72 100644
--- a/packages/neuron-ui/src/locales/en.json
+++ b/packages/neuron-ui/src/locales/en.json
@@ -151,7 +151,7 @@
       "outputs": "Outputs",
       "view-in-explorer": "Explorer",
       "view-in-explorer-button-title": "View on explorer",
-      "cell-from-coinbase": "From coinbase"
+      "cell-from-cellbase": "From cellbase"
     },
     "addresses": {
       "addresses": "Addresses",
diff --git a/packages/neuron-ui/src/locales/zh.json b/packages/neuron-ui/src/locales/zh.json
index 3e131152c7..eb4574678e 100644
--- a/packages/neuron-ui/src/locales/zh.json
+++ b/packages/neuron-ui/src/locales/zh.json
@@ -151,7 +151,7 @@
       "outputs": "输出",
       "view-in-explorer": "浏览器",
       "view-in-explorer-button-title": "浏览器中查看详情",
-      "cell-from-coinbase": "来自 Coinbase"
+      "cell-from-cellbase": "来自 Cellbase"
     },
     "addresses": {
       "addresses": "地址",