11import React , { useState , useCallback , useMemo , useEffect , useRef } from 'react'
22import { RouteComponentProps } from 'react-router-dom'
33import { useTranslation } from 'react-i18next'
4+ import { Copy } from 'grommet-icons'
45import {
56 Stack ,
67 Text ,
8+ ActionButton ,
79 DefaultButton ,
810 DetailsList ,
911 DetailsRow ,
@@ -15,13 +17,24 @@ import {
1517 IDetailsRowStyles ,
1618 FontSizes ,
1719 Callout ,
20+ MessageBar ,
21+ MessageBarType ,
1822} from 'office-ui-fabric-react'
1923
2024import { StateWithDispatch } from 'states/stateProvider/reducer'
2125import actionCreators from 'states/stateProvider/actionCreators'
2226
27+ import { showErrorMessage } from 'services/remote'
28+
2329import { localNumberFormatter , shannonToCKBFormatter } from 'utils/formatters'
2430import { PAGE_SIZE , MIN_CELL_WIDTH } from 'utils/const'
31+ import { registerIcons } from 'utils/icons'
32+
33+ registerIcons ( {
34+ icons : {
35+ Copy : < Copy size = "small" /> ,
36+ } ,
37+ } )
2538
2639const timeFormatter = new Intl . DateTimeFormat ( undefined , {
2740 year : 'numeric' ,
@@ -82,8 +95,9 @@ const PropertyList = ({
8295const Overview = ( {
8396 dispatch,
8497 app : { tipBlockNumber, chain, epoch, difficulty } ,
85- wallet : { id, name, balance = '' } ,
98+ wallet : { id, name, balance = '' , addresses = [ ] } ,
8699 chain : {
100+ codeHash = '' ,
87101 transactions : { items = [ ] } ,
88102 } ,
89103} : React . PropsWithoutRef < StateWithDispatch & RouteComponentProps > ) => {
@@ -252,7 +266,7 @@ const Overview = ({
252266 } ,
253267 {
254268 label : t ( 'overview.difficulty' ) ,
255- value : difficulty ,
269+ value : localNumberFormatter ( + difficulty ) ,
256270 } ,
257271 ] ,
258272 [ t , chain , epoch , difficulty , tipBlockNumber ]
@@ -271,6 +285,20 @@ const Overview = ({
271285 setDisplayMinerInfo ( false )
272286 } , [ setDisplayMinerInfo ] )
273287
288+ const defaultAddress = useMemo ( ( ) => {
289+ return addresses . find ( addr => addr . type === 0 && addr . index === 0 )
290+ } , [ addresses ] )
291+
292+ const onCopyPubkeyHash = useCallback ( ( ) => {
293+ if ( defaultAddress ) {
294+ window . navigator . clipboard . writeText ( defaultAddress . identifier )
295+ hideMinerInfo ( )
296+ // TODO: Add notification
297+ } else {
298+ showErrorMessage ( t ( 'messages.error' ) , t ( 'messages.can-not-find-the-default-address' ) )
299+ }
300+ } , [ defaultAddress , t , hideMinerInfo ] )
301+
274302 return (
275303 < Stack tokens = { { childrenGap : 15 } } verticalFill horizontalAlign = "stretch" >
276304 < Text as = "h1" variant = { TITLE_FONT_SIZE } >
@@ -306,15 +334,46 @@ const Overview = ({
306334 onDismiss = { hideBlockchainStatus }
307335 gapSpace = { 0 }
308336 >
309- < Stack >
337+ < Stack tokens = { { padding : 15 } } >
310338 < PropertyList columns = { blockchainStatusColumns } items = { blockchainStatusItems } isHeaderVisible = { false } />
311339 </ Stack >
312340 </ Callout >
313341 ) : null }
314- { /* TODO: Implement this */ }
315342 { minerInfoRef . current ? (
316343 < Callout target = { minerInfoRef . current } hidden = { ! displayMinerInfo } onDismiss = { hideMinerInfo } gapSpace = { 0 } >
317- { t ( 'overview.miner-info' ) }
344+ < Stack tokens = { { padding : 15 } } >
345+ { defaultAddress ? (
346+ < Stack tokens = { { childrenGap : 15 } } >
347+ < Stack tokens = { { childrenGap : 15 } } >
348+ < Text variant = "medium" > { t ( 'overview.address' ) } </ Text >
349+ < Text variant = "small" className = "fixedWidth" >
350+ { defaultAddress . address }
351+ </ Text >
352+ </ Stack >
353+ < Stack tokens = { { childrenGap : 15 } } >
354+ < Text variant = "medium" > { t ( 'overview.code-hash' ) } </ Text >
355+ < Text variant = "small" className = "fixedWidth" >
356+ { codeHash }
357+ </ Text >
358+ </ Stack >
359+ < Stack tokens = { { childrenGap : 15 } } >
360+ < Text variant = "medium" > { t ( 'overview.lock-arg' ) } </ Text >
361+ < Text variant = "small" className = "fixedWidth" >
362+ { defaultAddress . identifier }
363+ </ Text >
364+ </ Stack >
365+ < Stack horizontalAlign = "end" >
366+ < ActionButton iconProps = { { iconName : 'Copy' } } onClick = { onCopyPubkeyHash } >
367+ { t ( 'overview.copy-pubkey-hash' ) }
368+ </ ActionButton >
369+ </ Stack >
370+ </ Stack >
371+ ) : (
372+ < MessageBar messageBarType = { MessageBarType . error } >
373+ { t ( 'messages.can-not-find-the-default-address' ) }
374+ </ MessageBar >
375+ ) }
376+ </ Stack >
318377 </ Callout >
319378 ) : null }
320379 </ Stack >
0 commit comments