1- import useSWR from "swr " ;
1+ import { ArrowPathIcon } from "@heroicons/react/24/outline " ;
22
33import {
44 type AccountHistoryAction ,
55 type StakeDetails ,
66 AccountHistoryItemType ,
77 StakeType ,
8- loadAccountHistory ,
98} from "../../api" ;
10- import { useApiContext } from "../../hooks/use-api-context" ;
11- import { LoadingSpinner } from "../LoadingSpinner" ;
9+ import { StateType , useAccountHistory } from "../../hooks/use-account-history" ;
1210import { Tokens } from "../Tokens" ;
1311
14- const ONE_SECOND_IN_MS = 1000 ;
15- const ONE_MINUTE_IN_MS = 60 * ONE_SECOND_IN_MS ;
16- const REFRESH_INTERVAL = 1 * ONE_MINUTE_IN_MS ;
17-
1812export const AccountHistory = ( ) => {
19- const history = useAccountHistoryData ( ) ;
13+ const history = useAccountHistory ( ) ;
2014
2115 switch ( history . type ) {
22- case DataStateType . NotLoaded :
23- case DataStateType . Loading : {
24- return < LoadingSpinner /> ;
16+ case StateType . NotLoaded :
17+ case StateType . Loading : {
18+ return < ArrowPathIcon className = "size-6 animate-spin" /> ;
2519 }
26- case DataStateType . Error : {
20+ case StateType . Error : {
2721 return < p > Uh oh, an error occured!</ p > ;
2822 }
29- case DataStateType . Loaded : {
23+ case StateType . Loaded : {
3024 return (
3125 < table className = "text-sm" >
3226 < thead className = "font-medium" >
@@ -56,7 +50,9 @@ export const AccountHistory = () => {
5650 ) => (
5751 < tr key = { i } >
5852 < td className = "pr-4" > { timestamp . toLocaleString ( ) } </ td >
59- < td className = "pr-4" > { mkDescription ( action ) } </ td >
53+ < td className = "pr-4" >
54+ < Description > { action } </ Description >
55+ </ td >
6056 < td className = "pr-4" >
6157 < Tokens > { amount } </ Tokens >
6258 </ td >
@@ -82,37 +78,37 @@ export const AccountHistory = () => {
8278 }
8379} ;
8480
85- const mkDescription = ( action : AccountHistoryAction ) : string => {
86- switch ( action . type ) {
81+ const Description = ( { children } : { children : AccountHistoryAction } ) => {
82+ switch ( children . type ) {
8783 case AccountHistoryItemType . Claim : {
8884 return "Rewards claimed" ;
8985 }
90- case AccountHistoryItemType . Deposit : {
91- return "Tokens deposited " ;
86+ case AccountHistoryItemType . AddTokens : {
87+ return "Tokens added " ;
9288 }
9389 case AccountHistoryItemType . LockedDeposit : {
94- return `Locked tokens deposited, unlocking ${ action . unlockDate . toLocaleString ( ) } ;
90+ return `Locked tokens deposited, unlocking ${ children . unlockDate . toLocaleString ( ) } ;
9591 }
9692 case AccountHistoryItemType . RewardsCredited : {
9793 return "Rewards credited" ;
9894 }
9995 case AccountHistoryItemType . Slash : {
100- return `Staked tokens slashed from ${ action . publisherName } ;
96+ return `Staked tokens slashed from ${ children . publisherName } ;
10197 }
10298 case AccountHistoryItemType . StakeCreated : {
103- return `Created stake position for ${ getStakeDetails ( action . details ) } ;
99+ return `Created stake position for ${ getStakeDetails ( children . details ) } ;
104100 }
105101 case AccountHistoryItemType . StakeFinishedWarmup : {
106- return `Warmup complete for position for ${ getStakeDetails ( action . details ) } ;
102+ return `Warmup complete for position for ${ getStakeDetails ( children . details ) } ;
107103 }
108104 case AccountHistoryItemType . Unlock : {
109105 return "Locked tokens unlocked" ;
110106 }
111107 case AccountHistoryItemType . UnstakeCreated : {
112- return `Requested unstake for position for ${ getStakeDetails ( action . details ) } ;
108+ return `Requested unstake for position for ${ getStakeDetails ( children . details ) } ;
113109 }
114110 case AccountHistoryItemType . UnstakeExitedCooldown : {
115- return `Cooldown completed for ${ getStakeDetails ( action . details ) } ;
111+ return `Cooldown completed for ${ getStakeDetails ( children . details ) } ;
116112 }
117113 case AccountHistoryItemType . Withdrawal : {
118114 return "Tokens withdrawn to wallet" ;
@@ -130,46 +126,3 @@ const getStakeDetails = (details: StakeDetails): string => {
130126 }
131127 }
132128} ;
133-
134- const useAccountHistoryData = ( ) => {
135- const apiContext = useApiContext ( ) ;
136-
137- const { data, isLoading, ...rest } = useSWR (
138- `${ apiContext . stakeAccount . address . toBase58 ( ) } ,
139- ( ) => loadAccountHistory ( apiContext ) ,
140- {
141- refreshInterval : REFRESH_INTERVAL ,
142- } ,
143- ) ;
144- const error = rest . error as unknown ;
145-
146- if ( error ) {
147- return DataState . ErrorState ( error ) ;
148- } else if ( isLoading ) {
149- return DataState . Loading ( ) ;
150- } else if ( data ) {
151- return DataState . Loaded ( data ) ;
152- } else {
153- return DataState . NotLoaded ( ) ;
154- }
155- } ;
156-
157- enum DataStateType {
158- NotLoaded ,
159- Loading ,
160- Loaded ,
161- Error ,
162- }
163- const DataState = {
164- NotLoaded : ( ) => ( { type : DataStateType . NotLoaded as const } ) ,
165- Loading : ( ) => ( { type : DataStateType . Loading as const } ) ,
166- Loaded : ( data : Awaited < ReturnType < typeof loadAccountHistory > > ) => ( {
167- type : DataStateType . Loaded as const ,
168- data,
169- } ) ,
170- ErrorState : ( error : unknown ) => ( {
171- type : DataStateType . Error as const ,
172- error,
173- } ) ,
174- } ;
175- type DataState = ReturnType < ( typeof DataState ) [ keyof typeof DataState ] > ;
0 commit comments