1- import React , { useCallback , useMemo , useEffect } from 'react'
1+ import React , { useState , useCallback , useMemo , useEffect , useRef } from 'react'
22import { RouteComponentProps } from 'react-router-dom'
33import { useTranslation } from 'react-i18next'
44import {
55 Stack ,
66 Text ,
7+ DefaultButton ,
78 DetailsList ,
89 DetailsRow ,
910 IColumn ,
@@ -13,6 +14,7 @@ import {
1314 IDetailsRowProps ,
1415 IDetailsRowStyles ,
1516 FontSizes ,
17+ Callout ,
1618} from 'office-ui-fabric-react'
1719
1820import { StateWithDispatch } from 'states/stateProvider/reducer'
@@ -79,16 +81,18 @@ const PropertyList = ({
7981)
8082const Overview = ( {
8183 dispatch,
82- wallet : { id, balance = '' } ,
84+ app : { tipBlockNumber, chain, epoch, difficulty } ,
85+ wallet : { id, name, balance = '' } ,
8386 chain : {
84- networkID = '' ,
8587 transactions : { items = [ ] } ,
86- tipBlockNumber = '0' ,
8788 } ,
88- settings : { networks = [ ] } ,
8989} : React . PropsWithoutRef < StateWithDispatch & RouteComponentProps > ) => {
9090 const [ t ] = useTranslation ( )
91- const currentNetwork = useMemo ( ( ) => networks . find ( n => n . id === networkID ) , [ networkID , networks ] )
91+ const [ displayBlockchainInfo , setDisplayBlockchainInfo ] = useState ( false )
92+ const [ displayMinerInfo , setDisplayMinerInfo ] = useState ( false )
93+
94+ const blockchainInfoRef = useRef < HTMLDivElement > ( null )
95+ const minerInfoRef = useRef < HTMLDivElement > ( null )
9296
9397 useEffect ( ( ) => {
9498 dispatch ( actionCreators . getTransactions ( { pageNo : 1 , pageSize : PAGE_SIZE , keywords : '' , walletID : id } ) )
@@ -182,6 +186,31 @@ const Overview = ({
182186 key : 'label' ,
183187 name : 'label' ,
184188 fieldName : 'label' ,
189+ maxWidth : 100 ,
190+ } ,
191+ {
192+ key : 'value' ,
193+ name : 'value' ,
194+ fieldName : 'value' ,
195+ } ,
196+ ] . map ( col => ( {
197+ isResizable : true ,
198+ minWidth : 200 ,
199+ fieldName : col . key ,
200+ ariaLabel : col . name ,
201+ ...col ,
202+ } ) ) ,
203+ [ ]
204+ )
205+
206+ const blockchainStatusColumns : IColumn [ ] = useMemo (
207+ ( ) =>
208+ [
209+ {
210+ key : 'label' ,
211+ name : 'label' ,
212+ fieldName : 'label' ,
213+ maxWidth : 100 ,
185214 } ,
186215 {
187216 key : 'value' ,
@@ -201,70 +230,92 @@ const Overview = ({
201230 const balanceItems = useMemo (
202231 ( ) => [
203232 {
204- label : t ( 'overview.amount ' ) ,
233+ label : t ( 'overview.balance ' ) ,
205234 value : < span title = { `${ balance } shannon` } > { `${ shannonToCKBFormatter ( balance ) } CKB` } </ span > ,
206235 } ,
207- { label : t ( 'overview.live-cells' ) , value : 'mock living cells' } ,
208- { label : t ( 'overview.cell-types' ) , value : 'mock cell typ' } ,
209236 ] ,
210237 [ t , balance ]
211238 )
212-
213- const blockchainStatusColumns = balanceColumns
214-
215239 const blockchainStatusItems = useMemo (
216240 ( ) => [
217- { label : t ( 'overview.blockchain-identity' ) , value : 'mock chain id' } ,
218- { label : t ( 'overview.block-number' ) , value : localNumberFormatter ( tipBlockNumber ) } ,
219- { label : t ( 'overview.rpc-service' ) , value : currentNetwork ? currentNetwork . name : '' } ,
241+ {
242+ label : t ( 'overview.chain-identity' ) ,
243+ value : chain ,
244+ } ,
245+ {
246+ label : t ( 'overview.tip-block-number' ) ,
247+ value : localNumberFormatter ( tipBlockNumber ) ,
248+ } ,
249+ {
250+ label : t ( 'overview.epoch' ) ,
251+ value : epoch ,
252+ } ,
253+ {
254+ label : t ( 'overview.difficulty' ) ,
255+ value : difficulty ,
256+ } ,
220257 ] ,
221- [ t , currentNetwork , tipBlockNumber ]
258+ [ t , chain , epoch , difficulty , tipBlockNumber ]
222259 )
223260
261+ const showBlockchainStatus = useCallback ( ( ) => {
262+ setDisplayBlockchainInfo ( true )
263+ } , [ setDisplayBlockchainInfo ] )
264+ const hideBlockchainStatus = useCallback ( ( ) => {
265+ setDisplayBlockchainInfo ( false )
266+ } , [ setDisplayBlockchainInfo ] )
267+ const showMinerInfo = useCallback ( ( ) => {
268+ setDisplayMinerInfo ( true )
269+ } , [ setDisplayMinerInfo ] )
270+ const hideMinerInfo = useCallback ( ( ) => {
271+ setDisplayMinerInfo ( false )
272+ } , [ setDisplayMinerInfo ] )
273+
224274 return (
225- < Stack horizontal horizontalAlign = "space-evenly" verticalFill tokens = { { childrenGap : 15 } } wrap >
226- < Stack
227- tokens = { {
228- childrenGap : 15 ,
229- } }
230- styles = { {
231- root : {
232- minWidth : '680px' ,
233- } ,
234- } }
235- >
236- < Stack >
237- < Text as = "h1" variant = { TITLE_FONT_SIZE } >
238- { t ( 'overview.balance' ) }
239- </ Text >
240- < PropertyList columns = { balanceColumns } items = { balanceItems } isHeaderVisible = { false } />
275+ < Stack tokens = { { childrenGap : 15 } } verticalFill horizontalAlign = "stretch" >
276+ < Text as = "h1" variant = { TITLE_FONT_SIZE } >
277+ { name }
278+ </ Text >
279+ < Stack horizontal >
280+ < PropertyList columns = { balanceColumns } items = { balanceItems } isHeaderVisible = { false } />
281+ < Stack tokens = { { childrenGap : 15 } } >
282+ < div ref = { blockchainInfoRef } >
283+ < DefaultButton onClick = { showBlockchainStatus } styles = { { root : { width : '200px' } } } >
284+ Blockchain Status
285+ </ DefaultButton >
286+ </ div >
287+ < div ref = { minerInfoRef } >
288+ < DefaultButton onClick = { showMinerInfo } styles = { { root : { width : '200px' } } } >
289+ Miner Info
290+ </ DefaultButton >
291+ </ div >
241292 </ Stack >
242- < Stack . Item >
243- < Text as = "h1" variant = { TITLE_FONT_SIZE } >
244- { t ( 'overview.blockchain-status' ) }
245- </ Text >
246- { currentNetwork ? (
247- < PropertyList columns = { blockchainStatusColumns } items = { blockchainStatusItems } isHeaderVisible = { false } />
248- ) : null }
249- </ Stack . Item >
250- </ Stack >
251- < Stack
252- horizontalAlign = "stretch"
253- styles = { {
254- root : {
255- minWidth : '680px' ,
256- } ,
257- } }
258- >
259- < Text as = "h1" variant = { TITLE_FONT_SIZE } >
260- { t ( 'overview.recent-activities' ) }
261- </ Text >
262- { items . length ? (
263- < PropertyList columns = { activityColumns } items = { items } onRenderRow = { onTransactionRowRender } />
264- ) : (
265- < div > { t ( 'overview.no-recent-activities' ) } </ div >
266- ) }
267293 </ Stack >
294+ < Text as = "h2" variant = { TITLE_FONT_SIZE } >
295+ { t ( 'overview.recent-activities' ) }
296+ </ Text >
297+ { items . length ? (
298+ < PropertyList columns = { activityColumns } items = { items } onRenderRow = { onTransactionRowRender } />
299+ ) : (
300+ < div > { t ( 'overview.no-recent-activities' ) } </ div >
301+ ) }
302+ { blockchainInfoRef . current ? (
303+ < Callout
304+ target = { blockchainInfoRef . current }
305+ hidden = { ! displayBlockchainInfo }
306+ onDismiss = { hideBlockchainStatus }
307+ gapSpace = { 0 }
308+ >
309+ < Stack >
310+ < PropertyList columns = { blockchainStatusColumns } items = { blockchainStatusItems } isHeaderVisible = { false } />
311+ </ Stack >
312+ </ Callout >
313+ ) : null }
314+ { minerInfoRef . current ? (
315+ < Callout target = { minerInfoRef . current } hidden = { ! displayMinerInfo } onDismiss = { hideMinerInfo } gapSpace = { 0 } >
316+ Miner Info
317+ </ Callout >
318+ ) : null }
268319 </ Stack >
269320 )
270321}
0 commit comments