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): maintenance aggregator using PAUSED_CHAINS #2345

Merged
merged 65 commits into from
Apr 30, 2024
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
65 commits
Select commit Hold shift + click to select a range
1fe163f
Aggregate maintenance events for banners and warning message
bigboydiamonds Mar 21, 2024
5029481
Dynamically render countdown progress bars based on PAUSED_CHAIN
bigboydiamonds Mar 21, 2024
30d8e73
Dynamically rendering banners
bigboydiamonds Mar 21, 2024
fd533a0
Slightly organize
bigboydiamonds Mar 21, 2024
87c041d
ChainPause type applied to enforce maintenance event structure, pass …
bigboydiamonds Mar 21, 2024
98e2c04
Working with multiple events
bigboydiamonds Mar 21, 2024
8a346cc
Add dev comments to MaintenanceBanner; refactor
bigboydiamonds Mar 21, 2024
deda821
Add dev comments for MaintenanceWarningMessage; refactor
bigboydiamonds Mar 21, 2024
56464a6
Dev comments
bigboydiamonds Mar 21, 2024
324ff09
Organize components
bigboydiamonds Mar 21, 2024
c2d0922
isChainIncluded util
bigboydiamonds Mar 21, 2024
d95aa9d
Clean
bigboydiamonds Mar 21, 2024
4f7ed58
Add ability to specify paused chains by from/to side (#2346)
bigboydiamonds Mar 21, 2024
23b7db6
Allow indefinite maintenance components by setting end date to null
bigboydiamonds Mar 27, 2024
fb67fd8
Banners to show indefinitely as well
bigboydiamonds Mar 27, 2024
b12f173
Add props to disable banner / warning / countdown
bigboydiamonds Mar 27, 2024
0a78ea0
Implement disable warning
bigboydiamonds Mar 27, 2024
bc5e77f
Implement disable countdown, bridge pause still working
bigboydiamonds Mar 27, 2024
fe24a2d
Example
bigboydiamonds Mar 27, 2024
32d7d5d
Clean
bigboydiamonds Mar 27, 2024
ff28ba5
Update naming on Bridge page
bigboydiamonds Mar 27, 2024
eead1ee
Update comment for isChainIncluded
bigboydiamonds Mar 27, 2024
688f780
Merge branch 'master' into fe/maintenance-by-paused-chains
bigboydiamonds Apr 12, 2024
0c7dd2a
Create maintenance events reading from pausedChains.json
bigboydiamonds Apr 12, 2024
3bde6ec
Remove custom margins to allow Bridge parent gap styling to handle sp…
bigboydiamonds Apr 12, 2024
91a63ca
Merge pull request #2492 from synapsecns/fe/paused-chains-json
bigboydiamonds Apr 12, 2024
f12252c
Require all props to be defined
bigboydiamonds Apr 12, 2024
f3b227b
Add Swap to maintenance warning messages
bigboydiamonds Apr 12, 2024
884b12a
Update useMaintenanceCountdownProgresses to allow distinction between…
bigboydiamonds Apr 12, 2024
85999aa
Move MaintenanceBanners into LandingPageWrapper so banner appears on …
bigboydiamonds Apr 12, 2024
e599a42
Add ability to specify whether to pause bridge / swap with maintenanc…
bigboydiamonds Apr 12, 2024
d00e0e4
Clean
bigboydiamonds Apr 12, 2024
ab5615a
Unused code
bigboydiamonds Apr 12, 2024
b7172aa
Merge pull request #2493 from synapsecns/fe/maintenance-add-swap
bigboydiamonds Apr 12, 2024
60e7d1a
Update dev comments
bigboydiamonds Apr 12, 2024
93b40ea
Update pause start/end time name for legibility
bigboydiamonds Apr 15, 2024
f2db1ed
Create type guard to check for paused bridge module
bigboydiamonds Apr 15, 2024
54a810c
usePausedBridgeModules
bigboydiamonds Apr 15, 2024
da89d3c
usePausedBridgeModules to filter out SDK quotes
bigboydiamonds Apr 15, 2024
78dac9b
Initialize paused routes to handle specific route pauses instead of g…
bigboydiamonds Apr 16, 2024
7e65c5f
Update paused route structure
bigboydiamonds Apr 16, 2024
79fb7fb
Filter for valid quotes based on paused routes
bigboydiamonds Apr 16, 2024
29aaa56
Create a Set with paused bridge module names to improve time complexity
bigboydiamonds Apr 16, 2024
b9b4806
Allow for all bridge modules to be paused with ALL
bigboydiamonds Apr 16, 2024
bce37e6
Add ability to pause bridge modules for all chains, if chainId is lef…
bigboydiamonds Apr 16, 2024
cc68058
Move json files to /v1/ version control folder
bigboydiamonds Apr 16, 2024
4feea77
Compare quotes against paused bridge modules more cleanly
bigboydiamonds Apr 16, 2024
5e25e58
Paused bridge modules json control working
bigboydiamonds Apr 16, 2024
91d27da
Fix pausedChains json
bigboydiamonds Apr 16, 2024
bd7c537
Merge pull request #2504 from synapsecns/fe/pause-bridge-module
bigboydiamonds Apr 16, 2024
b11c395
Create examples folder for pause jsons
bigboydiamonds Apr 16, 2024
6780edc
Merge
bigboydiamonds Apr 17, 2024
6df44dc
Merge branch 'master' into fe/maintenance-by-paused-chains
bigboydiamonds Apr 19, 2024
4a2c2b8
Retrigger build
bigboydiamonds Apr 19, 2024
e70375e
Fix banner flashing after clearing
bigboydiamonds Apr 19, 2024
8f3b1c2
Add padding to banner Close button
bigboydiamonds Apr 20, 2024
10d172c
Update text sizing on progress bar
bigboydiamonds Apr 20, 2024
8b63995
Update prop naming to prevent confusion on start/end
bigboydiamonds Apr 20, 2024
a931379
Clear chain pauses to ready PR
bigboydiamonds Apr 20, 2024
f2ae4b0
Merge with master
bigboydiamonds Apr 29, 2024
7a70051
Change json file naming to be more readable
bigboydiamonds Apr 29, 2024
bc5ad3a
Use inputWarningMessage prop name to indicate warning placement
bigboydiamonds Apr 29, 2024
8070663
Pause Doge activity using Maintenance, to replace prior Chain pause m…
bigboydiamonds Apr 29, 2024
3fba2a3
Doge chain paused chain prop values
bigboydiamonds Apr 29, 2024
3917328
Remove paused from/to chainId constants
bigboydiamonds Apr 29, 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
Expand Up @@ -22,75 +22,99 @@ 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 = () => {
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
// 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 (
<AnnouncementBanner
bannerId="03202024-maintenance-banner"
bannerContents={
<>
<p className="m-auto">
Bridging is paused until maintenance is complete.
</p>
</>
}
startDate={MAINTENANCE_BANNERS_START}
endDate={MAINTENANCE_END_DATE}
bannerId={id}
bannerContents={bannerMessage}
startDate={startDate}
endDate={endDate}
/>
)
}

