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

docs(synapse-interface): maintenance #2986

Closed
wants to merge 15 commits into from
187 changes: 187 additions & 0 deletions packages/synapse-interface/components/Maintenance/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
# Maintenance Instructions

This guide explains how to use the Maintenance feature of the Synapse Interface Webapp to pause a chain or bridge module.
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix grammatical issue.

The sentence is missing a preposition.

- This guide explains how to use the Maintenance feature the Synapse Interface Webapp to pause a chain or bridge module.
+ This guide explains how to use the Maintenance feature of the Synapse Interface Webapp to pause a chain or bridge module.
Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
This guide explains how to use the Maintenance feature of the Synapse Interface Webapp to pause a chain or bridge module.
This guide explains how to use the Maintenance feature of the Synapse Interface Webapp to pause a chain or bridge module.


## How it works

There are a few maintenance components implemented around the app:
1. Banner - located at the top of the page.
2. Countdown Progress Bar - located at the top of Bridge / Swap cards.
3. Warning Message - located below the input UI in Bridge / Swap cards.

<img src="https://raw.githubusercontent.com/synapsecns/sanguine/master/packages/synapse-interface/components/Maintenance/images/maintenance-banner.png" alt="Dark Theme" width="400"/>

<img src="https://raw.githubusercontent.com/synapsecns/sanguine/master/packages/synapse-interface/components/Maintenance/images/maintenance-bridge-card.png" alt="Dark Theme" width="400"/>

These components ingest data fetched from the following JSON files:

