-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Provide the user with the time information regarding when the c…
…urrent epoch ends and how long until an eviction expires. (#380) * feat: eviction time text * feat: add logic * feat: add epoch end time * feat: move to separate component * feat: personal review * feat: minor renmae * refactor: Remove unused import and useMemo in StakingRewardsThisEpoch.tsx
- Loading branch information
1 parent
1433fc0
commit aca3ee9
Showing
11 changed files
with
163 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
78 changes: 78 additions & 0 deletions
78
frontend/components/MainPage/sections/RewardsSection/StakingRewardsThisEpoch.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
import { InfoCircleOutlined } from '@ant-design/icons'; | ||
import { useQuery } from '@tanstack/react-query'; | ||
import { Popover, Typography } from 'antd'; | ||
import { gql, request } from 'graphql-request'; | ||
import { z } from 'zod'; | ||
|
||
import { SUBGRAPH_URL } from '@/constants/urls'; | ||
import { useStakingProgram } from '@/hooks/useStakingProgram'; | ||
import { formatToTime } from '@/utils/time'; | ||
|
||
const { Text } = Typography; | ||
|
||
const EpochTimeResponseSchema = z.object({ | ||
epochLength: z.string(), | ||
blockTimestamp: z.string(), | ||
}); | ||
type EpochTimeResponse = z.infer<typeof EpochTimeResponseSchema>; | ||
|
||
const useEpochEndTime = () => { | ||
const { activeStakingProgramAddress } = useStakingProgram(); | ||
const latestEpochTimeQuery = gql` | ||
query { | ||
checkpoints( | ||
orderBy: epoch | ||
orderDirection: desc | ||
first: 1 | ||
where: { | ||
contractAddress: "${activeStakingProgramAddress}" | ||
} | ||
) { | ||
epochLength | ||
blockTimestamp | ||
} | ||
} | ||
`; | ||
|
||
const { data, isLoading } = useQuery({ | ||
queryKey: ['latestEpochTime'], | ||
queryFn: async () => { | ||
const response = (await request(SUBGRAPH_URL, latestEpochTimeQuery)) as { | ||
checkpoints: EpochTimeResponse[]; | ||
}; | ||
return EpochTimeResponseSchema.parse(response.checkpoints[0]); | ||
}, | ||
select: (data) => { | ||
// last epoch end time + epoch length | ||
return Number(data.blockTimestamp) + Number(data.epochLength); | ||
}, | ||
enabled: !!activeStakingProgramAddress, | ||
}); | ||
|
||
return { data, isLoading }; | ||
}; | ||
|
||
export const StakingRewardsThisEpoch = () => { | ||
const { data: epochEndTimeInMs } = useEpochEndTime(); | ||
|
||
return ( | ||
<Text type="secondary"> | ||
Staking rewards this epoch | ||
<Popover | ||
arrow={false} | ||
content={ | ||
<> | ||
The epoch ends each day at ~{' '} | ||
<Text className="text-sm" strong> | ||
{epochEndTimeInMs | ||
? `${formatToTime(epochEndTimeInMs * 1000)} (UTC)` | ||
: '--'} | ||
</Text> | ||
</> | ||
} | ||
> | ||
<InfoCircleOutlined /> | ||
</Popover> | ||
</Text> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters