11import React , { useEffect , useState , useMemo } from 'react'
22import { useTranslation } from 'react-i18next'
3- import { Stack , DetailsList , Text , DetailsListLayoutMode , CheckboxVisibility , IColumn } from 'office-ui-fabric-react'
3+ import { Stack , DetailsList , Text , CheckboxVisibility , IColumn } from 'office-ui-fabric-react'
44import { currentWallet as currentWalletCache } from 'utils/localCache'
55import { getTransaction } from 'services/remote'
66
77import { transactionState } from 'states/initStates/chain'
88
9- import { localNumberFormatter , uniformTimeFormatter } from 'utils/formatters'
9+ import { localNumberFormatter , uniformTimeFormatter , shannonToCKBFormatter } from 'utils/formatters'
1010
1111const MIN_CELL_WIDTH = 70
1212
1313const inputColumns : IColumn [ ] = [
1414 {
1515 key : 'lockHash' ,
1616 name : 'Lock Hash' ,
17- maxWidth : 300 ,
17+ minWidth : 100 ,
18+ maxWidth : 525 ,
1819 } ,
1920 {
2021 key : 'outPointBlockHash' ,
2122 name : 'OutPoint BlockHash' ,
22- maxWidth : 300 ,
23+ minWidth : 150 ,
2324 onRender : ( item : any ) => < span > { item . previousOutput . blockHash || 'none' } </ span > ,
2425 } ,
2526 {
2627 key : 'outPointCell' ,
2728 name : 'OutPoint Cell' ,
29+ minWidth : 150 ,
2830 onRender : ( item : any ) => (
2931 < span >
3032 { item . previousOutput . cell ? `${ item . previousOutput . cell . txHash } [${ item . previousOutput . cell . index } ]` : 'none' }
@@ -34,12 +36,11 @@ const inputColumns: IColumn[] = [
3436 {
3537 key : 'capacity' ,
3638 name : 'Capacity' ,
39+ minWidth : 300 ,
40+ maxWidth : 500 ,
3741 } ,
3842] . map (
3943 ( col ) : IColumn => ( {
40- minWidth : MIN_CELL_WIDTH ,
41- isResizable : true ,
42- isCollapsable : false ,
4344 ariaLabel : col . name ,
4445 fieldName : col . key ,
4546 ...col ,
@@ -55,17 +56,15 @@ const outputColumns: IColumn[] = [
5556 {
5657 key : 'lockHash' ,
5758 name : 'Lock Hash' ,
58- minWidth : 70 ,
59- maxWidth : 300 ,
59+ minWidth : 150 ,
6060 } ,
6161 {
6262 key : 'capacity' ,
6363 name : 'Capacity' ,
64- minWidth : 150 ,
64+ minWidth : 300 ,
65+ maxWidth : 500 ,
6566 } ,
6667] . map ( col => ( {
67- isResizable : true ,
68- isCollapsable : false ,
6968 ariaLabel : col . name ,
7069 fieldName : col . key ,
7170 ...col ,
@@ -85,8 +84,6 @@ const basicInfoColumns: IColumn[] = [
8584 } ,
8685] . map (
8786 ( col ) : IColumn => ( {
88- isResizable : true ,
89- isCollapsable : false ,
9087 minWidth : MIN_CELL_WIDTH ,
9188 ariaLabel : col . name ,
9289 fieldName : col . key ,
@@ -141,7 +138,7 @@ const Transaction = () => {
141138 } ,
142139 {
143140 label : t ( 'history.amount' ) ,
144- value : transaction . value ,
141+ value : ` ${ shannonToCKBFormatter ( transaction . value ) } CKB` ,
145142 } ,
146143 ] ,
147144 [ t , transaction ]
@@ -164,7 +161,6 @@ const Transaction = () => {
164161 < DetailsList
165162 columns = { basicInfoColumns }
166163 items = { basicInfoItems }
167- layoutMode = { DetailsListLayoutMode . justified }
168164 checkboxVisibility = { CheckboxVisibility . hidden }
169165 compact
170166 isHeaderVisible = { false }
@@ -177,7 +173,6 @@ const Transaction = () => {
177173 </ Text >
178174 < DetailsList
179175 items = { transaction . inputs }
180- layoutMode = { DetailsListLayoutMode . justified }
181176 columns = { inputColumns }
182177 checkboxVisibility = { CheckboxVisibility . hidden }
183178 compact
@@ -189,8 +184,11 @@ const Transaction = () => {
189184 Outputs
190185 </ Text >
191186 < DetailsList
192- items = { transaction . outputs . map ( ( output , index ) => ( { ...output , index } ) ) }
193- layoutMode = { DetailsListLayoutMode . justified }
187+ items = { transaction . outputs . map ( ( output , index ) => ( {
188+ ...output ,
189+ index,
190+ capacity : `${ shannonToCKBFormatter ( output . capacity ) } CKB` ,
191+ } ) ) }
194192 columns = { outputColumns }
195193 checkboxVisibility = { CheckboxVisibility . hidden }
196194 compact
0 commit comments