- [Pause Chains JSON](https://github.com/synapsecns/sanguine/blob/master/packages/synapse-interface/public/pauses/v1/paused-chains.json)
- [Pause Bridge Modules JSON](https://github.com/synapsecns/sanguine/blob/master/packages/synapse-interface/public/pauses/v1/paused-bridge-modules.json)

To control when the Banner, Countdown Progress Bar, and Warning Message components are displayed, update the [Pause Chains JSON](https://github.com/synapsecns/sanguine/blob/master/packages/synapse-interface/public/pauses/v1/paused-chains.json).

To specify which bridge modules (SynapseRFQ, SynapseBridge, or SynapseCCTP) are paused, update the [Pause Bridge Modules JSON](https://github.com/synapsecns/sanguine/blob/master/packages/synapse-interface/public/pauses/v1/paused-bridge-modules.json).

After updating the proper JSON files, the following steps must be taken to ensure the production webapp reflects the changes made:
1. Merge new branch branch in `master`
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
2. Merge `master` branch into `fe-release` branch

After Step 1 is completed, the [Github Pages](https://github.com/synapsecns/sanguine/deployments/github-pages) for the respective branch must finish building to take effect on the production webapp.
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved

Although completing Step 1 will already reflect changes in the webapp, Step 2 is required in the slim chance that the github API is down, so that the production webapp can use the local JSON files as a reliable backup data source.

## Chain Pause

You can pause the Bridge and Swap functionalities on specific chains using their chainIds. Pauses can be applied independently to Bridge or Swap functions, or to both simultaneously.

For Bridge functionality, you can specify the origin and destination chainIds to pause. For Swap functionality, you can pause a chain either by including the specific chainId in either the origin or destination. You can set a start and end time for the pause, or leave it indefinite if the duration is uncertain.
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved

Additionally, you can control which components are displayed during the pause event.

### Chain Pause Props

`id`
Unique ID used to distinguish maintenance component instances. Use 'EVENT_NAME-pause' format. (e.g: arbitrum-chain-pause)

`pausedFromChains`
An array containing origin chainIds to pause.

`pausedToChains`
An array containing destination chainIds to pause.

`pauseBridge`
Boolean indicating whether to pause Bridge functionality.

`pauseSwap`
Boolean indicating whether to pause Swap functionality.

`startTimePauseChain`
UTC time of when to start chain(s) pause.

`endTimePauseChain`
UTC time of when to end chain(s) pause. If null, chain(s) pause will continue indefinitely.

`startTimeBanner`
UTC time of when to start displaying Banner.

`endTimeBanner`
UTC time of when to end displaying Banner. If null, Banner will display indefinitely.

`inputWarningMessage`
String to display in Warning Message shown in Bridge or Swap card.

`bannerMessage`
String to display in Banner.

`progressBarMessage`
String to display in Countdown Progress Bar.

`disableBanner`
Boolean indicating whether to hide Banner.

`disableWarning`
Boolean indicating whether to hide Warning Message in Bridge or Swap card.

`disableCountdown`
Boolean indicating whether to hide Countdown Progress Bar.

### Example

`paused-chains.json`
```tsx
[
// Bridge Pause
{
"id": "base-chain-pause",
"pausedFromChains": [8453],
"pausedToChains": [8453],
"pauseBridge": true,
"pauseSwap": false,
"startTimePauseChain": "2024-04-12T17:41:00Z",
"endTimePauseChain": null,
"startTimeBanner": "2024-04-12T04:40:00Z",
"endTimeBanner": null,
"inputWarningMessage": "Base bridging is paused until maintenance is complete.",
"bannerMessage": "Base bridging is paused until maintenance is complete.",
"progressBarMessage": "Base maintenance in progress",
"disableBanner": false,
"disableWarning": false,
"disableCountdown": false
},
{
"id": "ecotone-fork-pause",
"pausedFromChains": [10, 8453],
"pausedToChains": [10, 8453],
"pauseBridge": true,
"pauseSwap": false,
"startTimePauseChain": "2024-03-13T23:35:00Z",
"endTimePauseChain": "2024-03-14T00:25:00Z",
"startTimeBanner": "2024-03-13T23:20:00Z",
"endTimeBanner": "2024-03-14T00:25:00Z",
"inputWarningMessage": "",
"bannerMessage": "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.",
"progressBarMessage": "Ecotone Fork maintenance in progress",
"disableBanner": false,
"disableWarning": true,
"disableCountdown": false
},
// Swap Pause
{
"id": "arbitrum-swap-pause",
"pausedFromChains": [42161],
"pausedToChains": [42161],
"pauseBridge": false,
"pauseSwap": true,
"startTimePauseChain": "2024-03-13T23:35:00Z",
"endTimePauseChain": "2024-03-14T00:25:00Z",
"startTimeBanner": "2024-03-13T23:20:00Z",
"endTimeBanner": "2024-03-14T00:25:00Z",
"inputWarningMessage": "Swapping on Arbitrum is paused until maintenance is complete.",
"bannerMessage": "Swapping on Arbitrum is paused until maintenance is complete.",
"progressBarMessage": "Arbitrum maintenance in progress",
"disableBanner": false,
"disableWarning": false,
"disableCountdown": false
}
]
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add missing closing bracket in JSON example.

The JSON example is missing a closing bracket.

- ]
+   ]

Committable suggestion was skipped due to low confidence.

```


## Bridge Module Pause

You can pause a specific bridge module on a given chain.. Currently, there are the following bridge modules:
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
- SynapseRFQ
- SynapseCCTP
- SynapseBridge

### Bridge Module Pause Props

`chainId`
Chain ID of Chain to pause specific bridge module.

`bridgeModuleName`
Accepts 'SynapseRFQ', 'SynapseBridge', 'SynapseCCTP', or 'ALL'. If selecting 'ALL', all bridge modules will be paused for respective chainId.

### Example

`paused-bridge-modules.json`
```tsx
[
{
"chainId": 42161,
"bridgeModuleName": "ALL"
},
{
"chainId": 10,
"bridgeModuleName": "SynapseRFQ"
},
{
"chainId": 10,
"bridgeModuleName": "SynapseCCTP"
},
{
"chainId": 8453,
"bridgeModuleName": "SynapseBridge"
}
]
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
bigboydiamonds marked this conversation as resolved.
Show resolved Hide resolved
```
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import pausedChains from '@/public/pauses/v1/paused-chains.json'
import pausedBridgeModules from '@/public/pauses/v1/paused-bridge-modules.json'

const PAUSED_CHAINS_URL =
'https://synapsecns.github.io/sanguine/packages/synapse-interface/public/pauses/v1/paused-chains.json'
'https://bigboydiamonds.github.io/sanguine/packages/synapse-interface/public/pauses/v1/paused-chains.json'
const PAUSED_MODULES_URL =
'https://synapsecns.github.io/sanguine/packages/synapse-interface/public/pauses/v1/paused-bridge-modules.json'

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading