From 7780b010bd5552b2e53db9bf4814dc80318cb57c Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Mon, 18 Mar 2024 08:13:34 -0700 Subject: [PATCH] feat(synapse-interface): create template event maintenance components, remove ecotone + metis event maintenance components (#2294) * Remove upgrade components from app * Create Event example for annoucements + progress bar, add comments * Add comments for example of hook * Adjust comments * Adjust comments * annoucement banner visual tweaks * Add comment to show where progress bar was last used * reset ECOTONE_FORK_END_DATE * Add additional example code snippets * Reorder imports * Improve comments --------- Co-authored-by: Lawson Kight --- .../Maintenance/AnnouncementBanner.tsx | 20 +-- .../Maintenance/EthDencunUpgrade.tsx | 30 ----- .../Maintenance/EventCountdownProgressBar.tsx | 13 +- .../Maintenance/Events/EcotoneForkUpgrade.tsx | 93 ------------- .../Maintenance/Events/MetisUpgrade.tsx | 90 ------------- .../Events/example/EcotoneForkUpgrade.tsx | 127 ++++++++++++++++++ packages/synapse-interface/pages/index.tsx | 30 ++--- .../pages/state-managed-bridge/index.tsx | 42 +----- 8 files changed, 158 insertions(+), 287 deletions(-) delete mode 100644 packages/synapse-interface/components/Maintenance/EthDencunUpgrade.tsx delete mode 100644 packages/synapse-interface/components/Maintenance/Events/EcotoneForkUpgrade.tsx delete mode 100644 packages/synapse-interface/components/Maintenance/Events/MetisUpgrade.tsx create mode 100644 packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx diff --git a/packages/synapse-interface/components/Maintenance/AnnouncementBanner.tsx b/packages/synapse-interface/components/Maintenance/AnnouncementBanner.tsx index 377bcfadcf..046cc0426c 100644 --- a/packages/synapse-interface/components/Maintenance/AnnouncementBanner.tsx +++ b/packages/synapse-interface/components/Maintenance/AnnouncementBanner.tsx @@ -54,28 +54,16 @@ export const AnnouncementBanner = ({ if (!showBanner || !hasMounted || !isStarted || isComplete) return null return ( -
+
- } - startDate={ETH_DENCUN_BANNER_START} - endDate={ETH_DENCUN_END_DATE} - /> - ) -} 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/EcotoneForkUpgrade.tsx b/packages/synapse-interface/components/Maintenance/Events/EcotoneForkUpgrade.tsx deleted file mode 100644 index c2dd3dd355..0000000000 --- a/packages/synapse-interface/components/Maintenance/Events/EcotoneForkUpgrade.tsx +++ /dev/null @@ -1,93 +0,0 @@ -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' -import { useIntervalTimer } from '@/utils/hooks/useIntervalTimer' - -/** - * Start: 25 min prior to Ecotone Fork Upgrade Time @ (March 14, 00:00 UTC) - * End: 25 min after start of Ecotone Fork Upgrade Time - */ -export const ECOTONE_FORK_BANNERS_START = new Date( - Date.UTC(2024, 2, 13, 23, 20, 0) -) -export const ECOTONE_FORK_START_DATE = new Date( - Date.UTC(2024, 2, 13, 23, 35, 0) -) -export const ECOTONE_FORK_END_DATE = new Date(Date.UTC(2024, 2, 14, 0, 25, 0)) - -export const EcotoneForkUpgradeBanner = () => { - const { isComplete } = getCountdownTimeStatus( - ECOTONE_FORK_BANNERS_START, - ECOTONE_FORK_END_DATE - ) - - useIntervalTimer(60000, isComplete) - - return ( - -
- Optimism + Base Bridging will be paused 10 minutes ahead of Ecotone - (March 14, 00:00 UTC, 20:00 EST). -
-
Will be back online shortly following the network upgrade.
-
- } - startDate={ECOTONE_FORK_BANNERS_START} - endDate={ECOTONE_FORK_END_DATE} - /> - ) -} - -export const EcotoneForkWarningMessage = () => { - const { fromChainId, toChainId } = useBridgeState() - - const isChainOptimism = [fromChainId, toChainId].includes(OPTIMISM.id) - const isChainBase = [fromChainId, toChainId].includes(BASE.id) - - if (isChainOptimism || isChainBase) { - return ( - -

- Optimism Chain and Base Chain bridging are paused until the - Ecotone Fork upgrade completes. -

- - } - /> - ) - } else return null -} - -export const useEcotoneForkCountdownProgress = () => { - const { fromChainId, toChainId } = useBridgeState() - - const isChainOptimism = [fromChainId, toChainId].includes(OPTIMISM.id) - const isChainBase = [fromChainId, toChainId].includes(BASE.id) - - const { - isPending: isEcotoneForkUpgradePending, - EventCountdownProgressBar: EcotoneForkCountdownProgressBar, - } = useEventCountdownProgressBar( - 'Ecotone Fork upgrade in progress', - ECOTONE_FORK_START_DATE, - ECOTONE_FORK_END_DATE - ) - - return { - isEcotoneForkUpgradePending, - isCurrentChainDisabled: - (isChainOptimism || isChainBase) && isEcotoneForkUpgradePending, - EcotoneForkCountdownProgressBar: - isChainOptimism || isChainBase ? EcotoneForkCountdownProgressBar : null, - } -} 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/example/EcotoneForkUpgrade.tsx b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx new file mode 100644 index 0000000000..f8da18a9e7 --- /dev/null +++ b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx @@ -0,0 +1,127 @@ +import { useBridgeState } from '@/slices/bridge/hooks' +import { useIntervalTimer } from '@/utils/hooks/useIntervalTimer' +import { OPTIMISM, BASE } from '@/constants/chains/master' +import { + useEventCountdownProgressBar, + getCountdownTimeStatus, +} from '../../EventCountdownProgressBar' +import { AnnouncementBanner } from '../../AnnouncementBanner' +import { WarningMessage } from '../../../Warning' + +/** + * 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: 15 min prior to Ecotone Fork Upgrade Time @ (March 14, 00:00 UTC) + * End: 50 min after start of Ecotone Fork Upgrade Time + */ +export const ECOTONE_FORK_BANNERS_START = new Date( + Date.UTC(2024, 2, 13, 23, 20, 0) +) +export const ECOTONE_FORK_START_DATE = new Date( + Date.UTC(2024, 2, 13, 23, 35, 0) +) +export const ECOTONE_FORK_END_DATE = new Date(Date.UTC(2024, 2, 14, 0, 25, 0)) + +/** Previous implementation can be seen here: https://github.com/synapsecns/sanguine/pull/2294/files#diff-bbe6298d3dfbc80e46e2ff8b399a3e1822cede80f392b1af91875145ad4eeb19R19 */ +export const EcotoneForkUpgradeBanner = () => { + const { isComplete } = getCountdownTimeStatus( + ECOTONE_FORK_BANNERS_START, // Banner will automatically appear after start time + ECOTONE_FORK_END_DATE // Banner will automatically disappear when end time is reached + ) + + useIntervalTimer(60000, isComplete) + + return ( + + Optimism + Base Bridging will be paused 10 minutes ahead of Ecotone + (March 14, 00:00 UTC, 20:00 EST). Will be back online shortly + following the network upgrade. + + } + startDate={ECOTONE_FORK_BANNERS_START} + endDate={ECOTONE_FORK_END_DATE} + /> + ) +} + +/** + * Warning Message to place within the Bridge Card + * Below example sets to show only when chains are selected (Optimism, Base) + * + * Example: https://github.com/synapsecns/sanguine/blob/f068eff5e86ec97e17fc8e703d7203c12fb7f733/packages/synapse-interface/pages/state-managed-bridge/index.tsx#L629 + */ +export const EcotoneForkWarningMessage = () => { + const { fromChainId, toChainId } = useBridgeState() + + const isChainOptimism = [fromChainId, toChainId].includes(OPTIMISM.id) + const isChainBase = [fromChainId, toChainId].includes(BASE.id) + + if (isChainOptimism || isChainBase) { + return ( + +

+ Optimism Chain and Base Chain bridging are paused until the + Ecotone Fork upgrade completes. +

+ + } + /> + ) + } else return null +} + +/** + * Countdown Bar with Progress Animation based on time remaining + * Below example sets to show only when chains are selected (Optimism, Base) + * + * Previously used in this location: https://github.com/synapsecns/sanguine/blob/f068eff5e86ec97e17fc8e703d7203c12fb7f733/packages/synapse-interface/pages/state-managed-bridge/index.tsx#L588 + * Bridge pause implemented here: https://github.com/synapsecns/sanguine/blob/f068eff5e86ec97e17fc8e703d7203c12fb7f733/packages/synapse-interface/pages/state-managed-bridge/index.tsx#L652-L654 + * + * Example of how to use hook: + * import { useEcotoneForkCountdownProgress } = '@/components/Maintenance/Events/EcotoneForkUpgrade' + * + * const { + isEcotoneForkUpgradePending, + isCurrentChainDisabled: isEcotoneUpgradeChainsDisabled, + EcotoneForkCountdownProgressBar, + } = useEcotoneForkCountdownProgress() + + In JSX, render the component: + +
+ {EcotoneForkCountdownProgressBar} +
+ */ + +export const useEcotoneForkCountdownProgress = () => { + const { fromChainId, toChainId } = useBridgeState() + + const isChainOptimism = [fromChainId, toChainId].includes(OPTIMISM.id) + const isChainBase = [fromChainId, toChainId].includes(BASE.id) + + const { + isPending: isEcotoneForkUpgradePending, + EventCountdownProgressBar: EcotoneForkCountdownProgressBar, + } = useEventCountdownProgressBar( + 'Ecotone Fork upgrade in progress', + ECOTONE_FORK_START_DATE, // Countdown Bar will automatically appear after start time + ECOTONE_FORK_END_DATE // Countdown Bar will automatically disappear when end time is reached + ) + + return { + isEcotoneForkUpgradePending, + isCurrentChainDisabled: + (isChainOptimism || isChainBase) && isEcotoneForkUpgradePending, // Used to pause Bridge + EcotoneForkCountdownProgressBar: + isChainOptimism || isChainBase ? EcotoneForkCountdownProgressBar : null, + } +} diff --git a/packages/synapse-interface/pages/index.tsx b/packages/synapse-interface/pages/index.tsx index 79242cace6..aabf660aaa 100644 --- a/packages/synapse-interface/pages/index.tsx +++ b/packages/synapse-interface/pages/index.tsx @@ -3,8 +3,7 @@ import { Portfolio } from '@/components/Portfolio/Portfolio' import { LandingPageWrapper } from '@/components/layouts/LandingPageWrapper' import ReactGA from 'react-ga' import useSyncQueryParamsWithBridgeState from '@/utils/hooks/useSyncQueryParamsWithBridgeState' -import { EcotoneForkUpgradeBanner } from '@/components/Maintenance/Events/EcotoneForkUpgrade' -import { MetisDowntimeBanner } from '@/components/Maintenance/Events/MetisUpgrade' +import { EcotoneForkUpgradeBanner } from '@/components/Maintenance/Events/example/EcotoneForkUpgrade' // TODO: someone should add this to the .env, disable if blank, etc. // this is being added as a hotfix to assess user load on the synapse explorer api @@ -16,19 +15,20 @@ const Home = () => { useSyncQueryParamsWithBridgeState() return ( - -
- - -
- - -
-
- + <> + + +
+
+ + +
+
+ + ) } diff --git a/packages/synapse-interface/pages/state-managed-bridge/index.tsx b/packages/synapse-interface/pages/state-managed-bridge/index.tsx index 9c298791f6..28cc488b3f 100644 --- a/packages/synapse-interface/pages/state-managed-bridge/index.tsx +++ b/packages/synapse-interface/pages/state-managed-bridge/index.tsx @@ -85,22 +85,6 @@ import { } from '@/slices/priceDataSlice' import { isTransactionReceiptError } from '@/utils/isTransactionReceiptError' import { SwitchButton } from '@/components/buttons/SwitchButton' -import { useEventCountdownProgressBar } from '@/components/Maintenance/EventCountdownProgressBar' - -import { - METIS_DOWNTIME_START_DATE, - METIS_DOWNTIME_END_DATE, - MetisDowntimeWarningMessage, - useMetisDowntimeCountdownProgress, -} from '@/components/Maintenance/Events/MetisUpgrade' -import { - ECOTONE_FORK_START_DATE, - ECOTONE_FORK_END_DATE, - EcotoneForkWarningMessage, - useEcotoneForkCountdownProgress, -} from '@/components/Maintenance/Events/EcotoneForkUpgrade' - -import { OPTIMISM, BASE, METIS } from '@/constants/chains/master' const StateManagedBridge = () => { const { address } = useAccount() @@ -533,20 +517,6 @@ const StateManagedBridge = () => { const springClass = '-mt-4 fixed z-50 w-full h-full bg-opacity-50 bg-[#343036]' - /* Remove after upgrades */ - const { - isEcotoneForkUpgradePending, - isCurrentChainDisabled: isEcotoneUpgradeChainsDisabled, - EcotoneForkCountdownProgressBar, - } = useEcotoneForkCountdownProgress() - - const { - isMetisUpgradePending, - isCurrentChainDisabled: isMetisUpgradeChainDisabled, - MetisUpgradeCountdownProgressBar, - } = useMetisDowntimeCountdownProgress() - /* Remove after upgrades */ - return (
@@ -584,8 +554,6 @@ const StateManagedBridge = () => { transition-all duration-100 transform rounded-md `} > - {EcotoneForkCountdownProgressBar} - {MetisUpgradeCountdownProgressBar}
@@ -623,12 +591,6 @@ const StateManagedBridge = () => { /> - - {/* Remove after upgrades */} - {isEcotoneForkUpgradePending && } - {isMetisUpgradePending && } - {/* Remove after upgrades */} - { isApproved={isApproved} approveTxn={approveTxn} executeBridge={executeBridge} - isBridgePaused={ - isEcotoneUpgradeChainsDisabled || isMetisUpgradeChainDisabled - } + isBridgePaused={false} />