#318 - add planned outage - head up banner

.github/workflows/prettier.yml

@@ -9,4 +9,4 @@ jobs:
  - name: Checkout repository
  uses: actions/checkout@v3
  - name: Run prettier
- run: npx prettier --check ./src
+ run: npx prettier@3.0.2 --check ./src

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@xlabs/portal-bridge-ui",
- "version": "0.1.65",
+ "version": "0.1.66",
  "private": true,
  "dependencies": {
  "@certusone/wormhole-sdk": "^0.9.22",

src/components/HeaderText.tsx

@@ -1,11 +1,12 @@
-import { makeStyles, Typography } from "@material-ui/core";
+import { Box, Link, makeStyles, Typography } from "@material-ui/core";
 import clsx from "clsx";
 import { ReactChild } from "react";
 import { COLORS } from "../muiTheme";
+import { Alert, AlertTitle } from "@material-ui/lab";
 
 const useStyles = makeStyles((theme) => ({
  centeredContainer: {
- marginBottom: theme.spacing(16),
+ //marginBottom: theme.spacing(16),
  textAlign: "center",
  width: "100%",
  },
@@ -20,8 +21,100 @@ const useStyles = makeStyles((theme) => ({
  subtitle: {
  marginTop: theme.spacing(2),
  },
+ alert: {
+ marginTop: theme.spacing(5),
+ marginBottom: theme.spacing(5),
+ margin: "auto",
+ textAlign: "left",
+ display: "flex",
+ width: "792px",
+ height: "282px",
+ padding: theme.spacing(4), // 32px
+ justifyContent: "center",
+ alignItems: "flex-start",
+ gap: "16px",
+ borderRadius: "28px",
+ background: "rgba(193, 149, 49, 0.10)",
+ border: "none",
+ lineHeight: "24px",
+ "& .MuiAlertTitle-root": {
+ color: "#FBECD0",
+ fontWeight: 700,
+ marginBottom: theme.spacing(3),
+ },
+ "& .MuiAlert-icon": {
+ fontSize: 24,
+ marginRight: 0,
+ },
+ "& .MuiAlert-message": {
+ width: "633px",
+ marginRight: "55px",
+ flexShrink: 0,
+ "& .MuiTypography-paragraph": {
+ color: "#FBECD0",
+ fontFamily: "Poppins",
+ fontSize: "14px",
+ fontStyle: "normal",
+ fontWeight: 400,
+ "&:not(:last-child)": {
+ marginBottom: theme.spacing(3),
+ },
+ },
+ "& span": {
+ color: "#EEB32A",
+ fontWeight: 700,
+ },
+ "& .MuiLink-root": {
+ color: "#FBECD0",
+ fontFamily: "Poppins",
+ fontSize: "14px",
+ fontStyle: "normal",
+ fontWeight: 400,
+ lineHeight: "24px",
+ textDecorationLine: "underline",
+ },
+ },
+ },
 }));
 
+function Notice() {
+ const style = useStyles();
+ return (
+ <Alert severity="warning" className={style.alert}>
+ <AlertTitle>
+ Wormhole Upgrade Approaching - Expect Temporary Downtime
+ </AlertTitle>
+ <Box>
+ <Typography paragraph>
+ A required upgrade is being coordinated and executed by the network of
+ Wormhole Guardian (validator) nodes to add Gateway to the Wormhole
+ stack.
+ </Typography>
+ <Typography paragraph>
+ Please take note that token bridging will pause for several hours on{" "}
+ <br />
+ <Typography component="span">Monday, August 21, 2023</Typography>{" "}
+ during the upgrade.
+ </Typography>
+ <Typography paragraph>
+ Follow:{" "}
+ <Link href="https://twitter.com/wormholecrypto" target="_blank">
+ @wormholecrypto
+ </Link>{" "}
+ and join the{" "}
+ <Link
+ href="https://discord.com/invite/wormholecrypto"
+ target="_blank"
+ >
+ Discord
+ </Link>{" "}
+ for updates.
+ </Typography>
+ </Box>
+ </Alert>
+ );
+}
+
 export default function HeaderText({
  children,
  white,
@@ -48,6 +141,7 @@ export default function HeaderText({
  {subtitle}
  </Typography>
  ) : null}
+ <Notice />
  </div>
  );
 }