Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(synapse-interface): ecotone and metis upgrade downtime, remove eth dencun #2274

Merged
merged 38 commits into from
Mar 13, 2024
Merged
Show file tree
Hide file tree
Changes from 35 commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
8cff1f6
Add Ecotone Fork upgrade banner
bigboydiamonds Mar 13, 2024
0c35627
Add Metis Downtime banner
bigboydiamonds Mar 13, 2024
eeedf1a
Add Banner
bigboydiamonds Mar 13, 2024
5470be7
Remove ETH Dencun annoucements
bigboydiamonds Mar 13, 2024
65fffff
Add Ecotone Fork and Metis Upgrade Countdown Progress Bar to Bridge card
bigboydiamonds Mar 13, 2024
4f97a62
Implement Bridge pauses for Metis and Ecotone downtime
bigboydiamonds Mar 13, 2024
18b92c4
Bridge Pause feature working
bigboydiamonds Mar 13, 2024
c075165
Add Ecotone Fork upgrade message
bigboydiamonds Mar 13, 2024
b1d473a
Improve Ecotone Fork warning message
bigboydiamonds Mar 13, 2024
255b6bb
Update Metis downtime message
bigboydiamonds Mar 13, 2024
13a782e
Simplify comparisons
bigboydiamonds Mar 13, 2024
f08910b
Update ecotone warning message
bigboydiamonds Mar 13, 2024
7c731e7
Clean, prep for merge
bigboydiamonds Mar 13, 2024
7244cf7
Update id
bigboydiamonds Mar 13, 2024
d122c52
Update EcotoneFork end time
bigboydiamonds Mar 13, 2024
6747f56
Move Events into Events folder
bigboydiamonds Mar 13, 2024
02fac8c
Update Metis banner
bigboydiamonds Mar 13, 2024
32648a4
Update Ecotone Banner for EST
bigboydiamonds Mar 13, 2024
5ec2d6a
Set times
bigboydiamonds Mar 13, 2024
a0fa1da
Rm import
bigboydiamonds Mar 13, 2024
2f871fe
useEcotoneForkEventCountdownProgress to determine when to display pro…
bigboydiamonds Mar 13, 2024
3d7a544
useMetisDowntimeCountdownProgress
bigboydiamonds Mar 13, 2024
873bd02
Add isCurrentChainDisabled props
bigboydiamonds Mar 13, 2024
e5ed8ab
Replace isBridgePaused with chain disabled prop
bigboydiamonds Mar 13, 2024
5c8fa61
Clean
bigboydiamonds Mar 13, 2024
3fcf7cc
getCountdownTimeStatus
bigboydiamonds Mar 13, 2024
e7d0890
Clean
bigboydiamonds Mar 13, 2024
2258c15
calculateTimeUntilTarget to be used in getCountdownTimeStatus
bigboydiamonds Mar 13, 2024
c01d54e
Show hours remaining when over 90 min
bigboydiamonds Mar 13, 2024
3532923
Update var naming
bigboydiamonds Mar 13, 2024
e8fe6d4
Clean
bigboydiamonds Mar 13, 2024
54d7e35
Update id to prevent conflicts
bigboydiamonds Mar 13, 2024
c7525f0
Automatically show and remove Banner based on start / end time
bigboydiamonds Mar 13, 2024
eb03d7f
Refactor: AnnouncementBanner to use getCountdownTimeStatus
bigboydiamonds Mar 13, 2024
8f4865c
Automate Banners to appear / disappear after start / end time respect…
bigboydiamonds Mar 13, 2024
d6a31ab
Keep in sync interval timers across all event countdown components
bigboydiamonds Mar 13, 2024
e87ee6a
Add comments
bigboydiamonds Mar 13, 2024
f068eff
adjust timings
aureliusbtc Mar 13, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useState, useEffect } from 'react'
import { getCountdownTimeStatus } from './EventCountdownProgressBar'

