99 NumberUtils ,
1010 SharesAmount ,
1111 StringUtils ,
12- SuccessIcon ,
1312 Table ,
1413 ToggleButton ,
1514 Tooltip ,
@@ -24,37 +23,16 @@ import { endOfDay } from 'date-fns/endOfDay'
2423import { useAppState } from '../../hooks/useAppState'
2524import { useAccount } from 'wagmi'
2625
27- type DebondingItemStatus = 'ready' | 'waiting' | null
28-
2926type DebondingItem = Undelegation & {
30- status : DebondingItemStatus
3127 debondTimeEstimate : Date | null
3228}
3329
3430interface Props {
3531 undelegations : Undelegations
3632}
3733
38- const getDebondingItemStatus = (
39- epoch : DebondingItem [ 'epoch' ] ,
40- latestEpoch ?: number | bigint
41- ) : DebondingItemStatus => {
42- if ( ! latestEpoch ) {
43- return null
44- }
45-
46- if ( epoch <= latestEpoch ) {
47- return 'ready'
48- }
49-
50- return 'waiting'
51- }
52-
5334const DebondingTabCmp : FC < Props > = ( { undelegations } ) => {
54- const {
55- state : { consensusStatus } ,
56- getTimeEstimateForFutureEpoch,
57- } = useGrpc ( )
35+ const { getTimeEstimateForFutureEpoch } = useGrpc ( )
5836 const { chain } = useAccount ( )
5937 const nativeCurrency = chain ?. nativeCurrency
6038 const {
@@ -74,7 +52,6 @@ const DebondingTabCmp: FC<Props> = ({ undelegations }) => {
7452 from,
7553 shares,
7654 epoch,
77- status : getDebondingItemStatus ( epoch , consensusStatus ?. latest_epoch ) ,
7855 debondTimeEstimate : debondTimeEstimates [ i ] ,
7956 } satisfies DebondingItem
8057 } )
@@ -84,7 +61,7 @@ const DebondingTabCmp: FC<Props> = ({ undelegations }) => {
8461 init ( )
8562
8663 // eslint-disable-next-line react-hooks/exhaustive-deps
87- } , [ undelegations , consensusStatus ?. latest_epoch ] )
64+ } , [ undelegations ] )
8865
8966 if ( debondingItems === null ) return null
9067
@@ -127,25 +104,20 @@ const DebondingTabCmp: FC<Props> = ({ undelegations }) => {
127104 </ td >
128105 < td >
129106 { ! isExpanded && (
130- < >
131- { entry . status === 'waiting' && (
132- < div className = { classes . rowStatusWaiting } >
133- { entry . debondTimeEstimate && (
134- < Tooltip >
135- < TooltipTrigger >
136- < HourglassIcon />
137- </ TooltipTrigger >
138- < TooltipContent >
139- Expected to be available on
140- < br />
141- { DateUtils . intlDateFormat ( entry . debondTimeEstimate , { format : 'short' } ) }
142- </ TooltipContent >
143- </ Tooltip >
144- ) }
145- </ div >
107+ < div className = { classes . rowStatusWaiting } >
108+ { entry . debondTimeEstimate && (
109+ < Tooltip >
110+ < TooltipTrigger >
111+ < HourglassIcon />
112+ </ TooltipTrigger >
113+ < TooltipContent >
114+ Expected to be available on
115+ < br />
116+ { DateUtils . intlDateFormat ( entry . debondTimeEstimate , { format : 'short' } ) }
117+ </ TooltipContent >
118+ </ Tooltip >
146119 ) }
147- { entry . status === 'ready' && < SuccessIcon label = "Available to claim" /> }
148- </ >
120+ </ div >
149121 ) }
150122 </ td >
151123 < td >
@@ -158,77 +130,57 @@ const DebondingTabCmp: FC<Props> = ({ undelegations }) => {
158130 { isExpanded && (
159131 < tr className = { classes . expandedRow } >
160132 < td colSpan = { 4 } >
161- { entry . status === 'waiting' && (
162- < div className = { classes . debondingRowExpanded } >
163- < p className = "body" >
164- < span > Expected amount:</ span >
165- < SharesAmount
166- className = { classes . debondingRowExpandedAmount }
167- shares = { entry . shares }
168- validator = { validator }
169- type = "unstaking"
170- />
171- </ p >
172- </ div >
173- ) }
133+ < div className = { classes . debondingRowExpanded } >
134+ < p className = "body" >
135+ < span > Expected amount:</ span >
136+ < SharesAmount
137+ className = { classes . debondingRowExpandedAmount }
138+ shares = { entry . shares }
139+ validator = { validator }
140+ type = "unstaking"
141+ />
142+ </ p >
143+ </ div >
174144 < div className = { classes . debondingRowActions } >
175- { entry . status === 'ready' && (
176- < div className = { classes . debondingReady } >
177- < div className = { StringUtils . clsx ( classes . infoBox , classes . infoBoxSuccess ) } >
178- < p className = "body" >
179- Your{ ' ' }
180- < SharesAmount
181- shares = { entry . shares }
182- validator = { validator }
183- type = "unstaking"
184- /> { ' ' }
185- is available.
145+ < div className = { classes . infoBox } >
146+ { entry . debondTimeEstimate && (
147+ < >
148+ < HourglassIcon />
149+ < p >
150+ Estimated to be available on { isMobileScreen && < br /> }
151+ { DateUtils . intlDateFormat ( entry . debondTimeEstimate , { format : 'short' } ) }
186152 </ p >
187- </ div >
188- </ div >
189- ) }
190- { entry . status === 'waiting' && (
191- < div className = { classes . infoBox } >
192- { entry . debondTimeEstimate && (
193- < >
194- < HourglassIcon />
195- < p >
196- Estimated to be available on { isMobileScreen && < br /> }
197- { DateUtils . intlDateFormat ( entry . debondTimeEstimate , { format : 'short' } ) }
198- </ p >
199- </ >
200- ) }
201-
202- < SharesAmount shares = { entry . shares } validator = { validator } type = "unstaking" >
203- { amount => {
204- if ( amount === null ) return null
205- if ( entry . debondTimeEstimate === null ) return null
206-
207- const formattedAmount = `${ NumberUtils . formatAmount ( amount . toFixed ( 0 ) , 18 ) } ${ nativeCurrency ?. symbol } `
208- const validatorFriendlyName =
209- StringUtils . getValidatorFriendlyName ( validator )
210-
211- return (
212- < a
213- href = { CalendarUtils . addGoogleCalendarEventLink (
214- `Unstaking of ${ formattedAmount } from ${ validatorFriendlyName } completed` ,
215- startOfDay ( entry . debondTimeEstimate ) ,
216- endOfDay ( entry . debondTimeEstimate ) ,
217- window . location . href ,
218- `Your stake in amount of ${ formattedAmount } will be automatically withdrawn from validator ${ validatorFriendlyName } today.`
219- ) }
220- target = "_blank"
221- rel = "nofollow"
222- >
223- < Button size = "small" variant = "text" className = { classes . scheduleBtn } >
224- Remind me
225- </ Button >
226- </ a >
227- )
228- } }
229- </ SharesAmount >
230- </ div >
231- ) }
153+ </ >
154+ ) }
155+
156+ < SharesAmount shares = { entry . shares } validator = { validator } type = "unstaking" >
157+ { amount => {
158+ if ( amount === null ) return null
159+ if ( entry . debondTimeEstimate === null ) return null
160+
161+ const formattedAmount = `${ NumberUtils . formatAmount ( amount . toFixed ( 0 ) , 18 ) } ${ nativeCurrency ?. symbol } `
162+ const validatorFriendlyName = StringUtils . getValidatorFriendlyName ( validator )
163+
164+ return (
165+ < a
166+ href = { CalendarUtils . addGoogleCalendarEventLink (
167+ `Unstaking of ${ formattedAmount } from ${ validatorFriendlyName } completed` ,
168+ startOfDay ( entry . debondTimeEstimate ) ,
169+ endOfDay ( entry . debondTimeEstimate ) ,
170+ window . location . href ,
171+ `Your stake in amount of ${ formattedAmount } will be automatically withdrawn from validator ${ validatorFriendlyName } today.`
172+ ) }
173+ target = "_blank"
174+ rel = "nofollow"
175+ >
176+ < Button size = "small" variant = "text" className = { classes . scheduleBtn } >
177+ Remind me
178+ </ Button >
179+ </ a >
180+ )
181+ } }
182+ </ SharesAmount >
183+ </ div >
232184 </ div >
233185 </ td >
234186 </ tr >
0 commit comments