From 8c6d300162e0a1b7f072f81af80027e5aec36d14 Mon Sep 17 00:00:00 2001 From: bigboydiamonds <57741810+bigboydiamonds@users.noreply.github.com> Date: Tue, 12 Mar 2024 23:36:50 -0700 Subject: [PATCH 01/29] FE Release 2024-03-12 (#2271) --- packages/synapse-interface/CHANGELOG.md | 27 ++ .../synapse-interface/components/Banner.tsx | 271 ------------------ .../Maintenance/AnnouncementBanner.tsx | 105 +++++++ .../Maintenance/EthDencunUpgrade.tsx | 30 ++ .../Maintenance/EventCountdownProgressBar.tsx | 91 ++++++ .../Maintenance/LinearAnimatedProgressBar.tsx | 111 +++++++ .../BridgeExchangeRateInfo.tsx | 2 +- .../BridgeTransactionButton.tsx | 22 +- packages/synapse-interface/package.json | 2 +- packages/synapse-interface/pages/index.tsx | 4 +- .../pages/state-managed-bridge/index.tsx | 139 +++++---- .../synapse-interface/public/blacklist.json | 5 +- services/rfq/relayer/reldb/db.go | 4 + .../reldb/quoterequeststatus_string.go | 5 +- services/rfq/relayer/service/chainindexer.go | 9 +- 15 files changed, 478 insertions(+), 349 deletions(-) delete mode 100644 packages/synapse-interface/components/Banner.tsx create mode 100644 packages/synapse-interface/components/Maintenance/AnnouncementBanner.tsx create mode 100644 packages/synapse-interface/components/Maintenance/EthDencunUpgrade.tsx create mode 100644 packages/synapse-interface/components/Maintenance/EventCountdownProgressBar.tsx create mode 100644 packages/synapse-interface/components/Maintenance/LinearAnimatedProgressBar.tsx diff --git a/packages/synapse-interface/CHANGELOG.md b/packages/synapse-interface/CHANGELOG.md index 9c47fa5258..96405d22bf 100644 --- a/packages/synapse-interface/CHANGELOG.md +++ b/packages/synapse-interface/CHANGELOG.md @@ -3,6 +3,33 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.7.0](https://github.com/synapsecns/sanguine/compare/@synapsecns/synapse-interface@0.6.2...@synapsecns/synapse-interface@0.7.0) (2024-03-13) + + +### Features + +* **synapse-interface:** maintenance notification components + eth dencun pause ([#2260](https://github.com/synapsecns/sanguine/issues/2260)) ([9ffae5b](https://github.com/synapsecns/sanguine/commit/9ffae5b640f904818fdd4b198c069042f05ffb29)) + + + + + +## [0.6.2](https://github.com/synapsecns/sanguine/compare/@synapsecns/synapse-interface@0.6.1...@synapsecns/synapse-interface@0.6.2) (2024-03-13) + +**Note:** Version bump only for package @synapsecns/synapse-interface + + + + + +## [0.6.1](https://github.com/synapsecns/sanguine/compare/@synapsecns/synapse-interface@0.6.0...@synapsecns/synapse-interface@0.6.1) (2024-03-13) + +**Note:** Version bump only for package @synapsecns/synapse-interface + + + + + # [0.6.0](https://github.com/synapsecns/sanguine/compare/@synapsecns/synapse-interface@0.5.1...@synapsecns/synapse-interface@0.6.0) (2024-03-12) diff --git a/packages/synapse-interface/components/Banner.tsx b/packages/synapse-interface/components/Banner.tsx deleted file mode 100644 index 4c9f1e567b..0000000000 --- a/packages/synapse-interface/components/Banner.tsx +++ /dev/null @@ -1,271 +0,0 @@ -import { useEffect, useState } from 'react' - -const BANNER_VERSION = '4' - -export const Banner = () => { - const [hasMounted, setHasMounted] = useState(false) - const [showBanner, setShowBanner] = useState(false) - - useEffect(() => { - setHasMounted(true) - }, []) - - useEffect(() => { - if (hasMounted) { - const storedBannerVersion = localStorage.getItem('bannerVersion') - const storedShowBanner = localStorage.getItem('showBanner') - - setShowBanner( - storedBannerVersion !== BANNER_VERSION || - storedShowBanner === null || - storedShowBanner === 'true' - ) - } - }, [hasMounted]) - - useEffect(() => { - if (hasMounted) { - localStorage.setItem('showBanner', showBanner.toString()) - localStorage.setItem('bannerVersion', BANNER_VERSION) - } - }, [showBanner, hasMounted]) - - if (!showBanner || !hasMounted) return null - - 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 new file mode 100644 index 0000000000..20272264af --- /dev/null +++ b/packages/synapse-interface/components/Maintenance/Events/MetisUpgrade.tsx @@ -0,0 +1,90 @@ +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, 13, 30, 0) +) + +export const MetisDowntimeBanner = () => { + const { isComplete } = getCountdownTimeStatus( + METIS_DOWNTIME_BANNERS_START, + METIS_DOWNTIME_END_DATE + ) + + useIntervalTimer(60000, isComplete) + + 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/LinearAnimatedProgressBar.tsx b/packages/synapse-interface/components/Maintenance/LinearAnimatedProgressBar.tsx index d2c90fbe7b..955b932afc 100644 --- a/packages/synapse-interface/components/Maintenance/LinearAnimatedProgressBar.tsx +++ b/packages/synapse-interface/components/Maintenance/LinearAnimatedProgressBar.tsx @@ -1,36 +1,33 @@ import { memo } from 'react' -import { getTimeMinutesBeforeNow } from '@/utils/time' +import { getCountdownTimeStatus } from './EventCountdownProgressBar' /** * @param id unique identifier for progress bar instance * @param startTime start time in unix seconds * @param endTime end time in unix seconds - * @param status progress status */ export const LinearAnimatedProgressBar = memo( ({ id, - startTime, - endTime, - status, + startDate, + endDate, }: { id: string - startTime: number - endTime: number - status: 'idle' | 'pending' | 'complete' + startDate: Date + endDate: Date }) => { - const currentTime = Math.floor(getTimeMinutesBeforeNow(0)) - const elapsedTimeInSeconds = currentTime - startTime - const remainingTimeInSeconds = endTime - currentTime - const totalTimeInSeconds = endTime - startTime + const { + totalTimeInSeconds, + totalTimeElapsedInSeconds, + totalTimeRemainingInSeconds, + isComplete, + } = getCountdownTimeStatus(startDate, endDate) const percentElapsed = Math.floor( - (elapsedTimeInSeconds / totalTimeInSeconds) * 100 + (totalTimeElapsedInSeconds / totalTimeInSeconds) * 100 ) - const isComplete = status === 'complete' - - let duration = isComplete ? 0.5 : remainingTimeInSeconds + let duration = isComplete ? 0.5 : totalTimeRemainingInSeconds const synapsePurple = 'hsl(265deg 100% 75%)' const tailwindGreen400 = 'rgb(74 222 128)' @@ -40,7 +37,7 @@ export const LinearAnimatedProgressBar = memo( return (