[e.cash] Improve network upgrade banner


[e.cash] Improve network upgrade banner

The countdown for the network upgrade banner needed improvement. Im adding it as a seperate component here
It is following the same logic as the countdown on avalanche.cash, and using the avalanche.cash API

The basic idea is it fetches the api on load

  • if it fails it doesnt load the banner
  • if we get a response it sets the timestamp for the countdown, and get the blocksUntilUpgrade
  • once the timestamp is reached there is another method to start polling the API every 60s to get the blocksUntilUpgrade
  • Once this value is < 0 the network upgrade is considerd finished, the final text is shown and the polling stops

Test Plan:
preview the site and check it looks good

testing the actual functionality is a bit more invloved as not sure I have time to add tests, but it can be done manually
by running npm run dev

  • add const TESTING_TIMESTAMP = Date.now() + 10000; somewhere
  • replace setTimestamp(data.upgradeTimeStamp * 1000) with setTimestamp(TESTING_TIMESTAMP); in the useEffect
  • replace if ( newBlocksUntilUpgrade !== blocksUntilUpgrade && newBlocksUntilUpgrade !== null ) { setBlocksUntilUpgrade(newBlocksUntilUpgrade); }

with setBlocksUntilUpgrade(blocksUntilUpgrade - 1); in the polling useEffect

  • update the polling interval to a lower number if you like

This should run through every stage of the countdown and stop polling once its complete

Reviewers: #bitcoin_abc, bytesofman

Reviewed By: #bitcoin_abc, bytesofman

Subscribers: bytesofman

Differential Revision: https://reviews.bitcoinabc.org/D14786


johnkuneyAuthored on Nov 15 2023, 00:41
johnkuneyPushed on Nov 15 2023, 00:41
Restricted Project
Differential Revision
D14786: [e.cash] Improve network upgrade banner
rABC2f57890eead4: [linter] Lint everything