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

Show file tree
Hide file tree
Changes from 2 commits
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
12 changes: 7 additions & 5 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,11 +27,12 @@ interface ElectionProgressBarProps extends StatisticItemProps {
electionStage: string
}

const GENESIS_BLOCK_TIMESTAMP = 1670693046000
Copy link
Collaborator

Choose a reason for hiding this comment

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

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.


const blockDurationToMs = (blockDuration: number) => blockDuration * MILLISECONDS_PER_BLOCK
const blockToDate = (duration: number) => {
const now = Date.now()
const msDuration = blockDurationToMs(duration)
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' })
Copy link
Collaborator

Choose a reason for hiding this comment

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

Finally here's how to remove the seconds:

Suggested change
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 blockDurationToDays = (blockDuration: number) => Math.floor(blockDurationToMs(blockDuration) / A_DAY)

Expand Down Expand Up @@ -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))
Copy link
Collaborator

Choose a reason for hiding this comment

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

Instead I think this is good enough:

Suggested change
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.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I have tried to use props.electionStage, at that time sometimes the endDate is calculated as undefined, so I changed it to periodInformation.currentStage.

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

const progresses = periodInformation?.periodEnds.map((end, index) => {
const start = periodInformation.periodStarts[index]
return clamp(((currentBlock - start) * 100) / (end - start), 0, 100)
Expand Down
5 changes: 3 additions & 2 deletions packages/ui/src/app/pages/Election/components/ElectionProgressCardItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ const ProgressCardItemWrap = styled.div`
align-items: center;
width: 100%;
height: 54px;
padding: 16px 4px 8px 16px;
padding-left: 16px;
padding-right: 4px;
margin-left: -1px;

${Skeleton} {
Expand All @@ -102,5 +103,5 @@ const StatisticBigLabel = styled.div<{ strong?: boolean }>`

const StyledDropDown = styled(DropDownToggle)`
row-gap: 16px;
padding: 16px;
padding: 0px 16px 16px 16px;
`