From ab109cefdc1709f49f8b089bdc37dae3dd25e460 Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Thu, 14 Mar 2024 09:50:41 -0700 Subject: [PATCH 01/11] Remove upgrade components from app --- .../Maintenance/EthDencunUpgrade.tsx | 30 ------------- .../Maintenance/Events/EcotoneForkUpgrade.tsx | 9 ++++ packages/synapse-interface/pages/index.tsx | 4 -- .../pages/state-managed-bridge/index.tsx | 42 +------------------ 4 files changed, 10 insertions(+), 75 deletions(-) delete mode 100644 packages/synapse-interface/components/Maintenance/EthDencunUpgrade.tsx diff --git a/packages/synapse-interface/components/Maintenance/EthDencunUpgrade.tsx b/packages/synapse-interface/components/Maintenance/EthDencunUpgrade.tsx deleted file mode 100644 index 45c40d6c15..0000000000 --- a/packages/synapse-interface/components/Maintenance/EthDencunUpgrade.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { AnnouncementBanner } from './AnnouncementBanner' - -/** - * Start: 15 min prior to Eth Dencun Upgrade Time @ 3/13/24 13:55 UTC - * End: 30 min after start of Eth Decun Upgrade Time - */ -export const ETH_DENCUN_BANNER_START = new Date( - Date.UTC(2024, 2, 13, 13, 20, 0) -) -export const ETH_DENCUN_START_DATE = new Date(Date.UTC(2024, 2, 13, 13, 40, 0)) -export const ETH_DENCUN_END_DATE = new Date(Date.UTC(2024, 2, 13, 14, 30, 0)) - -export const EthDencunUpgradeBanner = () => { - return ( - -
- Synapse Bridge is upgrading ahead of the Ethereum Dencun upgrade - (March 13, 13:55 UTC, 9:55 EST). -
-
Will be back online shortly ahead of the network upgrade.
- - } - startDate={ETH_DENCUN_BANNER_START} - endDate={ETH_DENCUN_END_DATE} - /> - ) -} diff --git a/packages/synapse-interface/components/Maintenance/Events/EcotoneForkUpgrade.tsx b/packages/synapse-interface/components/Maintenance/Events/EcotoneForkUpgrade.tsx index c2dd3dd355..096dc05d26 100644 --- a/packages/synapse-interface/components/Maintenance/Events/EcotoneForkUpgrade.tsx +++ b/packages/synapse-interface/components/Maintenance/Events/EcotoneForkUpgrade.tsx @@ -68,6 +68,15 @@ export const EcotoneForkWarningMessage = () => { } else return null } +/** + * Example of how to use hook: + * + * const { + isEcotoneForkUpgradePending, + isCurrentChainDisabled: isEcotoneUpgradeChainsDisabled, + EcotoneForkCountdownProgressBar, + } = useEcotoneForkCountdownProgress() + */ export const useEcotoneForkCountdownProgress = () => { const { fromChainId, toChainId } = useBridgeState() diff --git a/packages/synapse-interface/pages/index.tsx b/packages/synapse-interface/pages/index.tsx index 79242cace6..b23e885991 100644 --- a/packages/synapse-interface/pages/index.tsx +++ b/packages/synapse-interface/pages/index.tsx @@ -3,8 +3,6 @@ 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' // 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 @@ -21,8 +19,6 @@ const Home = () => { data-test-id="bridge-page" className="relative z-0 flex-1 h-full overflow-y-auto focus:outline-none" > - -
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} />
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 02/11] 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 From 7ad2a5ce561d8cb42fbbc91962c32d44f4f5c39b Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Fri, 15 Mar 2024 11:20:17 -0700 Subject: [PATCH 03/11] Add comments for example of hook --- .../Maintenance/Events/example/EcotoneForkUpgrade.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx index 3a90dec32f..a3a374fcb7 100644 --- a/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx +++ b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx @@ -76,12 +76,19 @@ export const EcotoneForkWarningMessage = () => { /** * 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() From 40e4aa855bc97d78175cae26118213cf1913259d Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Fri, 15 Mar 2024 11:21:33 -0700 Subject: [PATCH 04/11] Adjust comments --- .../Maintenance/Events/example/EcotoneForkUpgrade.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx index a3a374fcb7..f257b34393 100644 --- a/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx +++ b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx @@ -15,8 +15,8 @@ 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 + * 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) From 5bf36fdb0936c91c3e2a82f3b7844c104c7cc6c7 Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Fri, 15 Mar 2024 11:21:33 -0700 Subject: [PATCH 05/11] Adjust comments --- .../Maintenance/Events/example/EcotoneForkUpgrade.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx index a3a374fcb7..f257b34393 100644 --- a/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx +++ b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx @@ -15,8 +15,8 @@ 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 + * 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) From 5c237b0c3577583af9a0ce2dfd3914d5446b7478 Mon Sep 17 00:00:00 2001 From: Lawson Kight Date: Fri, 15 Mar 2024 11:49:44 -0700 Subject: [PATCH 06/11] annoucement banner visual tweaks --- .../Maintenance/AnnouncementBanner.tsx | 20 +++----------- .../Events/example/EcotoneForkUpgrade.tsx | 14 +++++----- packages/synapse-interface/pages/index.tsx | 26 +++++++++++-------- 3 files changed, 25 insertions(+), 35 deletions(-) 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 ( -
+
+

+ 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} diff --git a/packages/synapse-interface/pages/index.tsx b/packages/synapse-interface/pages/index.tsx index b23e885991..aabf660aaa 100644 --- a/packages/synapse-interface/pages/index.tsx +++ b/packages/synapse-interface/pages/index.tsx @@ -3,6 +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/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 @@ -14,17 +15,20 @@ const Home = () => { useSyncQueryParamsWithBridgeState() return ( - -
-
- - -
-
- + <> + + +
+
+ + +
+
+ + ) } From 963249d55c104b4799a618ef4074f5b1450e53ee Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Fri, 15 Mar 2024 11:54:21 -0700 Subject: [PATCH 07/11] Add comment to show where progress bar was last used --- .../Maintenance/Events/example/EcotoneForkUpgrade.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx index f257b34393..db27c79405 100644 --- a/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx +++ b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx @@ -75,6 +75,8 @@ export const EcotoneForkWarningMessage = () => { } /** + * Previously used in this location: https://github.com/synapsecns/sanguine/blob/f068eff5e86ec97e17fc8e703d7203c12fb7f733/packages/synapse-interface/pages/state-managed-bridge/index.tsx#L588 + * * Example of how to use hook: * import { useEcotoneForkCountdownProgress } = '@/components/Maintenance/Events/EcotoneForkUpgrade' * @@ -90,6 +92,7 @@ export const EcotoneForkWarningMessage = () => { {EcotoneForkCountdownProgressBar}
*/ + export const useEcotoneForkCountdownProgress = () => { const { fromChainId, toChainId } = useBridgeState() From 3bd790a3bb271e6ba0e63a5620d9b1d529ddeaec Mon Sep 17 00:00:00 2001 From: Lawson Kight Date: Fri, 15 Mar 2024 11:59:44 -0700 Subject: [PATCH 08/11] reset ECOTONE_FORK_END_DATE --- .../Maintenance/Events/example/EcotoneForkUpgrade.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx index b318aad928..243ddcac0d 100644 --- a/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx +++ b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx @@ -24,7 +24,7 @@ export const ECOTONE_FORK_BANNERS_START = new Date( 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, 24, 0, 25, 0)) +export const ECOTONE_FORK_END_DATE = new Date(Date.UTC(2024, 2, 14, 0, 25, 0)) export const EcotoneForkUpgradeBanner = () => { const { isComplete } = getCountdownTimeStatus( @@ -38,11 +38,11 @@ export const EcotoneForkUpgradeBanner = () => { + <> 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} From 87d3ff015d31aa8f350c6af652311ec73d697905 Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Fri, 15 Mar 2024 12:05:39 -0700 Subject: [PATCH 09/11] Add additional example code snippets --- .../Maintenance/Events/example/EcotoneForkUpgrade.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx index 058fbb445c..dd00fc4aa6 100644 --- a/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx +++ b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx @@ -26,6 +26,7 @@ export const ECOTONE_FORK_START_DATE = new Date( ) 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, @@ -74,6 +75,7 @@ export const EcotoneForkWarningMessage = () => { /** * 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' From 6c7f77897305d2129882b555a0106feacc0c72bf Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Fri, 15 Mar 2024 12:08:42 -0700 Subject: [PATCH 10/11] Reorder imports --- .../Maintenance/Events/example/EcotoneForkUpgrade.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx index dd00fc4aa6..6cf3033f05 100644 --- a/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx +++ b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx @@ -1,12 +1,12 @@ -import { AnnouncementBanner } from '../../AnnouncementBanner' -import { WarningMessage } from '../../../Warning' 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 { useIntervalTimer } from '@/utils/hooks/useIntervalTimer' +import { AnnouncementBanner } from '../../AnnouncementBanner' +import { WarningMessage } from '../../../Warning' /** * Leaving this file to serve as an example for how to create From a428e1cd9510b06eaf0e0a85549aa8a439fe7a56 Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Fri, 15 Mar 2024 18:56:58 -0700 Subject: [PATCH 11/11] Improve comments --- .../Events/example/EcotoneForkUpgrade.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx index 6cf3033f05..f8da18a9e7 100644 --- a/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx +++ b/packages/synapse-interface/components/Maintenance/Events/example/EcotoneForkUpgrade.tsx @@ -29,8 +29,8 @@ 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, - ECOTONE_FORK_END_DATE + 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) @@ -51,6 +51,12 @@ export const EcotoneForkUpgradeBanner = () => { ) } +/** + * 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() @@ -74,6 +80,9 @@ export const EcotoneForkWarningMessage = () => { } /** + * 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 * @@ -104,14 +113,14 @@ export const useEcotoneForkCountdownProgress = () => { EventCountdownProgressBar: EcotoneForkCountdownProgressBar, } = useEventCountdownProgressBar( 'Ecotone Fork upgrade in progress', - ECOTONE_FORK_START_DATE, - ECOTONE_FORK_END_DATE + 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, + (isChainOptimism || isChainBase) && isEcotoneForkUpgradePending, // Used to pause Bridge EcotoneForkCountdownProgressBar: isChainOptimism || isChainBase ? EcotoneForkCountdownProgressBar : null, }