export const MaintenanceWarningMessage = () => {
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
// [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

if (isWarningChain) {
return (
<WarningMessage
message={
<>
<p>Bridging is paused until maintenance is complete.</p>
</>
}
/>
)
return <WarningMessage message={warningMessage} />
}

return null
}

export const useMaintenanceCountdownProgress = () => {
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
// [OPTIMISM.id, BASE.id] // Update for Chains to show maintenance on
pausedChains
)

const {
isPending: isMaintenancePending,
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
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 {
Expand All @@ -112,3 +136,99 @@ export const useMaintenanceCountdownProgress = () => {
const isChainIncluded = (chainList: number[], hasChains: number[]) => {
return hasChains.some((chainId) => chainList.includes(chainId))
}

/** Aggregators */

interface ChainPause {
id: string
pausedChains: number[]
startTime: Date
endTime: Date
bannerStartTime: Date
bannerEndTime: Date
warningMessage: any
bannerMessage: any
progressBarMessage: any
}

const PAUSED_CHAINS: ChainPause[] = [
abtestingalpha marked this conversation as resolved.
Show resolved Hide resolved
{
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)),
warningMessage: (
<p> Optimism bridging is paused until maintenance is complete. </p>
),
bannerMessage: (
<p> Optimism bridging is paused until maintenance is complete. </p>
),
progressBarMessage: <p> Optimism maintenance in progress </p>,
},
{
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)),
warningMessage: (
<p> Base bridging is paused until maintenance is complete. </p>
),
bannerMessage: (
<p> Base bridging is paused until maintenance is complete. </p>
),
progressBarMessage: <p> Base maintenance in progress </p>,
},
]

export const MaintenanceBanners = () => {
return (
<>
{PAUSED_CHAINS.map((event) => {
return (
<MaintenanceBanner
id={event.id}
bannerMessage={event.bannerMessage}
startDate={event.bannerStartTime}
endDate={event.bannerEndTime}
/>
)
})}
</>
)
}

export const MaintenanceWarningMessages = () => {
return (
<>
{PAUSED_CHAINS.map((event) => {
return (
<MaintenanceWarningMessage
startDate={event.startTime}
endDate={event.endTime}
pausedChains={event.pausedChains}
warningMessage={event.warningMessage}
/>
)
})}
</>
)
}

/**
* 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,
progressBarMessage: event.progressBarMessage,
})
})
}
7 changes: 5 additions & 2 deletions packages/synapse-interface/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
} 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
Expand All @@ -16,7 +19,7 @@ const Home = () => {

return (
<>
<MaintenanceBanner />
<MaintenanceBanners />
<LandingPageWrapper>
<main
data-test-id="bridge-page"
Expand Down
28 changes: 20 additions & 8 deletions packages/synapse-interface/pages/state-managed-bridge/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,9 @@ import { isTransactionReceiptError } from '@/utils/isTransactionReceiptError'
import { SwitchButton } from '@/components/buttons/SwitchButton'
import {
MaintenanceWarningMessage,
MaintenanceWarningMessages,
useMaintenanceCountdownProgress,
useMaintenanceCountdownProgresses,
} from '@/components/Maintenance/Events/template/MaintenanceEvent'

const StateManagedBridge = () => {
Expand Down Expand Up @@ -521,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 (
<div className="flex flex-col w-full max-w-lg mx-auto lg:mx-0">
Expand Down Expand Up @@ -564,7 +571,10 @@ const StateManagedBridge = () => {
transition-all duration-100 transform rounded-md
`}
>
{MaintenanceCountdownProgressBar}
{instances.map((instance) => (
<>{instance.MaintenanceCountdownProgressBar}</>
))}

<div ref={bridgeDisplayRef}>
<Transition show={showSettingsSlideOver} {...TRANSITION_PROPS}>
<animated.div>
Expand Down Expand Up @@ -602,7 +612,9 @@ const StateManagedBridge = () => {
/>
<OutputContainer />
<Warning />
{isMaintenancePending && <MaintenanceWarningMessage />}

<MaintenanceWarningMessages />

<Transition
appear={true}
unmount={false}
Expand All @@ -622,7 +634,7 @@ const StateManagedBridge = () => {
isApproved={isApproved}
approveTxn={approveTxn}
executeBridge={executeBridge}
isBridgePaused={isCurrentChainDisabled}
isBridgePaused={isBridgePaused}
/>
</div>
</div>
Expand Down
Loading