import useSWR from "swr"; import { type AccountHistoryAction, type StakeDetails, AccountHistoryItemType, StakeType, loadAccountHistory, } from "../../api"; import { useApiContext } from "../../use-api-context"; import { LoadingSpinner } from "../LoadingSpinner"; import { ModalButton } from "../ModalButton"; import { Tokens } from "../Tokens"; const ONE_SECOND_IN_MS = 1000; const ONE_MINUTE_IN_MS = 60 * ONE_SECOND_IN_MS; const REFRESH_INTERVAL = 1 * ONE_MINUTE_IN_MS; export const AccountHistoryButton = () => ( ); const ModalBody = () => { const history = useAccountHistoryData(); switch (history.type) { case DataStateType.NotLoaded: case DataStateType.Loading: { return ; } case DataStateType.Error: { return

Uh oh, an error occured!

; } case DataStateType.Loaded: { return ( {history.data.map( ( { accountTotal, action, amount, availableRewards, availableToWithdraw, locked, timestamp, }, i, ) => ( ), )}
Timestamp Description Amount Account Total Available Rewards Available to Withdraw Locked
{timestamp.toLocaleString()} {mkDescription(action)} {amount} {accountTotal} {availableRewards} {availableToWithdraw} {locked}
); } } }; const mkDescription = (action: AccountHistoryAction): string => { switch (action.type) { case AccountHistoryItemType.Claim: { return "Rewards claimed"; } case AccountHistoryItemType.Deposit: { return "Tokens deposited"; } case AccountHistoryItemType.LockedDeposit: { return `Locked tokens deposited, unlocking ${action.unlockDate.toLocaleString()}`; } case AccountHistoryItemType.RewardsCredited: { return "Rewards credited"; } case AccountHistoryItemType.Slash: { return `Staked tokens slashed from ${action.publisherName}`; } case AccountHistoryItemType.StakeCreated: { return `Created stake position for ${getStakeDetails(action.details)}`; } case AccountHistoryItemType.StakeFinishedWarmup: { return `Warmup complete for position for ${getStakeDetails(action.details)}`; } case AccountHistoryItemType.Unlock: { return "Locked tokens unlocked"; } case AccountHistoryItemType.UnstakeCreated: { return `Requested unstake for position for ${getStakeDetails(action.details)}`; } case AccountHistoryItemType.UnstakeExitedCooldown: { return `Cooldown completed for ${getStakeDetails(action.details)}`; } case AccountHistoryItemType.Withdrawal: { return "Tokens withdrawn to wallet"; } } }; const getStakeDetails = (details: StakeDetails): string => { switch (details.type) { case StakeType.Governance: { return "Governance Staking"; } case StakeType.IntegrityStaking: { return `Integrity Staking, publisher: ${details.publisherName}`; } } }; const useAccountHistoryData = () => { const apiContext = useApiContext(); const { data, isLoading, ...rest } = useSWR( `${apiContext.stakeAccount.publicKey}/history`, () => loadAccountHistory(apiContext), { refreshInterval: REFRESH_INTERVAL, }, ); const error = rest.error as unknown; if (error) { return DataState.ErrorState(error); } else if (isLoading) { return DataState.Loading(); } else if (data) { return DataState.Loaded(data); } else { return DataState.NotLoaded(); } }; enum DataStateType { NotLoaded, Loading, Loaded, Error, } const DataState = { NotLoaded: () => ({ type: DataStateType.NotLoaded as const }), Loading: () => ({ type: DataStateType.Loading as const }), Loaded: (data: Awaited>) => ({ type: DataStateType.Loaded as const, data, }), ErrorState: (error: unknown) => ({ type: DataStateType.Error as const, error, }), }; type DataState = ReturnType<(typeof DataState)[keyof typeof DataState]>;