[DDW-712] Alonzo countdown and fireworks

[nikolaglumac]

This PR implements Alonzo countdown and fireworks.

Todos

• Remove testing functions

Screenshots

---

Testing Checklist

• Slack QA thread
• Run Daedalus on any of the networks and observe a green tada icon in the top bar - the Alonzo countdown starts at 60 mins.
• You can shorten the countdown by running window.setAlonzoActivation(10) in the JavaScript console (this will set the countdown to 10 seconds - you can use whatever value in seconds you prefer)
• In order to test the tada icon animation you need to first run daedalus.api.localStorage.unsetStakingInfoWasOpen() and then restart Daedalus for this to take an effect

---

Test Scenarios

Scenario 1 - Validate static "tada" icon is displayed

Given that Daedalus is open
And the Alonzo countdown has not reached zero
When I check the top bar on the right
Then I can see the static "tada" icon is displayed

Scenario 2 - Validate moving "tada" icon is displayed

Given that Daedalus is open
And the "Info" tab on the Staking center wasn't open on this session
And the Alonzo countdown has reached zero
When I check the top bar on the right
Then I can see the static "tada" icon is displayed

Scenario 3 - Click on static "tada" icon

Given that Daedalus is open
And the Alonzo countdown has not reached zero
When I click on the static "tada" icon
Then I can see Daedalus displays the "Info" tab on the Staking center
And it displays information about the upcoming Alonzo upgrade
And an active countdown is displayed at the bottom

Scenario 4 - Click on moving "tada" icon

Given that Daedalus is open
And the "Info" tab on the Staking center wasn't open on this session
And the Alonzo countdown has reached zero
When I click on the moving "tada" icon
Then I can see Daedalus displays the "Info" tab on the Staking center
And it displays information about the Alonzo upgrade
And at the bottom, I can see that the countdown has ended
And on top of these elements, an animation of fireworks is displayed
And "tada" icon is static

Scenario 5 - Switch to another tab from "Info"

Given that I am on the "Info" tab on Staking Center
And the countdown has reached zero
When I access another screen on Daedalus
Then I can see that the "tada" icon on the top right is static

---

Review Checklist

Basics

• PR has been assigned and has appropriate labels (feature/bug/chore, release-x.x.x)
• PR is updated to the most recent version of the target branch (and there are no conflicts)
• PR has a good description that summarizes all changes
• PR has default-sized Daedalus window screenshots or animated GIFs of important UI changes:
  • In English
  • In Japanese
• CHANGELOG entry has been added to the top of the appropriate section (Features, Fixes, Chores) and is linked to the correct PR on GitHub
• Automated tests: All acceptance and unit tests are passing (yarn test)
• Manual tests (minimum tests should cover newly added feature/fix): App works correctly in development build (yarn dev)
• Manual tests (minimum tests should cover newly added feature/fix): App works correctly in production build (yarn package / CI builds)
• There are no flow errors or warnings (yarn flow:test)
• There are no lint errors or warnings (yarn lint)
• There are no prettier errors or warnings (yarn prettier:check)
• There are no missing translations (running yarn manage:translations produces no changes)
• Text changes are proofread and approved (Jane Wild / Amy Reeve)
• Japanese text changes are proofread and approved (Junko Oda)
• UI changes look good in all themes (Alexander Rukin)
• Storybook works and no stories are broken (yarn storybook)
• In case of dependency changes yarn.lock file is updated

Code Quality

• Important parts of the code are properly commented and documented
• Code is properly typed with flow
• React components are split-up enough to avoid unnecessary re-renderings
• Any code that only works in main process is neatly separated from components

Testing

• New feature/change is covered by acceptance tests
• New feature/change is manually tested and approved by QA team
• All existing acceptance tests are still up-to-date
• New feature/change is covered by Daedalus Testing scenario
• All existing Daedalus Testing scenarios are still up-to-date

After Review

• Merge the PR
• Delete the source branch
• Move the ticket to done column on the YouTrack board
• Update Slack QA thread by marking it with a green checkmark

[gabriela-ponce]

This works well 👍
The only concern I have is that the icon is harder to see for me on the yellow background, compared to darker themes.

[thedanheller]

Working flawlessly ✨

[alexander-rukin]

All good)