Yana/pending staking events #5400
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
| import { AccountBalancesCard } from "../../../../components/accountPageComponents/AccountBalancesCard"; | ||
| import { AccountInfoCard } from "../../../../components/accountPageComponents/AccountInfoCard"; | ||
| import { ContentLayout } from "../../../../components/contentLayout/ContentLayout"; | ||
| import SectionHeading from "../../../../components/headings/SectionHeading"; | ||
| import ExplorerButtonGroup from "../../../../components/toggleButton/ToggleButton"; | ||
|
|
There was a problem hiding this comment.
can you use the @ import alias for imports. It's a bit neater.
There was a problem hiding this comment.
for some reason I've started having import red errors with "@/...", have refactored to this to get rid of the errors
| const [hasEpochStarted, setHasEpochStarted] = useState(false); | ||
| const [loading, setLoading] = useState<string | null>(null); | ||
|
|
||
| const { data } = useQuery({ | ||
| enabled: true, | ||
| queryKey: ["currentEpoch"], | ||
| queryFn: fetchCurrentEpoch, | ||
| refetchInterval: 30000, | ||
| staleTime: 30000, | ||
| refetchOnMount: true, | ||
| keepPreviousData: false, | ||
| }); | ||
|
|
||
| const queryClient = useQueryClient(); | ||
| // check epoch update | ||
| useEffect(() => { | ||
| const checkEpochStatus = () => { | ||
| if (!data?.dateTime) return; | ||
| const oneHourLater = subSeconds(new Date(data.dateTime), 30).getTime(); | ||
| const now = Date.now(); | ||
| setHasEpochStarted(now >= oneHourLater); | ||
| }; | ||
|
|
||
| checkEpochStatus(); | ||
| const interval = setInterval(checkEpochStatus, 60000); | ||
| return () => clearInterval(interval); | ||
| }); | ||
|
|
||
| const handleRefetch = useCallback(() => { | ||
| queryClient.invalidateQueries(); | ||
| }, [queryClient]); | ||
|
|
||
| useEffect(() => { | ||
| if (!hasEpochStarted) return; | ||
| handleRefetch(); | ||
| const interval = setInterval(handleRefetch, 30000); | ||
| return () => clearInterval(interval); | ||
| }, [hasEpochStarted, handleRefetch]); |
There was a problem hiding this comment.
this logic cant live in this component. what if want to use the component somewhere else in the app and have it do something different? It should have an onToggle prop or the logic should live on the page it needs to work on
There was a problem hiding this comment.
ok, will find a better component to hang the epoch listening functionality on it
| const checkEpochStatus = () => { | ||
| if (!data?.dateTime) return; | ||
| const oneHourLater = subSeconds(new Date(data.dateTime), 30).getTime(); | ||
| const now = Date.now(); | ||
| setHasEpochStarted(now >= oneHourLater); | ||
| }; | ||
|
|
||
| checkEpochStatus(); | ||
| const interval = setInterval(checkEpochStatus, 60000); | ||
| return () => clearInterval(interval); | ||
| }); |
There was a problem hiding this comment.
can you explain this as I'm not fully clear on what is going on or why we need this?
There was a problem hiding this comment.
when the epoch time changes, there's a delay of the new data being returned from the fetch request, because there is a cache on the contract data. So, even if it's past the current epoch time, the fetch requests still return the last epoch time, resulting into bad UX. For example, it looks buggy if it's written next epoch starts at 18:26pm and it's already 18:29pm. I've tested and had up to 5min delay... It's always different, but always a delay.
Therefore, I was advised to show "Waiting for the next epoch to start.." until we get new data back.
Also, if the new epoch has started, I'm resetting all the queries and fetching new data across the app. Lot's of queries get updated even if the contract epoch hasn't returned new epoch time yet, because not all endpoints are updated simultaneously with the epoch change. Some update sooner, some later.
There was a problem hiding this comment.
why don't we check the current time against most recently fetched epoch time, if the currenttime > epochtime show "getting new epoch time" (or something like that). If we check the epoch every 30 or 60 secs eventually it's going to show correctly?
The frontend shouldnt resolving issues in epoch timing. If there's an issue with caching on the BE it should be fixed there.
| }; | ||
|
|
||
| checkEpochStatus(); | ||
| const interval = setInterval(checkEpochStatus, 60000); |
There was a problem hiding this comment.
if this block of logic is used in other parts of the app the it would be worth making a custom hook. But before that let's figure our what it's doing and why it's needed.
|
|
||
| useEffect(() => { | ||
| const refreshQueries = async () => { | ||
| await QueryClient.invalidateQueries({ |
There was a problem hiding this comment.
@fmtabbara this fixes the infinite loop :)
This change is