/**
* Reusable Annoucement Banner with custom Start/End Time
Expand All @@ -18,15 +19,9 @@ export const AnnouncementBanner = ({
startDate: Date
endDate: Date
}) => {
const { isStarted, isComplete } = getCountdownTimeStatus(startDate, endDate)
const [hasMounted, setHasMounted] = useState(false)
const [showBanner, setShowBanner] = useState(false)

const currentDate = new Date()

const isStarted =
Math.floor(currentDate.getTime()) - Math.floor(startDate.getTime()) >= 0
const isComplete =
Math.floor(currentDate.getTime()) - Math.floor(endDate.getTime()) >= 0
const [showBanner, setShowBanner] = useState(true)

useEffect(() => {
setHasMounted(true)
Expand Down Expand Up @@ -54,11 +49,11 @@ export const AnnouncementBanner = ({
}
}, [showBanner, hasMounted])

if (!showBanner || !hasMounted || isComplete) return null
if (!showBanner || !hasMounted || !isStarted || isComplete) return null

return (
<div
className="flex items-center justify-center mx-auto lg:flex-row"
className="flex items-center justify-center mx-auto mb-3 lg:flex-row"
style={{
background:
'linear-gradient(310.65deg, rgba(172, 143, 255, 0.2) -17.9%, rgba(255, 0, 255, 0.2) 86.48%)',
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { useMemo } from 'react'
import { LinearAnimatedProgressBar } from './LinearAnimatedProgressBar'
import { useIntervalTimer } from '@/utils/hooks/useIntervalTimer'

Expand All @@ -11,18 +10,15 @@ export const useEventCountdownProgressBar = (
isComplete: boolean
EventCountdownProgressBar: JSX.Element
} => {
useIntervalTimer(60000)
const currentDate = new Date()
const currentTimeInSeconds = currentDate.getTime() / 1000
const startTimeInSeconds = Math.floor(startDate.getTime() / 1000)
const endTimeInSeconds = Math.floor(endDate.getTime() / 1000)
useIntervalTimer(30000)

const timeRemainingInSeconds = endTimeInSeconds - currentTimeInSeconds
const timeRemainingInMinutes = Math.ceil(timeRemainingInSeconds / 60)
const { totalTimeRemainingInMinutes, hoursRemaining, isComplete, isPending } =
getCountdownTimeStatus(startDate, endDate)

const isStarted = currentTimeInSeconds >= startTimeInSeconds
const isComplete = timeRemainingInSeconds <= 0
const isPending = isStarted && !isComplete
const timeRemaining: string =
totalTimeRemainingInMinutes > 90
? `${hoursRemaining}h`
: `${totalTimeRemainingInMinutes}min`

let status: 'idle' | 'pending' | 'complete'

Expand All @@ -40,27 +36,27 @@ export const useEventCountdownProgressBar = (
EventCountdownProgressBar: (
<EventCountdownProgressBar
eventLabel={eventLabel}
startTime={startTimeInSeconds}
endTime={endTimeInSeconds}
startDate={startDate}
endDate={endDate}
timeRemaining={timeRemaining}
status={status}
timeRemaining={timeRemainingInMinutes}
/>
),
}
}

export const EventCountdownProgressBar = ({
eventLabel,
startTime,
endTime,
status,
startDate,
endDate,
timeRemaining,
status,
}: {
eventLabel: string
startTime: number
endTime: number
startDate: Date
endDate: Date
timeRemaining: string
status: 'idle' | 'pending' | 'complete'
timeRemaining: number
}) => {
if (status === 'pending') {
return (
Expand All @@ -73,14 +69,13 @@ export const EventCountdownProgressBar = ({
>
<div className="flex justify-between px-3 py-2">
<div>{eventLabel}</div>
<div>{timeRemaining}m remaining</div>
<div>{timeRemaining} remaining</div>
</div>
<div className="px-1">
<LinearAnimatedProgressBar
id="linear-animated-progress-bar"
startTime={startTime}
endTime={endTime}
status={status}
id="event-countdown-progress-bar"
startDate={startDate}
endDate={endDate}
/>
</div>
</div>
Expand All @@ -89,3 +84,69 @@ export const EventCountdownProgressBar = ({
return null
}
}

export const getCountdownTimeStatus = (startDate: Date, endDate: Date) => {
const currentDate = new Date()

const { daysRemaining, hoursRemaining, minutesRemaining, secondsRemaining } =
calculateTimeUntilTarget(endDate)

const currentTimeInSeconds = Math.floor(currentDate.getTime() / 1000)

const startTimeInSeconds = Math.floor(startDate.getTime() / 1000)
const endTimeInSeconds = Math.floor(endDate.getTime() / 1000)
const totalTimeInSeconds = endTimeInSeconds - startTimeInSeconds

const totalTimeElapsedInSeconds = currentTimeInSeconds - startTimeInSeconds
const totalTimeRemainingInSeconds = endTimeInSeconds - currentTimeInSeconds
const totalTimeRemainingInMinutes = Math.ceil(
totalTimeRemainingInSeconds / 60
)

const isStarted = currentTimeInSeconds >= startTimeInSeconds
const isComplete = totalTimeRemainingInSeconds <= 0
const isPending = isStarted && !isComplete

return {
currentDate,
currentTimeInSeconds,
startTimeInSeconds,
endTimeInSeconds,
totalTimeInSeconds,
totalTimeElapsedInSeconds,
totalTimeRemainingInSeconds,
totalTimeRemainingInMinutes,
daysRemaining,
hoursRemaining,
minutesRemaining,
secondsRemaining,
isStarted,
isComplete,
isPending,
}
}

const calculateTimeUntilTarget = (targetDate: Date) => {
const currentDate = new Date()

const timeDifference = targetDate.getTime() - currentDate.getTime()

const isComplete = timeDifference <= 0

const daysRemaining = Math.floor(timeDifference / (1000 * 60 * 60 * 24))
const hoursRemaining = Math.floor(
(timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
)
const minutesRemaining = Math.floor(
(timeDifference % (1000 * 60 * 60)) / (1000 * 60)
)
const secondsRemaining = Math.floor((timeDifference % (1000 * 60)) / 1000)

return {
daysRemaining,
hoursRemaining,
minutesRemaining,
secondsRemaining,
isComplete,
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
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: 10 min prior to Ecotone Fork Upgrade Time @ (March 14, 00:00 UTC)
* End: 10 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, 50, 0)
)
export const ECOTONE_FORK_END_DATE = new Date(Date.UTC(2024, 2, 14, 0, 10, 0))

export const EcotoneForkUpgradeBanner = () => {
const { isComplete } = getCountdownTimeStatus(
ECOTONE_FORK_BANNERS_START,
ECOTONE_FORK_END_DATE
)

useIntervalTimer(60000, isComplete)

return (
<AnnouncementBanner
bannerId="03142024-ecotone-fork"
bannerContents={
<div className="flex flex-col justify-center space-y-1 text-center">
<div>
Optimism + Base Bridging and RFQ will be paused 10 minutes ahead of
Ecotone (March 14, 00:00 UTC, 20:00 EST).
</div>
<div>Will be back online shortly following the network upgrade.</div>
</div>
}
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 (
<WarningMessage
message={
<>
<p>
Optimism Chain and Base Chain bridging are paused until the
Ecotone Fork upgrade completes.
</p>
</>
}
/>
)
} 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,
}
}
Loading
Loading