88 DefaultButton ,
99 DetailsList ,
1010 DetailsRow ,
11+ Icon ,
1112 IColumn ,
1213 CheckboxVisibility ,
1314 DetailsListLayoutMode ,
@@ -24,66 +25,94 @@ import PropertyList, { Property } from 'widgets/PropertyList'
2425import { StateWithDispatch } from 'states/stateProvider/reducer'
2526import { updateTransactionList , addPopup } from 'states/stateProvider/actionCreators'
2627
27- import { showErrorMessage } from 'services/remote'
28+ import { showTransactionDetails , showErrorMessage } from 'services/remote'
2829
2930import { localNumberFormatter , shannonToCKBFormatter , uniformTimeFormatter as timeFormatter } from 'utils/formatters'
30- import { PAGE_SIZE } from 'utils/const'
31+ import { PAGE_SIZE , Routes , CONFIRMATION_THRESHOLD } from 'utils/const'
3132
3233const TITLE_FONT_SIZE = 'xxLarge'
34+ export type ActivityItem = State . Transaction & { confirmations : string ; typeLabel : string }
35+
36+ const genTypeLabel = ( type : 'send' | 'receive' , confirmationCount : number ) => {
37+ switch ( type ) {
38+ case 'send' : {
39+ if ( confirmationCount < CONFIRMATION_THRESHOLD ) {
40+ return 'sending'
41+ }
42+ return 'sent'
43+ }
44+ case 'receive' : {
45+ if ( confirmationCount < CONFIRMATION_THRESHOLD ) {
46+ return 'receiving'
47+ }
48+ return 'received'
49+ }
50+ default : {
51+ return type
52+ }
53+ }
54+ }
3355
3456const ActivityList = ( {
3557 columns,
3658 items,
59+ onGoToHistory,
60+ t,
3761 ...props
3862} : React . PropsWithoutRef < {
3963 columns : IColumn [ ]
4064 items : any
65+ onGoToHistory : any
66+ t : any
4167 isHeaderVisible ?: boolean
4268 onRenderRow ?: IRenderFunction < IDetailsRowProps >
4369 [ index : string ] : any
4470} > ) => (
45- < DetailsList
46- layoutMode = { DetailsListLayoutMode . fixedColumns }
47- checkboxVisibility = { CheckboxVisibility . hidden }
48- compact
49- items = { items }
50- columns = { columns }
51- styles = { {
52- root : {
53- backgroundColor : 'transparent' ,
54- } ,
55- headerWrapper : {
56- selectors : {
57- '.ms-DetailsHeader' : {
58- backgroundColor : 'transparent' ,
59- } ,
60- '.ms-DetailsHeader-cellName' : {
61- fontSize : FontSizes . xLarge ,
62- } ,
71+ < Stack >
72+ < DetailsList
73+ isHeaderVisible = { false }
74+ layoutMode = { DetailsListLayoutMode . justified }
75+ checkboxVisibility = { CheckboxVisibility . hidden }
76+ compact
77+ items = { items . slice ( 0 , 10 ) }
78+ columns = { columns }
79+ onItemInvoked = { item => {
80+ showTransactionDetails ( item . hash )
81+ } }
82+ styles = { {
83+ root : {
84+ backgroundColor : 'transparent' ,
6385 } ,
64- } ,
65- contentWrapper : {
66- selectors : {
67- '.ms-DetailsRow' : {
68- backgroundColor : 'transparent' ,
69- } ,
70- '.ms-DetailsRow-cell' : {
71- fontSize : FontSizes . mediumPlus ,
86+ contentWrapper : {
87+ selectors : {
88+ '.ms-DetailsRow' : {
89+ backgroundColor : 'transparent' ,
90+ } ,
91+ '.ms-DetailsRow-cell' : {
92+ fontSize : FontSizes . mediumPlus ,
93+ } ,
7294 } ,
7395 } ,
74- } ,
75- } }
76- { ...props }
77- />
96+ } }
97+ { ...props }
98+ />
99+ { items . length > 10 ? (
100+ < ActionButton onClick = { onGoToHistory } styles = { { root : { border : 'none' } } } >
101+ { t ( 'overview.more' ) }
102+ </ ActionButton >
103+ ) : null }
104+ </ Stack >
78105)
79106const Overview = ( {
80107 dispatch,
81108 app : { tipBlockNumber, chain, epoch, difficulty } ,
82109 wallet : { id, name, balance = '' , addresses = [ ] } ,
83110 chain : {
111+ tipBlockNumber : syncedBlockNumber ,
84112 codeHash = '' ,
85113 transactions : { items = [ ] } ,
86114 } ,
115+ history,
87116} : React . PropsWithoutRef < StateWithDispatch & RouteComponentProps > ) => {
88117 const [ t ] = useTranslation ( )
89118 const [ displayBlockchainInfo , setDisplayBlockchainInfo ] = useState ( false )
@@ -100,6 +129,9 @@ const Overview = ({
100129 walletID : id ,
101130 } ) ( dispatch )
102131 } , [ id , dispatch ] )
132+ const onGoToHistory = useCallback ( ( ) => {
133+ history . push ( Routes . History )
134+ } , [ history ] )
103135
104136 const onTransactionRowRender = useCallback ( ( props ?: IDetailsRowProps ) => {
105137 if ( props ) {
@@ -108,29 +140,22 @@ const Overview = ({
108140 animationDuration : '0!important' ,
109141 } ,
110142 }
111- if ( props . item . status === 'failed' ) {
112- customStyles . root = {
113- animationDuration : '0!important' ,
114- color : 'red' ,
115- }
116- }
117143 return < DetailsRow { ...props } styles = { customStyles } />
118144 }
119145 return null
120146 } , [ ] )
121147
122- const onTransactionTypeRender = useCallback ( ( item ?: any ) => {
148+ const onTransactionActivityRender = useCallback ( ( item ?: ActivityItem ) => {
123149 if ( item ) {
124150 return (
125- < Text
126- variant = "mediumPlus"
127- as = "span"
128- style = { {
129- color : item . type === 'receive' ? '#28b463' : '#e66465' ,
130- } }
131- >
132- { item . type }
133- </ Text >
151+ < >
152+ < Text variant = "mediumPlus" as = "span" title = { `${ item . value } } >
153+ { `${ item . typeLabel } ${ shannonToCKBFormatter ( item . value ) } }
154+ </ Text >
155+ < Text variant = "mediumPlus" as = "span" title = { item . confirmations } styles = { { root : [ { paddingLeft : '5px' } ] } } >
156+ { item . confirmations }
157+ </ Text >
158+ </ >
134159 )
135160 }
136161 return null
@@ -149,6 +174,24 @@ const Overview = ({
149174
150175 const activityColumns : IColumn [ ] = useMemo ( ( ) => {
151176 return [
177+ {
178+ key : 'status' ,
179+ name : t ( 'overview.status' ) ,
180+ minWidth : 20 ,
181+ maxWidth : 20 ,
182+ onRender : ( item ?: State . Transaction ) => {
183+ if ( ! item ) {
184+ return null
185+ }
186+ let iconName = 'TransactionPending'
187+ if ( item . status === 'success' ) {
188+ iconName = 'TransactionSuccess'
189+ } else if ( item . status === 'failed' ) {
190+ iconName = 'TransactionFailure'
191+ }
192+ return < Icon iconName = { iconName } title = { item . status } />
193+ } ,
194+ } ,
152195 {
153196 key : 'timestamp' ,
154197 name : t ( 'overview.datetime' ) ,
@@ -157,30 +200,11 @@ const Overview = ({
157200 onRender : onTimestampRender ,
158201 } ,
159202 {
160- key : 'type' ,
161- name : t ( 'overview.type' ) ,
162- minWidth : 100 ,
163- maxWidth : 100 ,
164- onRender : onTransactionTypeRender ,
165- } ,
166- {
167- key : 'status' ,
168- name : t ( 'overview.status' ) ,
203+ key : 'activity' ,
204+ name : t ( 'overview.activity' ) ,
169205 minWidth : 100 ,
170- maxWidth : 100 ,
171- } ,
172- {
173- key : 'value' ,
174- name : t ( 'overview.amount' ) ,
175- title : 'value' ,
176- minWidth : 100 ,
177- maxWidth : 500 ,
178- onRender : ( item ?: State . Transaction ) => {
179- if ( item ) {
180- return < span title = { `${ item . value } } > { `${ shannonToCKBFormatter ( item . value ) } } </ span >
181- }
182- return '-'
183- } ,
206+ maxWidth : 600 ,
207+ onRender : onTransactionActivityRender ,
184208 } ,
185209 ] . map (
186210 ( col ) : IColumn => ( {
@@ -189,7 +213,7 @@ const Overview = ({
189213 ...col ,
190214 } )
191215 )
192- } , [ t , onTimestampRender , onTransactionTypeRender ] )
216+ } , [ t , onTimestampRender , onTransactionActivityRender ] )
193217
194218 const balanceProperties : Property [ ] = useMemo (
195219 ( ) => [
@@ -249,6 +273,28 @@ const Overview = ({
249273 }
250274 } , [ defaultAddress , t , hideMinerInfo , dispatch ] )
251275
276+ const activityItems = useMemo (
277+ ( ) =>
278+ items . map ( item => {
279+ let confirmations = '(-)'
280+ let typeLabel : string = item . type
281+ if ( item . blockNumber !== undefined ) {
282+ const confirmationCount = 1 + Math . max ( + syncedBlockNumber , + tipBlockNumber ) - + item . blockNumber
283+ typeLabel = genTypeLabel ( item . type , confirmationCount )
284+ confirmations =
285+ confirmationCount > 1
286+ ? `(${ t ( 'overview.confirmations' , { confirmationCount : localNumberFormatter ( confirmationCount ) } ) }
287+ : `(${ t ( 'overview.confirmation' , { confirmationCount : localNumberFormatter ( confirmationCount ) } ) }
288+ }
289+ return {
290+ ...item ,
291+ confirmations : item . status === 'success' ? confirmations : '' ,
292+ typeLabel : t ( `overview.${ typeLabel } ) ,
293+ }
294+ } ) ,
295+ [ items , t , syncedBlockNumber , tipBlockNumber ]
296+ )
297+
252298 return (
253299 < Stack tokens = { { childrenGap : 15 } } verticalFill horizontalAlign = "stretch" >
254300 < Text as = "h1" variant = { TITLE_FONT_SIZE } >
@@ -273,7 +319,13 @@ const Overview = ({
273319 { t ( 'overview.recent-activities' ) }
274320 </ Text >
275321 { items . length ? (
276- < ActivityList columns = { activityColumns } items = { items } onRenderRow = { onTransactionRowRender } />
322+ < ActivityList
323+ columns = { activityColumns }
324+ items = { activityItems }
325+ onRenderRow = { onTransactionRowRender }
326+ onGoToHistory = { onGoToHistory }
327+ t = { t }
328+ />
277329 ) : (
278330 < div > { t ( 'overview.no-recent-activities' ) } </ div >
279331 ) }
0 commit comments