Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add an election progress bar #4556

Merged
merged 32 commits into from
Dec 19, 2023
Merged

Add an election progress bar #4556

Changes from 1 commit
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
e6c06c7
Fix 4006: ElectionProgressBar.tsx
mkbeefcake Sep 28, 2023
f0cc488
Fix 4006: adjusting the tooltip's arrow to progress
mkbeefcake Sep 28, 2023
81c88fa
Fix 4006 : fix lint issue
mkbeefcake Sep 28, 2023
fa50471
Fix 4006 : Fixed test.tsx
mkbeefcake Oct 3, 2023
41b25e2
Fix 4006 : Updted the progress bar description by following figma
mkbeefcake Oct 3, 2023
7e6479d
Fix 4006: updated the code by Thesan's suggestion
mkbeefcake Oct 15, 2023
b124583
Updated progress bar to remove idle block and fix comment issue
Nov 7, 2023
e621846
Added storybook and removed idle section since idlePeriod == 1
mkbeefcake Nov 9, 2023
c2e7141
adjust sample value for currentBlock in stories.tsx
mkbeefcake Nov 9, 2023
9491b1d
Merge branch 'dev' into fix-4006
mkbeefcake Nov 9, 2023
69dc2ff
moved the idle period to the first
mkbeefcake Nov 14, 2023
12b92d8
Updated the changes for UI
mkbeefcake Nov 18, 2023
1a33802
Updated the suggestion
mkbeefcake Nov 18, 2023
e5e8deb
refactored stage parameters calculation
mkbeefcake Nov 21, 2023
5334ef5
Refactoerd description update code
mkbeefcake Nov 21, 2023
149de4e
Merge dev into branch
mkbeefcake Nov 21, 2023
6a5b320
Merge branch 'dev' into fix-4006
mkbeefcake Nov 21, 2023
e676fda
Fixed the issue after merged dev
mkbeefcake Nov 21, 2023
3419650
yarn lint:fix
mkbeefcake Nov 21, 2023
979f7bb
Updated the code by following Thesan's
mkbeefcake Dec 1, 2023
fe313c6
Merge branch 'dev' into fix-4006
mkbeefcake Dec 1, 2023
e3e5d5e
added useCouncilPeriodInformation
mkbeefcake Dec 5, 2023
16280e3
updated the election.tsx
mkbeefcake Dec 5, 2023
801c62d
updated the code
mkbeefcake Dec 5, 2023
ceb2944
lint issue
mkbeefcake Dec 5, 2023
51aa613
Remove `remainingPeriod` check
thesan Dec 5, 2023
97919db
Merge branch 'fix-4006' of https://github.com/mkbeefcake/pioneer into…
mkbeefcake Dec 8, 2023
562e39f
Updated for responsive layout
mkbeefcake Dec 14, 2023
47da2dd
Merge branch 'dev' into fix-4006
thesan Dec 15, 2023
a4147fa
updated responsive card & added genersis block timestamp
mkbeefcake Dec 15, 2023
e0dd9fa
Merge branch 'fix-4006' of https://github.com/mkbeefcake/pioneer into…
mkbeefcake Dec 15, 2023
9465db9
updated date calculation
mkbeefcake Dec 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 17 additions & 14 deletions packages/ui/src/app/pages/Election/components/ElectionProgressBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@ interface ElectionProgressBarProps extends StatisticItemProps {
electionStage: string
}

const GENESIS_BLOCK_TIMESTAMP = 1670693046000

