#319 - add planned outage - in progress banner

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",

src/components/ConnectWalletButton.tsx

@@ -86,7 +86,7 @@ const ConnectWalletButton = ({ chainId }: { chainId: ChainId }) => {
  ? openDialog()
  : connect(availableWallets[0]);
  }, [openDialog, availableWallets, connect, chainId]);
-
+ const disabled = true; // TODO remove once outage is done
  return (
  <>
  {isDetectingWallets && (
@@ -112,7 +112,7 @@ const ConnectWalletButton = ({ chainId }: { chainId: ChainId }) => {
  disconnect={disconnect}
  connected={!!pk}
  pk={pk || ""}
- disabled={isDetectingWallets || walletsNotAvailable}
+ disabled={disabled || isDetectingWallets || walletsNotAvailable}
  />
  <ConnectWalletDialog
  isOpen={isDialogOpen}

src/components/HeaderText.tsx

@@ -28,17 +28,17 @@ const useStyles = makeStyles((theme) => ({
  textAlign: "left",
  display: "flex",
  width: "792px",
- height: "282px",
+ height: "258px",
  padding: theme.spacing(4), // 32px
  justifyContent: "center",
  alignItems: "flex-start",
  gap: "16px",
  borderRadius: "28px",
- background: "rgba(193, 149, 49, 0.10)",
+ background: "rgba(255, 42, 87, 0.10)",
  border: "none",
  lineHeight: "24px",
  "& .MuiAlertTitle-root": {
- color: "#FBECD0",
+ color: "#FFE3E9",
  fontWeight: 700,
  marginBottom: theme.spacing(3),
  },
@@ -51,7 +51,7 @@ const useStyles = makeStyles((theme) => ({
  marginRight: "55px",
  flexShrink: 0,
  "& .MuiTypography-paragraph": {
- color: "#FBECD0",
+ color: "#FFE3E9",
  fontFamily: "Poppins",
  fontSize: "14px",
  fontStyle: "normal",
@@ -61,11 +61,11 @@ const useStyles = makeStyles((theme) => ({
  },
  },
  "& span": {
- color: "#EEB32A",
+ color: "#FFE3E9",
  fontWeight: 700,
  },
  "& .MuiLink-root": {
- color: "#FBECD0",
+ color: "#FFE3E9",
  fontFamily: "Poppins",
  fontSize: "14px",
  fontStyle: "normal",
@@ -80,21 +80,19 @@ const useStyles = makeStyles((theme) => ({
 function Notice() {
  const style = useStyles();
  return (
- <Alert severity="warning" className={style.alert}>
+ <Alert severity="error" className={style.alert}>
  <AlertTitle>
- Wormhole Upgrade Approaching - Expect Temporary Downtime
+ Wormhole Upgrade In Progress - Temporary Downtime In Effect
  </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.
+ A required upgrade is being 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 component="span">
+ Token bridging is currently paused.{" "}
+ </Typography>{" "}
  </Typography>
  <Typography paragraph>
  Follow:{" "}