Add an election progress bar #4556
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
chrlschwb
added
community-dev
|
packages/ui/src/app/pages/Election/components/ElectionProgressBar.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
@mkbeefcake I approved this PR initially but I just realized that it breaks the election on mobile right now. So it can't be merged ATM.
Here are the RWD for it. Because it's not straight forward to implement I think these should be implemented fully in a follow up PR.
In the meantime this should be released without breaking the election page. Here's what I'm proposing:
So basically the widget stays the same but it wrap to the next line. There's a bunch of similar design on other pages (like the proposal preview).
There was a problem hiding this comment.
@mkbeefcake thank you for the extra effort of implementing the full design but there are some 2 issues:
First: this one is not new but I didn't notice it with the desktop designs (also it doesn't happens on Firefox). Watch the "ends on" time. It jumps back and forth from 18:22:06 to 18:22:11 also the value is slowly drifting. I think we should remove the seconds as we can't reliably predict this level of accuracy especially over several days. And this copies shouldn't be changed on every rerender, it should be changed only when the current stage changes.
Second: the items are visibly misaligned vertically:
|
@thesan I have fixed the issues by adding timestamp for GENESIS BLOCK and adjusted the padding for responsive. Please review this again. Thanks |
| @@ -27,11 +27,12 @@ interface ElectionProgressBarProps extends StatisticItemProps { | |||
| electionStage: string | |||
| } | |||
|
|
|||
| const GENESIS_BLOCK_TIMESTAMP = 1670693046000 | |||
There was a problem hiding this comment.
It would be nice to be able to convert block/dates without fetching anything from the network, but Pioneer should avoid hardcoding these kind of data because it should potentially work on other networks too. Also basing the future block date based on a date which is that old is that old makes it less accurate.
| @@ -81,8 +82,9 @@ export const ElectionProgressBar = (props: ElectionProgressBarProps) => { | |||
| const constants = useCouncilConstants() | |||
|
|
|||
| const [inactiveEndBlock, announcingEndBlock, votingEndBlock, revealingEndBlock] = periodInformation?.periodEnds ?? [] | |||
| const endDates = periodInformation?.periodEnds.map((block) => blockToDate(block - currentBlock)) | |||
| const endDates = periodInformation?.periodEnds.map((block) => blockToDate(block)) | |||
There was a problem hiding this comment.
Instead I think this is good enough:
| const endDates = periodInformation?.periodEnds.map((block) => blockToDate(block)) | |
| const endDates = useMemo(() => periodInformation?.periodEnds.map((block) => blockToDate(block - currentBlock)), [props.electionStage]) |
When the page is reloaded the time won't be exactly the same but it will actually be more accurate.
There was a problem hiding this comment.
I have tried to use props.electionStage, at that time sometimes the endDate is calculated as undefined, so I changed it to periodInformation.currentStage.
| return new Date(now + msDuration).toLocaleString('en-gb', { timeZone: 'Europe/Paris' }) | ||
| const blockToDate = (block: number) => { | ||
| const msDuration = blockDurationToMs(block) | ||
| return new Date(GENESIS_BLOCK_TIMESTAMP + msDuration).toLocaleString('en-gb', { timeZone: 'Europe/Paris' }) |
There was a problem hiding this comment.
Finally here's how to remove the seconds:
| return new Date(GENESIS_BLOCK_TIMESTAMP + msDuration).toLocaleString('en-gb', { timeZone: 'Europe/Paris' }) | |
| const date = new Date(now + msDuration) | |
| return `${date.toLocaleString('en-gb', { timeZone: 'Europe/Paris', dateStyle: "short", timeStyle: "short" })} CET` |
It's closer to the original design and it's a lot better since the time estimation can't be accurate to the second.
| const endDates = periodInformation?.periodEnds.map((block) => blockToDate(block)) | ||
| const endDates = useMemo( | ||
| () => periodInformation?.periodEnds.map((block) => blockToDate(block - currentBlock)), | ||
| [periodInformation?.currentStage] |
There was a problem hiding this comment.
Good call! periodInformation?.currentStage is better since it will be defined when currentBlock will be defined.
Fixed #4006 : implemented new Progressbar for Election
> Design
> RWD Designs
> Election page
> Story