From 1fe163f46ccea0c2fb2acfe958cacddfe6953112 Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Thu, 21 Mar 2024 10:00:01 -0700 Subject: [PATCH 01/58] Aggregate maintenance events for banners and warning message --- .../Events/template/MaintenanceEvent.tsx | 95 ++++++++++++++++--- packages/synapse-interface/pages/index.tsx | 7 +- .../pages/state-managed-bridge/index.tsx | 3 +- 3 files changed, 90 insertions(+), 15 deletions(-) diff --git a/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx b/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx index e6d623781e..596b3d3835 100644 --- a/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx +++ b/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx @@ -22,17 +22,52 @@ const MAINTENANCE_START_DATE = new Date(Date.UTC(2024, 2, 20, 20, 20, 0)) /** Ends Banner, Countdown Progress Bar, Bridge Warning Message, Bridge Pause */ const MAINTENANCE_END_DATE = new Date(Date.UTC(2024, 2, 20, 22, 0, 0)) -export const MaintenanceBanner = () => { +const PAUSED_CHAINS = [ + { + id: 'optimism-chain-pause', + pausedChains: [OPTIMISM.id], + startTime: new Date(Date.UTC(2024, 2, 20, 20, 20, 0)), + endTime: new Date(Date.UTC(2024, 2, 20, 22, 0, 0)), + bannerStartTime: new Date(Date.UTC(2024, 2, 20, 20, 20, 0)), + bannerEndTime: new Date(Date.UTC(2024, 2, 20, 22, 0, 0)), + }, +] + +export const MaintenanceBanners = () => { + return ( + <> + {PAUSED_CHAINS.map((event) => { + ; + })} + + ) +} + +export const MaintenanceBanner = ({ + id, + startDate, + endDate, +}: { + id: string + startDate: Date + endDate: Date +}) => { const { isComplete } = getCountdownTimeStatus( - MAINTENANCE_BANNERS_START, // Banner will automatically appear after start time - MAINTENANCE_END_DATE // Banner will automatically disappear when end time is reached + // MAINTENANCE_BANNERS_START, // Banner will automatically appear after start time + // MAINTENANCE_END_DATE // Banner will automatically disappear when end time is reached + startDate, + endDate ) useIntervalTimer(60000, isComplete) return (

@@ -46,17 +81,42 @@ export const MaintenanceBanner = () => { ) } -export const MaintenanceWarningMessage = () => { +const MaintenanceWarningMessages = () => { + return ( + <> + {PAUSED_CHAINS.map((event) => { + ; + })} + + ) +} + +export const MaintenanceWarningMessage = ({ + startDate, + endDate, + pausedChains, +}: { + startDate: Date + endDate: Date + pausedChains: number[] +}) => { const { fromChainId, toChainId } = useBridgeState() const isWarningChain = isChainIncluded( [fromChainId, toChainId], - [OPTIMISM.id, BASE.id] // Update for Chains to show warning on + // [OPTIMISM.id, BASE.id] // Update for Chains to show warning on + pausedChains ) const { isComplete } = getCountdownTimeStatus( - MAINTENANCE_BANNERS_START, // Banner will automatically appear after start time - MAINTENANCE_END_DATE // Banner will automatically disappear when end time is reached + // MAINTENANCE_BANNERS_START, // Banner will automatically appear after start time + // MAINTENANCE_END_DATE // Banner will automatically disappear when end time is reached + startDate, + endDate ) if (isComplete) return null @@ -76,12 +136,21 @@ export const MaintenanceWarningMessage = () => { return null } -export const useMaintenanceCountdownProgress = () => { +export const useMaintenanceCountdownProgress = ({ + startDate, + endDate, + pausedChains, +}: { + startDate: Date + endDate: Date + pausedChains: number[] +}) => { const { fromChainId, toChainId } = useBridgeState() const isCurrentChain = isChainIncluded( [fromChainId, toChainId], - [OPTIMISM.id, BASE.id] // Update for Chains to show maintenance on + // [OPTIMISM.id, BASE.id] // Update for Chains to show maintenance on + pausedChains ) const { @@ -89,8 +158,10 @@ export const useMaintenanceCountdownProgress = () => { EventCountdownProgressBar: MaintenanceCountdownProgressBar, } = useEventCountdownProgressBar( 'Maintenance in progress', - MAINTENANCE_START_DATE, // Countdown Bar will automatically appear after start time - MAINTENANCE_END_DATE // Countdown Bar will automatically disappear when end time is reached + // MAINTENANCE_START_DATE, // Countdown Bar will automatically appear after start time + // MAINTENANCE_END_DATE // Countdown Bar will automatically disappear when end time is reached + startDate, + endDate ) return { diff --git a/packages/synapse-interface/pages/index.tsx b/packages/synapse-interface/pages/index.tsx index 818fb52ca6..9fcd49f6e0 100644 --- a/packages/synapse-interface/pages/index.tsx +++ b/packages/synapse-interface/pages/index.tsx @@ -3,7 +3,10 @@ import { Portfolio } from '@/components/Portfolio/Portfolio' import { LandingPageWrapper } from '@/components/layouts/LandingPageWrapper' import ReactGA from 'react-ga' import useSyncQueryParamsWithBridgeState from '@/utils/hooks/useSyncQueryParamsWithBridgeState' -import { MaintenanceBanner } from '@/components/Maintenance/Events/template/MaintenanceEvent' +import { + MaintenanceBanner, + MaintenanceBanners, +} from '@/components/Maintenance/Events/template/MaintenanceEvent' // 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,7 +19,7 @@ const Home = () => { return ( <> - +

{ /> - {isMaintenancePending && } + {isMaintenancePending && } Date: Thu, 21 Mar 2024 10:16:46 -0700 Subject: [PATCH 02/58] Dynamically render countdown progress bars based on PAUSED_CHAIN --- .../Events/template/MaintenanceEvent.tsx | 48 +++++++++++++------ .../pages/state-managed-bridge/index.tsx | 27 +++++++---- 2 files changed, 52 insertions(+), 23 deletions(-) diff --git a/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx b/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx index 596b3d3835..f06cea2625 100644 --- a/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx +++ b/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx @@ -26,10 +26,10 @@ const PAUSED_CHAINS = [ { id: 'optimism-chain-pause', pausedChains: [OPTIMISM.id], - startTime: new Date(Date.UTC(2024, 2, 20, 20, 20, 0)), - endTime: new Date(Date.UTC(2024, 2, 20, 22, 0, 0)), - bannerStartTime: new Date(Date.UTC(2024, 2, 20, 20, 20, 0)), - bannerEndTime: new Date(Date.UTC(2024, 2, 20, 22, 0, 0)), + startTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)), + endTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)), + bannerStartTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)), + bannerEndTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)), }, ] @@ -37,11 +37,13 @@ export const MaintenanceBanners = () => { return ( <> {PAUSED_CHAINS.map((event) => { - ; + return ( + + ) })} ) @@ -81,15 +83,17 @@ export const MaintenanceBanner = ({ ) } -const MaintenanceWarningMessages = () => { +export const MaintenanceWarningMessages = () => { return ( <> {PAUSED_CHAINS.map((event) => { - ; + return ( + + ) })} ) @@ -136,6 +140,20 @@ export const MaintenanceWarningMessage = ({ return null } +/** + * Hook that maps through PAUSED_CHAINS to apply the single chain countdown progress logic to each. + * @returns Array of objects containing maintenance status and components for each paused chain. + */ +export const useMaintenanceCountdownProgresses = () => { + return PAUSED_CHAINS.map((event) => { + return useMaintenanceCountdownProgress({ + startDate: event.startTime, + endDate: event.endTime, + pausedChains: event.pausedChains, + }) + }) +} + export const useMaintenanceCountdownProgress = ({ startDate, endDate, diff --git a/packages/synapse-interface/pages/state-managed-bridge/index.tsx b/packages/synapse-interface/pages/state-managed-bridge/index.tsx index 5b26dbf235..43d2126c1b 100644 --- a/packages/synapse-interface/pages/state-managed-bridge/index.tsx +++ b/packages/synapse-interface/pages/state-managed-bridge/index.tsx @@ -89,6 +89,7 @@ import { MaintenanceWarningMessage, MaintenanceWarningMessages, useMaintenanceCountdownProgress, + useMaintenanceCountdownProgresses, } from '@/components/Maintenance/Events/template/MaintenanceEvent' const StateManagedBridge = () => { @@ -522,11 +523,16 @@ const StateManagedBridge = () => { const springClass = '-mt-4 fixed z-50 w-full h-full bg-opacity-50 bg-[#343036]' - const { - isMaintenancePending, - isCurrentChainDisabled, - MaintenanceCountdownProgressBar, - } = useMaintenanceCountdownProgress() + // const { + // isMaintenancePending, + // isCurrentChainDisabled, + // MaintenanceCountdownProgressBar, + // } = useMaintenanceCountdownProgress() + + const instances = useMaintenanceCountdownProgresses() + const isBridgePaused = instances.some( + (instance) => instance.isCurrentChainDisabled + ) return (
@@ -565,7 +571,10 @@ const StateManagedBridge = () => { transition-all duration-100 transform rounded-md `} > - {MaintenanceCountdownProgressBar} + {instances.map((instance) => ( + <>{instance.MaintenanceCountdownProgressBar} + ))} +
@@ -603,7 +612,9 @@ const StateManagedBridge = () => { /> - {isMaintenancePending && } + + + { isApproved={isApproved} approveTxn={approveTxn} executeBridge={executeBridge} - isBridgePaused={isCurrentChainDisabled} + isBridgePaused={isBridgePaused} />
From 30d8e73937255b7094c1216145dd36a274091899 Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Thu, 21 Mar 2024 10:19:59 -0700 Subject: [PATCH 03/58] Dynamically rendering banners --- .../Maintenance/Events/template/MaintenanceEvent.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx b/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx index f06cea2625..1685dd1891 100644 --- a/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx +++ b/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx @@ -31,6 +31,14 @@ const PAUSED_CHAINS = [ bannerStartTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)), bannerEndTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)), }, + { + id: 'base-chain-pause', + pausedChains: [BASE.id], + startTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)), + endTime: new Date(Date.UTC(2024, 2, 21, 17, 30, 0)), + bannerStartTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)), + bannerEndTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)), + }, ] export const MaintenanceBanners = () => { @@ -77,8 +85,8 @@ export const MaintenanceBanner = ({

} - startDate={MAINTENANCE_BANNERS_START} - endDate={MAINTENANCE_END_DATE} + startDate={startDate} + endDate={endDate} /> ) } From fd533a08ccb83661bd310ed20107c692f55b7c0f Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Thu, 21 Mar 2024 10:25:39 -0700 Subject: [PATCH 04/58] Slightly organize --- .../Events/template/MaintenanceEvent.tsx | 132 +++++++++--------- 1 file changed, 67 insertions(+), 65 deletions(-) diff --git a/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx b/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx index 1685dd1891..ec90780592 100644 --- a/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx +++ b/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx @@ -22,41 +22,6 @@ const MAINTENANCE_START_DATE = new Date(Date.UTC(2024, 2, 20, 20, 20, 0)) /** Ends Banner, Countdown Progress Bar, Bridge Warning Message, Bridge Pause */ const MAINTENANCE_END_DATE = new Date(Date.UTC(2024, 2, 20, 22, 0, 0)) -const PAUSED_CHAINS = [ - { - id: 'optimism-chain-pause', - pausedChains: [OPTIMISM.id], - startTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)), - endTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)), - bannerStartTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)), - bannerEndTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)), - }, - { - id: 'base-chain-pause', - pausedChains: [BASE.id], - startTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)), - endTime: new Date(Date.UTC(2024, 2, 21, 17, 30, 0)), - bannerStartTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)), - bannerEndTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)), - }, -] - -export const MaintenanceBanners = () => { - return ( - <> - {PAUSED_CHAINS.map((event) => { - return ( - - ) - })} - - ) -} - export const MaintenanceBanner = ({ id, startDate, @@ -91,22 +56,6 @@ export const MaintenanceBanner = ({ ) } -export const MaintenanceWarningMessages = () => { - return ( - <> - {PAUSED_CHAINS.map((event) => { - return ( - - ) - })} - - ) -} - export const MaintenanceWarningMessage = ({ startDate, endDate, @@ -148,20 +97,6 @@ export const MaintenanceWarningMessage = ({ return null } -/** - * Hook that maps through PAUSED_CHAINS to apply the single chain countdown progress logic to each. - * @returns Array of objects containing maintenance status and components for each paused chain. - */ -export const useMaintenanceCountdownProgresses = () => { - return PAUSED_CHAINS.map((event) => { - return useMaintenanceCountdownProgress({ - startDate: event.startTime, - endDate: event.endTime, - pausedChains: event.pausedChains, - }) - }) -} - export const useMaintenanceCountdownProgress = ({ startDate, endDate, @@ -209,3 +144,70 @@ export const useMaintenanceCountdownProgress = ({ const isChainIncluded = (chainList: number[], hasChains: number[]) => { return hasChains.some((chainId) => chainList.includes(chainId)) } + +/** Aggregators */ + +const PAUSED_CHAINS = [ + { + id: 'optimism-chain-pause', + pausedChains: [OPTIMISM.id], + startTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)), + endTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)), + bannerStartTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)), + bannerEndTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)), + }, + { + id: 'base-chain-pause', + pausedChains: [BASE.id], + startTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)), + endTime: new Date(Date.UTC(2024, 2, 21, 17, 30, 0)), + bannerStartTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)), + bannerEndTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)), + }, +] + +export const MaintenanceBanners = () => { + return ( + <> + {PAUSED_CHAINS.map((event) => { + return ( + + ) + })} + + ) +} + +export const MaintenanceWarningMessages = () => { + return ( + <> + {PAUSED_CHAINS.map((event) => { + return ( + + ) + })} + + ) +} + +/** + * Hook that maps through PAUSED_CHAINS to apply the single chain countdown progress logic to each. + * @returns Array of objects containing maintenance status and components for each paused chain. + */ +export const useMaintenanceCountdownProgresses = () => { + return PAUSED_CHAINS.map((event) => { + return useMaintenanceCountdownProgress({ + startDate: event.startTime, + endDate: event.endTime, + pausedChains: event.pausedChains, + }) + }) +} From 87c041dab19f34ee496b905e852313d2e1ee4181 Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Thu, 21 Mar 2024 10:33:27 -0700 Subject: [PATCH 05/58] ChainPause type applied to enforce maintenance event structure, pass in component messages as a prop --- .../Events/template/MaintenanceEvent.tsx | 57 +++++++++++++------ 1 file changed, 39 insertions(+), 18 deletions(-) diff --git a/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx b/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx index ec90780592..3676ec3c6a 100644 --- a/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx +++ b/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx @@ -26,10 +26,12 @@ export const MaintenanceBanner = ({ id, startDate, endDate, + bannerMessage, }: { id: string startDate: Date endDate: Date + bannerMessage: any }) => { const { isComplete } = getCountdownTimeStatus( // MAINTENANCE_BANNERS_START, // Banner will automatically appear after start time @@ -43,13 +45,7 @@ export const MaintenanceBanner = ({ return ( -

- Bridging is paused until maintenance is complete. -

- - } + bannerContents={bannerMessage} startDate={startDate} endDate={endDate} /> @@ -60,10 +56,12 @@ export const MaintenanceWarningMessage = ({ startDate, endDate, pausedChains, + warningMessage, }: { startDate: Date endDate: Date pausedChains: number[] + warningMessage: any }) => { const { fromChainId, toChainId } = useBridgeState() @@ -83,15 +81,7 @@ export const MaintenanceWarningMessage = ({ if (isComplete) return null if (isWarningChain) { - return ( - -

Bridging is paused until maintenance is complete.

- - } - /> - ) + return } return null @@ -101,10 +91,12 @@ export const useMaintenanceCountdownProgress = ({ startDate, endDate, pausedChains, + progressBarMessage, }: { startDate: Date endDate: Date pausedChains: number[] + progressBarMessage: any }) => { const { fromChainId, toChainId } = useBridgeState() @@ -118,7 +110,7 @@ export const useMaintenanceCountdownProgress = ({ isPending: isMaintenancePending, EventCountdownProgressBar: MaintenanceCountdownProgressBar, } = useEventCountdownProgressBar( - 'Maintenance in progress', + progressBarMessage, // MAINTENANCE_START_DATE, // Countdown Bar will automatically appear after start time // MAINTENANCE_END_DATE // Countdown Bar will automatically disappear when end time is reached startDate, @@ -147,7 +139,19 @@ const isChainIncluded = (chainList: number[], hasChains: number[]) => { /** Aggregators */ -const PAUSED_CHAINS = [ +interface ChainPause { + id: string + pausedChains: number[] + startTime: Date + endTime: Date + bannerStartTime: Date + bannerEndTime: Date + warningMessage: any + bannerMessage: any + progressBarMessage: any +} + +const PAUSED_CHAINS: ChainPause[] = [ { id: 'optimism-chain-pause', pausedChains: [OPTIMISM.id], @@ -155,6 +159,13 @@ const PAUSED_CHAINS = [ endTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)), bannerStartTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)), bannerEndTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)), + warningMessage: ( +

Optimism bridging is paused until maintenance is complete.

+ ), + bannerMessage: ( +

Optimism bridging is paused until maintenance is complete.

+ ), + progressBarMessage:

Optimism maintenance in progress

, }, { id: 'base-chain-pause', @@ -163,6 +174,13 @@ const PAUSED_CHAINS = [ endTime: new Date(Date.UTC(2024, 2, 21, 17, 30, 0)), bannerStartTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)), bannerEndTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)), + warningMessage: ( +

Base bridging is paused until maintenance is complete.

+ ), + bannerMessage: ( +

Base bridging is paused until maintenance is complete.

+ ), + progressBarMessage:

Base maintenance in progress

, }, ] @@ -173,6 +191,7 @@ export const MaintenanceBanners = () => { return ( @@ -191,6 +210,7 @@ export const MaintenanceWarningMessages = () => { startDate={event.startTime} endDate={event.endTime} pausedChains={event.pausedChains} + warningMessage={event.warningMessage} /> ) })} @@ -208,6 +228,7 @@ export const useMaintenanceCountdownProgresses = () => { startDate: event.startTime, endDate: event.endTime, pausedChains: event.pausedChains, + progressBarMessage: event.progressBarMessage, }) }) } From 98e2c04a901b75bbdeb09c8fbaf5da177a868c78 Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Thu, 21 Mar 2024 10:41:45 -0700 Subject: [PATCH 06/58] Working with multiple events --- .../Events/template/MaintenanceEvent.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx b/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx index 3676ec3c6a..82aa041d75 100644 --- a/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx +++ b/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx @@ -156,9 +156,9 @@ const PAUSED_CHAINS: ChainPause[] = [ id: 'optimism-chain-pause', pausedChains: [OPTIMISM.id], startTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)), - endTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)), + endTime: new Date(Date.UTC(2024, 2, 21, 17, 40, 0)), bannerStartTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)), - bannerEndTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)), + bannerEndTime: new Date(Date.UTC(2024, 2, 21, 17, 41, 0)), warningMessage: (

Optimism bridging is paused until maintenance is complete.

), @@ -168,12 +168,12 @@ const PAUSED_CHAINS: ChainPause[] = [ progressBarMessage:

Optimism maintenance in progress

, }, { - id: 'base-chain-pause', + id: 'optimism-chain-pause-2', pausedChains: [BASE.id], - startTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)), - endTime: new Date(Date.UTC(2024, 2, 21, 17, 30, 0)), - bannerStartTime: new Date(Date.UTC(2024, 2, 21, 17, 0, 0)), - bannerEndTime: new Date(Date.UTC(2024, 2, 21, 18, 0, 0)), + startTime: new Date(Date.UTC(2024, 2, 21, 17, 41, 0)), + endTime: new Date(Date.UTC(2024, 2, 21, 17, 42, 0)), + bannerStartTime: new Date(Date.UTC(2024, 2, 21, 17, 40, 0)), + bannerEndTime: new Date(Date.UTC(2024, 2, 21, 17, 43, 0)), warningMessage: (

Base bridging is paused until maintenance is complete.

), From 8a346cc954523992ac8511961b14d8599a3dfba4 Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Thu, 21 Mar 2024 10:47:59 -0700 Subject: [PATCH 07/58] Add dev comments to MaintenanceBanner; refactor --- .../Maintenance/MaintenanceBanner.tsx | 36 ++++++++++++++++++ .../template => }/MaintenanceEvent.tsx | 37 ++----------------- packages/synapse-interface/pages/index.tsx | 6 +-- .../pages/state-managed-bridge/index.tsx | 2 +- 4 files changed, 42 insertions(+), 39 deletions(-) create mode 100644 packages/synapse-interface/components/Maintenance/MaintenanceBanner.tsx rename packages/synapse-interface/components/Maintenance/{Events/template => }/MaintenanceEvent.tsx (87%) diff --git a/packages/synapse-interface/components/Maintenance/MaintenanceBanner.tsx b/packages/synapse-interface/components/Maintenance/MaintenanceBanner.tsx new file mode 100644 index 0000000000..e151a24ab8 --- /dev/null +++ b/packages/synapse-interface/components/Maintenance/MaintenanceBanner.tsx @@ -0,0 +1,36 @@ +import { useIntervalTimer } from '@/utils/hooks/useIntervalTimer' +import { getCountdownTimeStatus } from './EventCountdownProgressBar' +import { AnnouncementBanner } from './AnnouncementBanner' + +/** + * Creates an automatic Annoucement Banner based on start/end times. + * + * @param {string} id - Unique id that determines instance of banner to track in browser + * @param {Date} startDate - Date that automatically triggers displaying banner + * @param {Date} endDate - Date that automatically triggers removing banner + * @param {any} bannerMessage - Allow for flexibility when constructing banner message + */ +export const MaintenanceBanner = ({ + id, + startDate, + endDate, + bannerMessage, +}: { + id: string + startDate: Date + endDate: Date + bannerMessage: any +}) => { + const { isComplete } = getCountdownTimeStatus(startDate, endDate) + + useIntervalTimer(60000, isComplete) + + return ( + + ) +} diff --git a/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx b/packages/synapse-interface/components/Maintenance/MaintenanceEvent.tsx similarity index 87% rename from packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx rename to packages/synapse-interface/components/Maintenance/MaintenanceEvent.tsx index 82aa041d75..b33608886c 100644 --- a/packages/synapse-interface/components/Maintenance/Events/template/MaintenanceEvent.tsx +++ b/packages/synapse-interface/components/Maintenance/MaintenanceEvent.tsx @@ -1,12 +1,11 @@ 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' +} from './EventCountdownProgressBar' +import { WarningMessage } from '../Warning' +import { MaintenanceBanner } from './MaintenanceBanner' /** * Edit this file for Website Maintenance, components already placed on Bridge page @@ -22,36 +21,6 @@ const MAINTENANCE_START_DATE = new Date(Date.UTC(2024, 2, 20, 20, 20, 0)) /** Ends Banner, Countdown Progress Bar, Bridge Warning Message, Bridge Pause */ const MAINTENANCE_END_DATE = new Date(Date.UTC(2024, 2, 20, 22, 0, 0)) -export const MaintenanceBanner = ({ - id, - startDate, - endDate, - bannerMessage, -}: { - id: string - startDate: Date - endDate: Date - bannerMessage: any -}) => { - const { isComplete } = getCountdownTimeStatus( - // MAINTENANCE_BANNERS_START, // Banner will automatically appear after start time - // MAINTENANCE_END_DATE // Banner will automatically disappear when end time is reached - startDate, - endDate - ) - - useIntervalTimer(60000, isComplete) - - return ( - - ) -} - export const MaintenanceWarningMessage = ({ startDate, endDate, diff --git a/packages/synapse-interface/pages/index.tsx b/packages/synapse-interface/pages/index.tsx index 9fcd49f6e0..75249f0724 100644 --- a/packages/synapse-interface/pages/index.tsx +++ b/packages/synapse-interface/pages/index.tsx @@ -3,10 +3,8 @@ import { Portfolio } from '@/components/Portfolio/Portfolio' import { LandingPageWrapper } from '@/components/layouts/LandingPageWrapper' import ReactGA from 'react-ga' import useSyncQueryParamsWithBridgeState from '@/utils/hooks/useSyncQueryParamsWithBridgeState' -import { - MaintenanceBanner, - MaintenanceBanners, -} from '@/components/Maintenance/Events/template/MaintenanceEvent' +import { MaintenanceBanners } from '@/components/Maintenance/MaintenanceEvent' +import { MaintenanceBanner } from '@/components/Maintenance/MaintenanceBanner' // 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 diff --git a/packages/synapse-interface/pages/state-managed-bridge/index.tsx b/packages/synapse-interface/pages/state-managed-bridge/index.tsx index 43d2126c1b..b7ec1d6b96 100644 --- a/packages/synapse-interface/pages/state-managed-bridge/index.tsx +++ b/packages/synapse-interface/pages/state-managed-bridge/index.tsx @@ -90,7 +90,7 @@ import { MaintenanceWarningMessages, useMaintenanceCountdownProgress, useMaintenanceCountdownProgresses, -} from '@/components/Maintenance/Events/template/MaintenanceEvent' +} from '@/components/Maintenance/MaintenanceEvent' const StateManagedBridge = () => { const { address } = useAccount() From deda821b7c76cd57136234f2af812f1f068ed6c5 Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Thu, 21 Mar 2024 10:50:48 -0700 Subject: [PATCH 08/58] Add dev comments for MaintenanceWarningMessage; refactor --- .../Maintenance/MaintenanceBanner.tsx | 2 +- .../Maintenance/MaintenanceEvent.tsx | 44 ++----------------- .../Maintenance/MaintenanceWarningMessage.tsx | 38 ++++++++++++++++ .../pages/state-managed-bridge/index.tsx | 2 +- 4 files changed, 43 insertions(+), 43 deletions(-) create mode 100644 packages/synapse-interface/components/Maintenance/MaintenanceWarningMessage.tsx diff --git a/packages/synapse-interface/components/Maintenance/MaintenanceBanner.tsx b/packages/synapse-interface/components/Maintenance/MaintenanceBanner.tsx index e151a24ab8..e5608470e0 100644 --- a/packages/synapse-interface/components/Maintenance/MaintenanceBanner.tsx +++ b/packages/synapse-interface/components/Maintenance/MaintenanceBanner.tsx @@ -3,7 +3,7 @@ import { getCountdownTimeStatus } from './EventCountdownProgressBar' import { AnnouncementBanner } from './AnnouncementBanner' /** - * Creates an automatic Annoucement Banner based on start/end times. + * Creates an Annoucement Banner that automatically appears/disappears based on start/end times. * * @param {string} id - Unique id that determines instance of banner to track in browser * @param {Date} startDate - Date that automatically triggers displaying banner diff --git a/packages/synapse-interface/components/Maintenance/MaintenanceEvent.tsx b/packages/synapse-interface/components/Maintenance/MaintenanceEvent.tsx index b33608886c..d683496ac3 100644 --- a/packages/synapse-interface/components/Maintenance/MaintenanceEvent.tsx +++ b/packages/synapse-interface/components/Maintenance/MaintenanceEvent.tsx @@ -1,11 +1,8 @@ import { useBridgeState } from '@/slices/bridge/hooks' import { OPTIMISM, BASE } from '@/constants/chains/master' -import { - useEventCountdownProgressBar, - getCountdownTimeStatus, -} from './EventCountdownProgressBar' -import { WarningMessage } from '../Warning' +import { useEventCountdownProgressBar } from './EventCountdownProgressBar' import { MaintenanceBanner } from './MaintenanceBanner' +import { MaintenanceWarningMessage } from './MaintenanceWarningMessage' /** * Edit this file for Website Maintenance, components already placed on Bridge page @@ -21,41 +18,6 @@ const MAINTENANCE_START_DATE = new Date(Date.UTC(2024, 2, 20, 20, 20, 0)) /** Ends Banner, Countdown Progress Bar, Bridge Warning Message, Bridge Pause */ const MAINTENANCE_END_DATE = new Date(Date.UTC(2024, 2, 20, 22, 0, 0)) -export const MaintenanceWarningMessage = ({ - startDate, - endDate, - pausedChains, - warningMessage, -}: { - startDate: Date - endDate: Date - pausedChains: number[] - warningMessage: any -}) => { - const { fromChainId, toChainId } = useBridgeState() - - const isWarningChain = isChainIncluded( - [fromChainId, toChainId], - // [OPTIMISM.id, BASE.id] // Update for Chains to show warning on - pausedChains - ) - - const { isComplete } = getCountdownTimeStatus( - // MAINTENANCE_BANNERS_START, // Banner will automatically appear after start time - // MAINTENANCE_END_DATE // Banner will automatically disappear when end time is reached - startDate, - endDate - ) - - if (isComplete) return null - - if (isWarningChain) { - return - } - - return null -} - export const useMaintenanceCountdownProgress = ({ startDate, endDate, @@ -102,7 +64,7 @@ export const useMaintenanceCountdownProgress = ({ * @param {number[]} hasChains - The array of chain IDs to find within `checkChains`. * @returns {boolean} - True if any chain ID from `hasChains` is found in `checkChains`, otherwise false. */ -const isChainIncluded = (chainList: number[], hasChains: number[]) => { +export const isChainIncluded = (chainList: number[], hasChains: number[]) => { return hasChains.some((chainId) => chainList.includes(chainId)) } diff --git a/packages/synapse-interface/components/Maintenance/MaintenanceWarningMessage.tsx b/packages/synapse-interface/components/Maintenance/MaintenanceWarningMessage.tsx new file mode 100644 index 0000000000..5268ffcfa5 --- /dev/null +++ b/packages/synapse-interface/components/Maintenance/MaintenanceWarningMessage.tsx @@ -0,0 +1,38 @@ +import { useBridgeState } from '@/slices/bridge/hooks' +import { getCountdownTimeStatus } from './EventCountdownProgressBar' +import { WarningMessage } from '../Warning' +import { isChainIncluded } from './MaintenanceEvent' + +/** + * Creates a Warning Message based on that automatically appears/disappears based on start/end times. + * + * @param {Date} startDate - Date that automatically triggers displaying banner + * @param {Date} endDate - Date that automatically triggers removing banner + * @param {number[]} pausedChains - List of chain ids to display warning messages for, based on User selected from/to chains + * @param {any} warningMessage - Allow for flexibility when constructing warning message + */ +export const MaintenanceWarningMessage = ({ + startDate, + endDate, + pausedChains, + warningMessage, +}: { + startDate: Date + endDate: Date + pausedChains: number[] + warningMessage: any +}) => { + const { fromChainId, toChainId } = useBridgeState() + + const isWarningChain = isChainIncluded([fromChainId, toChainId], pausedChains) + + const { isComplete } = getCountdownTimeStatus(startDate, endDate) + + if (isComplete) return null + + if (isWarningChain) { + return + } + + return null +} diff --git a/packages/synapse-interface/pages/state-managed-bridge/index.tsx b/packages/synapse-interface/pages/state-managed-bridge/index.tsx index b7ec1d6b96..a8e1b01e94 100644 --- a/packages/synapse-interface/pages/state-managed-bridge/index.tsx +++ b/packages/synapse-interface/pages/state-managed-bridge/index.tsx @@ -86,11 +86,11 @@ import { import { isTransactionReceiptError } from '@/utils/isTransactionReceiptError' import { SwitchButton } from '@/components/buttons/SwitchButton' import { - MaintenanceWarningMessage, MaintenanceWarningMessages, useMaintenanceCountdownProgress, useMaintenanceCountdownProgresses, } from '@/components/Maintenance/MaintenanceEvent' +import { MaintenanceWarningMessage } from '@/components/Maintenance/MaintenanceWarningMessage' const StateManagedBridge = () => { const { address } = useAccount() From 56464a63e97c226321c5efae6c749746c53d84e0 Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Thu, 21 Mar 2024 10:56:19 -0700 Subject: [PATCH 09/58] Dev comments --- .../Maintenance/MaintenanceBanner.tsx | 17 ++++--- .../Maintenance/MaintenanceEvent.tsx | 42 +---------------- .../Maintenance/MaintenanceWarningMessage.tsx | 14 +++--- .../useMaintenanceCountdownProgress.tsx | 45 +++++++++++++++++++ .../pages/state-managed-bridge/index.tsx | 2 +- 5 files changed, 68 insertions(+), 52 deletions(-) create mode 100644 packages/synapse-interface/components/Maintenance/useMaintenanceCountdownProgress.tsx diff --git a/packages/synapse-interface/components/Maintenance/MaintenanceBanner.tsx b/packages/synapse-interface/components/Maintenance/MaintenanceBanner.tsx index e5608470e0..f5986a8465 100644 --- a/packages/synapse-interface/components/Maintenance/MaintenanceBanner.tsx +++ b/packages/synapse-interface/components/Maintenance/MaintenanceBanner.tsx @@ -3,12 +3,19 @@ import { getCountdownTimeStatus } from './EventCountdownProgressBar' import { AnnouncementBanner } from './AnnouncementBanner' /** - * Creates an Annoucement Banner that automatically appears/disappears based on start/end times. + * Component for creating and managing a maintenance announcement banner. This banner automatically + * appears and disappears based on specified start and end times, providing users with timely information + * about maintenance events. * - * @param {string} id - Unique id that determines instance of banner to track in browser - * @param {Date} startDate - Date that automatically triggers displaying banner - * @param {Date} endDate - Date that automatically triggers removing banner - * @param {any} bannerMessage - Allow for flexibility when constructing banner message + * @param {string} id - A unique identifier for the banner instance. This is used to track the banner's state + * in the browser and avoid conflicts with other instances. + * @param {Date} startDate - The starting date and time when the banner should become visible to users. + * This is the point at which the maintenance is considered to begin. + * @param {Date} endDate - The ending date and time when the banner should be removed or hidden from view. + * This corresponds to the end of the maintenance period. + * @param {any} bannerMessage - The content to be displayed within the banner. This parameter allows for + * flexibility in the message's structure and content, which can include text, + * links, or even React components. */ export const MaintenanceBanner = ({ id, diff --git a/packages/synapse-interface/components/Maintenance/MaintenanceEvent.tsx b/packages/synapse-interface/components/Maintenance/MaintenanceEvent.tsx index d683496ac3..213be9235c 100644 --- a/packages/synapse-interface/components/Maintenance/MaintenanceEvent.tsx +++ b/packages/synapse-interface/components/Maintenance/MaintenanceEvent.tsx @@ -1,8 +1,7 @@ -import { useBridgeState } from '@/slices/bridge/hooks' import { OPTIMISM, BASE } from '@/constants/chains/master' -import { useEventCountdownProgressBar } from './EventCountdownProgressBar' import { MaintenanceBanner } from './MaintenanceBanner' import { MaintenanceWarningMessage } from './MaintenanceWarningMessage' +import { useMaintenanceCountdownProgress } from './useMaintenanceCountdownProgress' /** * Edit this file for Website Maintenance, components already placed on Bridge page @@ -18,45 +17,6 @@ const MAINTENANCE_START_DATE = new Date(Date.UTC(2024, 2, 20, 20, 20, 0)) /** Ends Banner, Countdown Progress Bar, Bridge Warning Message, Bridge Pause */ const MAINTENANCE_END_DATE = new Date(Date.UTC(2024, 2, 20, 22, 0, 0)) -export const useMaintenanceCountdownProgress = ({ - startDate, - endDate, - pausedChains, - progressBarMessage, -}: { - startDate: Date - endDate: Date - pausedChains: number[] - progressBarMessage: any -}) => { - const { fromChainId, toChainId } = useBridgeState() - - const isCurrentChain = isChainIncluded( - [fromChainId, toChainId], - // [OPTIMISM.id, BASE.id] // Update for Chains to show maintenance on - pausedChains - ) - - const { - isPending: isMaintenancePending, - EventCountdownProgressBar: MaintenanceCountdownProgressBar, - } = useEventCountdownProgressBar( - progressBarMessage, - // MAINTENANCE_START_DATE, // Countdown Bar will automatically appear after start time - // MAINTENANCE_END_DATE // Countdown Bar will automatically disappear when end time is reached - startDate, - endDate - ) - - return { - isMaintenancePending, - isCurrentChainDisabled: isCurrentChain && isMaintenancePending, // Used to pause Bridge - MaintenanceCountdownProgressBar: isCurrentChain - ? MaintenanceCountdownProgressBar - : null, - } -} - /** * Checks if any of the chain IDs in `hasChains` are found within the `chainList` array. * diff --git a/packages/synapse-interface/components/Maintenance/MaintenanceWarningMessage.tsx b/packages/synapse-interface/components/Maintenance/MaintenanceWarningMessage.tsx index 5268ffcfa5..68b6a69db9 100644 --- a/packages/synapse-interface/components/Maintenance/MaintenanceWarningMessage.tsx +++ b/packages/synapse-interface/components/Maintenance/MaintenanceWarningMessage.tsx @@ -4,12 +4,16 @@ import { WarningMessage } from '../Warning' import { isChainIncluded } from './MaintenanceEvent' /** - * Creates a Warning Message based on that automatically appears/disappears based on start/end times. + * This component displays a warning message during a specified maintenance window for selected blockchain chains. + * It checks if the current chain selected by the user is within the paused chains and if the current time is within + * the maintenance window. If so, it displays a custom warning message. * - * @param {Date} startDate - Date that automatically triggers displaying banner - * @param {Date} endDate - Date that automatically triggers removing banner - * @param {number[]} pausedChains - List of chain ids to display warning messages for, based on User selected from/to chains - * @param {any} warningMessage - Allow for flexibility when constructing warning message + * @param {Date} startDate - The starting date and time when the warning message should begin appearing. + * @param {Date} endDate - The ending date and time when the warning message should stop appearing. + * @param {number[]} pausedChains - An array of chain IDs that the warning message applies to. The message will + * only appear if the user's current from or to chain is in this list. + * @param {any} warningMessage - The content of the warning message to be displayed. This allows for flexibility + * in the message's structure and content. */ export const MaintenanceWarningMessage = ({ startDate, diff --git a/packages/synapse-interface/components/Maintenance/useMaintenanceCountdownProgress.tsx b/packages/synapse-interface/components/Maintenance/useMaintenanceCountdownProgress.tsx new file mode 100644 index 0000000000..1576d4feab --- /dev/null +++ b/packages/synapse-interface/components/Maintenance/useMaintenanceCountdownProgress.tsx @@ -0,0 +1,45 @@ +import { useBridgeState } from '@/slices/bridge/hooks' +import { useEventCountdownProgressBar } from './EventCountdownProgressBar' +import { isChainIncluded } from './MaintenanceEvent' + +/** + * A custom hook that provides logic for showing a countdown progress bar and determining if the bridge + * should be paused based on the current chain and a maintenance schedule. + * + * @param {Date} startDate - The start date and time for the maintenance event. + * @param {Date} endDate - The end date and time for the maintenance event. + * @param {number[]} pausedChains - An array of chain IDs for which the bridge should be paused during the maintenance event. + * @param {any} progressBarMessage - The message or content to display in the countdown progress bar. + * @returns An object containing: + * - isMaintenancePending: A boolean indicating if the maintenance is currently pending (i.e., ongoing). + * - isCurrentChainDisabled: A boolean indicating if the current chain selected by the user is affected by the maintenance and should therefore be considered "disabled" or paused. + * - MaintenanceCountdownProgressBar: A component (or null) that renders the countdown progress bar if the current chain is affected by the maintenance. + */ +export const useMaintenanceCountdownProgress = ({ + startDate, + endDate, + pausedChains, + progressBarMessage, +}: { + startDate: Date + endDate: Date + pausedChains: number[] + progressBarMessage: any +}) => { + const { fromChainId, toChainId } = useBridgeState() + + const isCurrentChain = isChainIncluded([fromChainId, toChainId], pausedChains) + + const { + isPending: isMaintenancePending, + EventCountdownProgressBar: MaintenanceCountdownProgressBar, + } = useEventCountdownProgressBar(progressBarMessage, startDate, endDate) + + return { + isMaintenancePending, + isCurrentChainDisabled: isCurrentChain && isMaintenancePending, // Used to pause Bridge + MaintenanceCountdownProgressBar: isCurrentChain + ? MaintenanceCountdownProgressBar + : null, + } +} diff --git a/packages/synapse-interface/pages/state-managed-bridge/index.tsx b/packages/synapse-interface/pages/state-managed-bridge/index.tsx index a8e1b01e94..b3b6780f9b 100644 --- a/packages/synapse-interface/pages/state-managed-bridge/index.tsx +++ b/packages/synapse-interface/pages/state-managed-bridge/index.tsx @@ -87,9 +87,9 @@ import { isTransactionReceiptError } from '@/utils/isTransactionReceiptError' import { SwitchButton } from '@/components/buttons/SwitchButton' import { MaintenanceWarningMessages, - useMaintenanceCountdownProgress, useMaintenanceCountdownProgresses, } from '@/components/Maintenance/MaintenanceEvent' +import { useMaintenanceCountdownProgress } from '@/components/Maintenance/useMaintenanceCountdownProgress' import { MaintenanceWarningMessage } from '@/components/Maintenance/MaintenanceWarningMessage' const StateManagedBridge = () => { From 324ff098f32fa1a6e027be2ed2e791361e7a167b Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Thu, 21 Mar 2024 11:02:10 -0700 Subject: [PATCH 10/58] Organize components --- .../Events/example/EcotoneForkUpgrade.tsx | 6 +++--- .../{MaintenanceEvent.tsx => Maintenance.tsx} | 20 +++---------------- .../{ => components}/AnnouncementBanner.tsx | 2 +- .../EventCountdownProgressBar.tsx | 0 .../LinearAnimatedProgressBar.tsx | 9 ++++++--- .../{ => components}/MaintenanceBanner.tsx | 0 .../MaintenanceWarningMessage.tsx | 4 ++-- .../useMaintenanceCountdownProgress.tsx | 2 +- packages/synapse-interface/pages/index.tsx | 4 ++-- .../pages/state-managed-bridge/index.tsx | 6 +++--- 10 files changed, 21 insertions(+), 32 deletions(-) rename packages/synapse-interface/components/Maintenance/{MaintenanceEvent.tsx => Maintenance.tsx} (78%) rename packages/synapse-interface/components/Maintenance/{ => components}/AnnouncementBanner.tsx (95%) rename packages/synapse-interface/components/Maintenance/{ => components}/EventCountdownProgressBar.tsx (100%) rename packages/synapse-interface/components/Maintenance/{ => components}/LinearAnimatedProgressBar.tsx (88%) rename packages/synapse-interface/components/Maintenance/{ => components}/MaintenanceBanner.tsx (100%) rename packages/synapse-interface/components/Maintenance/{ => components}/MaintenanceWarningMessage.tsx (94%) rename packages/synapse-interface/components/Maintenance/{ => components}/useMaintenanceCountdownProgress.tsx (97%) diff --git a/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx index f8da18a9e7..bc39a0d1f6 100644 --- a/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx +++ b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx @@ -4,13 +4,13 @@ import { OPTIMISM, BASE } from '@/constants/chains/master' import { useEventCountdownProgressBar, getCountdownTimeStatus, -} from '../../EventCountdownProgressBar' -import { AnnouncementBanner } from '../../AnnouncementBanner' +} from '../../components/EventCountdownProgressBar' +import { AnnouncementBanner } from '../../components/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 + * Singular automated annoucement banners and event countdown timer bars * with the ability to pause Bridge by selected chain ids */ diff --git a/packages/synapse-interface/components/Maintenance/MaintenanceEvent.tsx b/packages/synapse-interface/components/Maintenance/Maintenance.tsx similarity index 78% rename from packages/synapse-interface/components/Maintenance/MaintenanceEvent.tsx rename to packages/synapse-interface/components/Maintenance/Maintenance.tsx index 213be9235c..2874fde352 100644 --- a/packages/synapse-interface/components/Maintenance/MaintenanceEvent.tsx +++ b/packages/synapse-interface/components/Maintenance/Maintenance.tsx @@ -1,21 +1,7 @@ import { OPTIMISM, BASE } from '@/constants/chains/master' -import { MaintenanceBanner } from './MaintenanceBanner' -import { MaintenanceWarningMessage } from './MaintenanceWarningMessage' -import { useMaintenanceCountdownProgress } from './useMaintenanceCountdownProgress' - -/** - * Edit this file for Website Maintenance, components already placed on Bridge page - * - * If require multiple maintenance events, create another file using this file as a template - * and add another instance of components on relevant pages - */ - -/** Banner start time */ -const MAINTENANCE_BANNERS_START = new Date(Date.UTC(2024, 2, 20, 20, 20, 0)) -/** Countdown Progress Bar, Bridge Warning Message + Bridge Pause start time */ -const MAINTENANCE_START_DATE = new Date(Date.UTC(2024, 2, 20, 20, 20, 0)) -/** Ends Banner, Countdown Progress Bar, Bridge Warning Message, Bridge Pause */ -const MAINTENANCE_END_DATE = new Date(Date.UTC(2024, 2, 20, 22, 0, 0)) +import { MaintenanceBanner } from './components/MaintenanceBanner' +import { MaintenanceWarningMessage } from './components/MaintenanceWarningMessage' +import { useMaintenanceCountdownProgress } from './components/useMaintenanceCountdownProgress' /** * Checks if any of the chain IDs in `hasChains` are found within the `chainList` array. diff --git a/packages/synapse-interface/components/Maintenance/AnnouncementBanner.tsx b/packages/synapse-interface/components/Maintenance/components/AnnouncementBanner.tsx similarity index 95% rename from packages/synapse-interface/components/Maintenance/AnnouncementBanner.tsx rename to packages/synapse-interface/components/Maintenance/components/AnnouncementBanner.tsx index 046cc0426c..6edce9dce8 100644 --- a/packages/synapse-interface/components/Maintenance/AnnouncementBanner.tsx +++ b/packages/synapse-interface/components/Maintenance/components/AnnouncementBanner.tsx @@ -54,7 +54,7 @@ export const AnnouncementBanner = ({ if (!showBanner || !hasMounted || !isStarted || isComplete) return null return ( -
+