const blockDurationToMs = (blockDuration: number) => blockDuration * MILLISECONDS_PER_BLOCK
const blockToDate = (block: number) => {
const msDuration = blockDurationToMs(block)
return new Date(GENESIS_BLOCK_TIMESTAMP + msDuration).toLocaleString('en-gb', { timeZone: 'Europe/Paris' })
const blockToDate = (duration: number) => {
const now = Date.now()
const msDuration = blockDurationToMs(duration)
const date = new Date(now + msDuration)
return `${date.toLocaleString('en-gb', { timeZone: 'Europe/Paris', dateStyle: 'short', timeStyle: 'short' })} CET`
}
const blockDurationToDays = (blockDuration: number) => Math.floor(blockDurationToMs(blockDuration) / A_DAY)

Expand Down Expand Up @@ -82,7 +82,10 @@ export const ElectionProgressBar = (props: ElectionProgressBarProps) => {
const constants = useCouncilConstants()

const [inactiveEndBlock, announcingEndBlock, votingEndBlock, revealingEndBlock] = periodInformation?.periodEnds ?? []
const endDates = periodInformation?.periodEnds.map((block) => blockToDate(block))
const endDates = useMemo(
() => periodInformation?.periodEnds.map((block) => blockToDate(block - currentBlock)),
[periodInformation?.currentStage]
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call! periodInformation?.currentStage is better since it will be defined when currentBlock will be defined.

)
const [inactiveEndDay, announcingEndDay, votingEndDay, revealingEndDay] = endDates ?? []

const progresses = periodInformation?.periodEnds.map((end, index) => {
Expand Down Expand Up @@ -160,7 +163,7 @@ export const ElectionProgressBar = (props: ElectionProgressBarProps) => {
isCurrent={props.electionStage === 'inactive'}
barType="inactive"
updateDesc={updateDescription}
tooltipText={`Idle stage lasts ${inactiveDays} days and ends on ${inactiveEndDay} CET (block #${inactiveEndBlock?.toLocaleString(
tooltipText={`Idle stage lasts ${inactiveDays} days and ends on ${inactiveEndDay} (block #${inactiveEndBlock?.toLocaleString(
'en-gb'
)} block). After that time, a new round of elections begins`}
/>
Expand All @@ -170,7 +173,7 @@ export const ElectionProgressBar = (props: ElectionProgressBarProps) => {
isCurrent={props.electionStage === 'announcing'}
barType="announcing"
updateDesc={updateDescription}
tooltipText={`Announcing stage lasts ${announcingDays} days and ends on ${announcingEndDay} CET (block #${announcingEndBlock?.toLocaleString(
tooltipText={`Announcing stage lasts ${announcingDays} days and ends on ${announcingEndDay} (block #${announcingEndBlock?.toLocaleString(
'en-gb'
)} block). During this time members can announce that they will stand as candidates for the next council`}
/>
Expand All @@ -180,7 +183,7 @@ export const ElectionProgressBar = (props: ElectionProgressBarProps) => {
isCurrent={props.electionStage === 'voting'}
barType="voting"
updateDesc={updateDescription}
tooltipText={`Voting stage lasts ${votingDays} days and ends on ${votingEndDay} CET (block #${votingEndBlock?.toLocaleString(
tooltipText={`Voting stage lasts ${votingDays} days and ends on ${votingEndDay} (block #${votingEndBlock?.toLocaleString(
'en-gb'
)} block). During this time voters can submit votes in favor of candidates`}
/>
Expand All @@ -190,7 +193,7 @@ export const ElectionProgressBar = (props: ElectionProgressBarProps) => {
isCurrent={props.electionStage === 'revealing'}
barType="revealing"
updateDesc={updateDescription}
tooltipText={`Revealing stage lasts ${revealingDays} days and ends on ${revealingEndDay} CET (block #${revealingEndBlock?.toLocaleString(
tooltipText={`Revealing stage lasts ${revealingDays} days and ends on ${revealingEndDay} (block #${revealingEndBlock?.toLocaleString(
'en-gb'
)} block). During this time, voters can reveal their sealed votes. Any valid vote which is unsealed is counted, and in the end a winning set of candidates is selected`}
/>
Expand All @@ -203,7 +206,7 @@ export const ElectionProgressBar = (props: ElectionProgressBarProps) => {
<ElectionProgressCardItem
title="Inactive"
progress={inactiveProgress / 100}
text={`Idle stage lasts ${inactiveDays} days and ends on ${inactiveEndDay} CET (block #${inactiveEndBlock?.toLocaleString(
text={`Idle stage lasts ${inactiveDays} days and ends on ${inactiveEndDay} (block #${inactiveEndBlock?.toLocaleString(
'en-gb'
)} block). After that time, a new round of elections begins`}
/>
Expand All @@ -212,7 +215,7 @@ export const ElectionProgressBar = (props: ElectionProgressBarProps) => {
<ElectionProgressCardItem
title="Announcing"
progress={announcingProgress / 100}
text={`Announcing stage lasts ${announcingDays} days and ends on ${announcingEndDay} CET (block #${announcingEndBlock?.toLocaleString(
text={`Announcing stage lasts ${announcingDays} days and ends on ${announcingEndDay} (block #${announcingEndBlock?.toLocaleString(
'en-gb'
)} block). During this time members can announce that they will stand as candidates for the next council`}
/>
Expand All @@ -221,7 +224,7 @@ export const ElectionProgressBar = (props: ElectionProgressBarProps) => {
<ElectionProgressCardItem
title="Voting"
progress={votingProgress / 100}
text={`Voting stage lasts ${votingDays} days and ends on ${votingEndDay} CET (block #${votingEndBlock?.toLocaleString(
text={`Voting stage lasts ${votingDays} days and ends on ${votingEndDay} (block #${votingEndBlock?.toLocaleString(
'en-gb'
)} block). During this time voters can submit votes in favor of candidates`}
/>
Expand All @@ -230,7 +233,7 @@ export const ElectionProgressBar = (props: ElectionProgressBarProps) => {
<ElectionProgressCardItem
title="Revealing"
progress={revealingProgress / 100}
text={`Revealing stage lasts ${revealingDays} days and ends on ${revealingEndDay} CET (block #${revealingEndBlock?.toLocaleString(
text={`Revealing stage lasts ${revealingDays} days and ends on ${revealingEndDay} (block #${revealingEndBlock?.toLocaleString(
'en-gb'
)} block). During this time, voters can reveal their sealed votes. Any valid vote which is unsealed is counted, and in the end a winning set of candidates is selected`}
/>
Expand Down