From 6ade4320fb4995b43bb551ba8535011eb0763c47 Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Thu, 14 Mar 2024 09:57:31 -0700 Subject: [PATCH] Create Event example for annoucements + progress bar, add comments --- .../Maintenance/EventCountdownProgressBar.tsx | 13 ++- .../Maintenance/Events/MetisUpgrade.tsx | 90 ------------------- .../{ => example}/EcotoneForkUpgrade.tsx | 12 ++- 3 files changed, 20 insertions(+), 95 deletions(-) delete mode 100644 packages/synapse-interface/components/Maintenance/Events/MetisUpgrade.tsx rename packages/synapse-interface/components/Maintenance/Events/{ => example}/EcotoneForkUpgrade.tsx (89%) diff --git a/packages/synapse-interface/components/Maintenance/EventCountdownProgressBar.tsx b/packages/synapse-interface/components/Maintenance/EventCountdownProgressBar.tsx index dfd8f6c018..5225124513 100644 --- a/packages/synapse-interface/components/Maintenance/EventCountdownProgressBar.tsx +++ b/packages/synapse-interface/components/Maintenance/EventCountdownProgressBar.tsx @@ -1,6 +1,15 @@ import { LinearAnimatedProgressBar } from './LinearAnimatedProgressBar' import { useIntervalTimer } from '@/utils/hooks/useIntervalTimer' +/** + * Automated Event Countdown Progress bar that displays + * time remaining for event target end date to be reached. + * Displays a visual progress bar with percentage completion. + * + * @param eventLabel text to display in progress bar + * @param startDate starting date for progress bar to activate + * @param endDate ending date for progress bar to disappear + */ export const useEventCountdownProgressBar = ( eventLabel: string, startDate: Date, @@ -10,11 +19,11 @@ export const useEventCountdownProgressBar = ( isComplete: boolean EventCountdownProgressBar: JSX.Element } => { - useIntervalTimer(60000) - const { totalTimeRemainingInMinutes, hoursRemaining, isComplete, isPending } = getCountdownTimeStatus(startDate, endDate) + useIntervalTimer(60000, isComplete) + const timeRemaining: string = totalTimeRemainingInMinutes > 90 ? `${hoursRemaining}h` diff --git a/packages/synapse-interface/components/Maintenance/Events/MetisUpgrade.tsx b/packages/synapse-interface/components/Maintenance/Events/MetisUpgrade.tsx deleted file mode 100644 index 223a178bab..0000000000 --- a/packages/synapse-interface/components/Maintenance/Events/MetisUpgrade.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { AnnouncementBanner } from '../AnnouncementBanner' -import { WarningMessage } from '../../Warning' -import { useBridgeState } from '@/slices/bridge/hooks' -import { METIS } from '@/constants/chains/master' -import { useEventCountdownProgressBar } from '../EventCountdownProgressBar' -import { useIntervalTimer } from '@/utils/hooks/useIntervalTimer' -import { getCountdownTimeStatus } from '../EventCountdownProgressBar' - -/** - * Start: 30 min prior to Metis Chain Downtime @ (March 14, 02:00 UTC) - * End: 12 hours after start of Metis Chain Downtime - */ -export const METIS_DOWNTIME_BANNERS_START = new Date( - Date.UTC(2024, 2, 14, 1, 30, 0) -) -export const METIS_DOWNTIME_START_DATE = new Date( - Date.UTC(2024, 2, 14, 1, 45, 0) -) -export const METIS_DOWNTIME_END_DATE = new Date( - Date.UTC(2024, 2, 14, 16, 30, 0) -) - -export const MetisDowntimeBanner = () => { - const { isComplete } = getCountdownTimeStatus( - METIS_DOWNTIME_BANNERS_START, - METIS_DOWNTIME_END_DATE - ) - - useIntervalTimer(60000, isComplete) - - return ( - -
- Metis Chain bridging will be paused 30 min ahead of the Metis - Upgrade (March 14, 02:00 UTC, 22:00 EST) -
-
and stay paused for ~12 hours.
- - } - startDate={METIS_DOWNTIME_BANNERS_START} - endDate={METIS_DOWNTIME_END_DATE} - /> - ) -} - -export const MetisDowntimeWarningMessage = () => { - const { fromChainId, toChainId } = useBridgeState() - - const isChainMetis = [fromChainId, toChainId].includes(METIS.id) - - if (isChainMetis) { - return ( - -

- Metis Chain bridging is paused until the Metis upgrade completes. -

- - } - /> - ) - } else return null -} - -export const useMetisDowntimeCountdownProgress = () => { - const { fromChainId, toChainId } = useBridgeState() - - const isChainMetis = [fromChainId, toChainId].includes(METIS.id) - - const { - isPending: isMetisUpgradePending, - EventCountdownProgressBar: MetisUpgradeCountdownProgressBar, - } = useEventCountdownProgressBar( - 'Metis upgrade in progress', - METIS_DOWNTIME_START_DATE, - METIS_DOWNTIME_END_DATE - ) - - return { - isMetisUpgradePending, - isCurrentChainDisabled: isChainMetis && isMetisUpgradePending, - MetisUpgradeCountdownProgressBar: isChainMetis - ? MetisUpgradeCountdownProgressBar - : null, - } -} diff --git a/packages/synapse-interface/components/Maintenance/Events/EcotoneForkUpgrade.tsx b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx similarity index 89% rename from packages/synapse-interface/components/Maintenance/Events/EcotoneForkUpgrade.tsx rename to packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx index 096dc05d26..3a90dec32f 100644 --- a/packages/synapse-interface/components/Maintenance/Events/EcotoneForkUpgrade.tsx +++ b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx @@ -1,13 +1,19 @@ -import { AnnouncementBanner } from '../AnnouncementBanner' -import { WarningMessage } from '../../Warning' +import { AnnouncementBanner } from '../../AnnouncementBanner' +import { WarningMessage } from '../../../Warning' import { useBridgeState } from '@/slices/bridge/hooks' import { OPTIMISM, BASE } from '@/constants/chains/master' import { useEventCountdownProgressBar, getCountdownTimeStatus, -} from '../EventCountdownProgressBar' +} from '../../EventCountdownProgressBar' import { useIntervalTimer } from '@/utils/hooks/useIntervalTimer' +/** + * Leaving this file to serve as an example for how to create + * automated annoucement banners and event countdown timer bars + * with the ability to pause Bridge by selected chain ids + */ + /** * Start: 25 min prior to Ecotone Fork Upgrade Time @ (March 14, 00:00 UTC) * End: 25 min after start of Ecotone Fork Upgrade Time