make the outage warning to display based on time (#326)

* make the outage warning to display based on time * fix reposive issue
XLabs · Aug 18, 2023 · 6253baf · 6253baf
1 parent 3810f9e
commit 6253baf
Show file tree

Hide file tree

Showing 4 changed files with 220 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xlabs/portal-bridge-ui",
-  "version": "0.1.66",
+  "version": "0.1.67",
   "private": true,
   "dependencies": {
     "@certusone/wormhole-sdk": "^0.9.22",

diff --git a/src/components/ConnectWalletButton.tsx b/src/components/ConnectWalletButton.tsx
@@ -87,6 +87,11 @@ const ConnectWalletButton = ({ chainId }: { chainId: ChainId }) => {
       : connect(availableWallets[0]);
   }, [openDialog, availableWallets, connect, chainId]);
 
+  //TODO remove once outage banned got removed
+  const outageDisabled =
+    Date.now() > Date.UTC(2023, 7, 21, 6) &&
+    Date.now() < Date.UTC(2023, 7, 21, 9);
+
   return (
     <>
       {isDetectingWallets && (
@@ -112,7 +117,7 @@ const ConnectWalletButton = ({ chainId }: { chainId: ChainId }) => {
         disconnect={disconnect}
         connected={!!pk}
         pk={pk || ""}
-        disabled={isDetectingWallets || walletsNotAvailable}
+        disabled={outageDisabled || isDetectingWallets || walletsNotAvailable}
       />
       <ConnectWalletDialog
         isOpen={isDialogOpen}

diff --git a/src/components/HeaderText.tsx b/src/components/HeaderText.tsx
@@ -21,14 +21,19 @@ const useStyles = makeStyles((theme) => ({
   subtitle: {
     marginTop: theme.spacing(2),
   },
+}));
+
+const useHeadUpStyles = makeStyles((theme) => ({
   alert: {
     marginTop: theme.spacing(5),
     marginBottom: theme.spacing(5),
     margin: "auto",
     textAlign: "left",
     display: "flex",
-    width: "792px",
-    height: "282px",
+    [theme.breakpoints.up("sm")]: {
+      width: "792px",
+      height: "282px",
+    },
     padding: theme.spacing(4), // 32px
     justifyContent: "center",
     alignItems: "flex-start",
@@ -47,9 +52,11 @@ const useStyles = makeStyles((theme) => ({
       marginRight: 0,
     },
     "& .MuiAlert-message": {
-      width: "633px",
-      marginRight: "55px",
-      flexShrink: 0,
+      [theme.breakpoints.up("sm")]: {
+        width: "633px",
+        marginRight: "55px",
+        flexShrink: 0,
+      },
       "& .MuiTypography-paragraph": {
         color: "#FBECD0",
         fontFamily: "Poppins",
@@ -77,8 +84,8 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function Notice() {
-  const style = useStyles();
+function HeadUpNotice() {
+  const style = useHeadUpStyles();
   return (
     <Alert severity="warning" className={style.alert}>
       <AlertTitle>
@@ -115,6 +122,203 @@ function Notice() {
   );
 }
 
+const useInProgressStyles = makeStyles((theme) => ({
+  alert: {
+    marginTop: theme.spacing(5),
+    marginBottom: theme.spacing(5),
+    margin: "auto",
+    textAlign: "left",
+    display: "flex",
+    [theme.breakpoints.up("sm")]: {
+      width: "792px",
+      height: "258px",
+    },
+    padding: theme.spacing(4), // 32px
+    justifyContent: "center",
+    alignItems: "flex-start",
+    gap: "16px",
+    borderRadius: "28px",
+    background: "rgba(255, 42, 87, 0.10)",
+    border: "none",
+    lineHeight: "24px",
+    "& .MuiAlertTitle-root": {
+      color: "#FFE3E9",
+      fontWeight: 700,
+      marginBottom: theme.spacing(3),
+    },
+    "& .MuiAlert-icon": {
+      fontSize: 24,
+      marginRight: 0,
+    },
+    "& .MuiAlert-message": {
+      [theme.breakpoints.up("sm")]: {
+        width: "633px",
+        marginRight: "55px",
+        flexShrink: 0,
+      },
+      "& .MuiTypography-paragraph": {
+        color: "#FFE3E9",
+        fontFamily: "Poppins",
+        fontSize: "14px",
+        fontStyle: "normal",
+        fontWeight: 400,
+        "&:not(:last-child)": {
+          marginBottom: theme.spacing(3),
+        },
+      },
+      "& span": {
+        color: "#FFE3E9",
+        fontWeight: 700,
+      },
+      "& .MuiLink-root": {
+        color: "#FFE3E9",
+        fontFamily: "Poppins",
+        fontSize: "14px",
+        fontStyle: "normal",
+        fontWeight: 400,
+        lineHeight: "24px",
+        textDecorationLine: "underline",
+      },
+    },
+  },
+}));
+
+function InProgressNotice() {
+  const style = useInProgressStyles();
+  return (
+    <Alert severity="error" className={style.alert}>
+      <AlertTitle>
+        Wormhole Upgrade In Progress - Temporary Downtime In Effect
+      </AlertTitle>
+      <Box>
+        <Typography paragraph>
+          A required upgrade is being executed by the network of Wormhole
+          Guardian (validator) nodes to add Gateway to the Wormhole stack.
+        </Typography>
+        <Typography paragraph>
+          <Typography component="span">
+            Token bridging is currently paused.{" "}
+          </Typography>{" "}
+        </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>
+  );
+}
+
+const useBackOnLineStyles = makeStyles((theme) => ({
+  alert: {
+    marginTop: theme.spacing(5),
+    marginBottom: theme.spacing(5),
+    margin: "auto",
+    textAlign: "left",
+    display: "flex",
+    [theme.breakpoints.up("sm")]: {
+      width: "792px",
+      height: "210px",
+    },
+    padding: theme.spacing(4), // 32px
+    justifyContent: "center",
+    alignItems: "flex-start",
+    gap: "16px",
+    borderRadius: "28px",
+    background: "rgba(1, 187, 172, 0.10)",
+    border: "none",
+    lineHeight: "24px",
+    "& .MuiAlertTitle-root": {
+      color: "#FFE3E9",
+      fontWeight: 700,
+      marginBottom: theme.spacing(3),
+      "& span": {
+        color: "#07D9C8",
+      },
+    },
+    "& .MuiAlert-icon": {
+      fontSize: 24,
+      marginRight: 0,
+    },
+    "& .MuiAlert-message": {
+      [theme.breakpoints.up("sm")]: {
+        width: "633px",
+        marginRight: "55px",
+        flexShrink: 0,
+      },
+      "& .MuiTypography-paragraph": {
+        color: "#FFE3E9",
+        fontFamily: "Poppins",
+        fontSize: "14px",
+        fontStyle: "normal",
+        fontWeight: 400,
+        "&:not(:last-child)": {
+          marginBottom: theme.spacing(3),
+        },
+      },
+      "& span": {
+        color: "#FFE3E9",
+        fontWeight: 700,
+      },
+      "& .MuiLink-root": {
+        color: "#FFE3E9",
+        fontFamily: "Poppins",
+        fontSize: "14px",
+        fontStyle: "normal",
+        fontWeight: 400,
+        lineHeight: "24px",
+        textDecorationLine: "underline",
+      },
+    },
+  },
+}));
+
+function BackOnLineNotice() {
+  const style = useBackOnLineStyles();
+  return (
+    <Alert severity="success" className={style.alert}>
+      <AlertTitle>
+        Wormhole Upgrade Completed -{" "}
+        <Typography component="span">Back Online</Typography>
+      </AlertTitle>
+      <Box>
+        <Typography paragraph>
+          A required upgrade was completed by the network of Wormhole Guardian
+          (validator) nodes to add Gateway to the Wormhole stack.
+        </Typography>
+        <Typography paragraph>
+          <Typography component="span">Token bridging is now live. </Typography>{" "}
+        </Typography>
+      </Box>
+    </Alert>
+  );
+}
+
+function Notice() {
+  const now = Date.now();
+  const outageStart = Date.UTC(2023, 7, 21, 6);
+  const outageEnd = Date.UTC(2023, 7, 21, 9);
+  if (now < outageStart) {
+    return <HeadUpNotice />;
+  } else if (now > outageStart && now < outageEnd) {
+    return <InProgressNotice />;
+  } else if (now > outageEnd) {
+    return <BackOnLineNotice />;
+  } else {
+    return null;
+  }
+}
+
 export default function HeaderText({
   children,
   white,