#344 - add osmosis / cosmos banner

XLabs · Aug 30, 2023 · 8f45b66 · 8f45b66
1 parent a0cf1e9
commit 8f45b66
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 50 deletions.
diff --git a/src/App.js b/src/App.js
@@ -76,20 +76,6 @@ const useStyles = makeStyles((theme) => ({
       textDecoration: "underline",
     },
   },
-  bannerLink: {
-    display: "inline-flex",
-    alignItems: "center",
-    borderRadius: 20,
-    padding: "6px 12px",
-    backgroundColor: "white",
-    color: "#F47B48",
-    marginLeft: "8px",
-    fontSize: "12px",
-    letterSpacing: "0.08em",
-    fontWeight: 600,
-    minHeight: "32px",
-    minWidth: "fit-content",
-  },
   bg: {
     // background:
     //   "linear-gradient(160deg, rgba(69,74,117,.1) 0%, rgba(138,146,178,.1) 33%, rgba(69,74,117,.1) 66%, rgba(98,104,143,.1) 100%), linear-gradient(45deg, rgba(153,69,255,.1) 0%, rgba(121,98,231,.1) 20%, rgba(0,209,140,.1) 100%)",
@@ -197,34 +183,15 @@ function App() {
   const { push } = useHistory();
   const { pathname } = useLocation();
   const handleTabChange = useCallback(
-    (event, value) => {
+    (_, value) => {
       push(value);
     },
     [push]
   );
 
-  // To show Optimism option on SEPT 4th 2023
-  const bannerMsg =
-    new Date() < new Date(2023, 8, 4)
-      ? "Experience frictionless USDC transfers between Ethereum, Avalanche, and Arbitrum with Circle's CCTP. "
-      : "Experience frictionless USDC transfers between Ethereum, Avalanche, Arbitrum, and Optimism with Circle's CCTP. ";
-
   return (
     <div className={classes.bg}>
-      <NewsBar>
-        <>
-          <span>{bannerMsg}</span>
-          <Link
-            href="https://portalbridge.com/usdc-bridge"
-            target="_blank"
-            rel="noopener noreferrer"
-            color="inherit"
-            className={classes.bannerLink}
-          >
-            TRY IT NOW
-          </Link>
-        </>
-      </NewsBar>
+      <NewsBar />
       <AppBar
         position="static"
         color="inherit"

diff --git a/src/components/NewsBar/index.tsx b/src/components/NewsBar/index.tsx
@@ -1,30 +1,117 @@
-import { makeStyles } from "@material-ui/core";
-import React from "react";
+import MuiLink from "@material-ui/core/Link";
+import { Typography, makeStyles } from "@material-ui/core";
+import { useMemo } from "react";
+import { Theme } from "@near-wallet-selector/modal-ui";
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles<Theme, { changeWindowPassDue: boolean }>(() => ({
   bar: {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     width: "100%",
-    minHeight: "48px",
-    padding: "4px 16px",
+    height: "56px",
     textAlign: "center",
     fontWeight: 500,
-    fontSize: "14px",
+    fontSize: "16px",
     letterSpacing: "0.02em",
-    background: "linear-gradient(20deg, #f44b1b 0%, #eeb430 100%);",
+    background: ({ changeWindowPassDue }) =>
+    changeWindowPassDue
+        ? "linear-gradient(1deg, #9577F4 0%, #AD55DA 28.96%, #CA2EBD 100%);"
+        : "linear-gradient(20deg, #f44b1b 0%, #eeb430 100%);",
+  },
+  bannerLink: {
+    display: "inline-flex",
+    alignItems: "center",
+    borderRadius: 20,
+    padding: "6px 12px",
+    backgroundColor: "white",
+    color: ({ changeWindowPassDue }) => (changeWindowPassDue ? "#17153F" : "#F47B48"),
+    marginLeft: "8px",
+    fontSize: "12px",
+    letterSpacing: "0.08em",
+    fontWeight: 600,
+    minHeight: "32px",
+    minWidth: "fit-content",
+    fontFamily: 'Poppins',
+    wordWrap: 'break-word'
   },
 }));
+interface LinkProps {
+  href: string;
+  className: string;
+}
 
-type Props = {
-  children: React.ReactNode;
-};
-
-const NewsBar = ({ children }: Props) => {
-  const classes = useStyles();
+function Link({ href, className }: LinkProps) {
+  return (
+    <MuiLink
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      color="inherit"
+      className={className}
+    >
+      TRY IT NOW
+    </MuiLink>
+  );
+}
 
-  return <div className={classes.bar}>{children}</div>;
+const messages = {
+  cctp: {
+    href: "https://portalbridge.com/usdc-bridge",
+    // To show Optimism option on SEPT 4th 2023
+    content:
+      new Date() < new Date(2023, 8, 4)
+        ? "Experience frictionless USDC transfers between Ethereum, Avalanche, and Arbitrum with Circle's CCTP. "
+        : "Experience frictionless USDC transfers between Ethereum, Avalanche, Arbitrum, and Optimism with Circle's CCTP.",
+  },
+  cosmos: {
+    href: "https://portalbridge.com/cosmos",
+    content: (
+      <>
+        <Typography
+          variant="body1"
+          style={{
+            color: "white",
+            fontSize: 16,
+            fontFamily: "Poppins",
+            fontWeight: 500,
+            lineHeight: 20.02,
+            letterSpacing: 0.28,
+            wordWrap: "break-word",
+          }}
+        >
+          Wormhole Gateway is now live on mainnet! &nbsp;
+        </Typography>
+        <Typography
+          variant="body1"
+          style={{
+            color: "white",
+            fontSize: 16,
+            fontFamily: "Poppins",
+            fontWeight: 700,
+            lineHeight: 20.02,
+            letterSpacing: 0.28,
+            wordWrap: "break-word",
+          }}
+        >
+          Bridge your assets to Osmosis today.
+        </Typography>
+      </>
+    ),
+  },
 };
 
-export default NewsBar;
+export default function NewsBar() {
+  const changeWindowPassDue = useMemo(() => new Date() < new Date(2023, 8, 4), []);
+  const classes = useStyles({ changeWindowPassDue });
+  const { content, href } = useMemo(
+    () => (changeWindowPassDue ? messages.cosmos : messages.cctp),
+    [changeWindowPassDue]
+  );
+  return (
+    <div className={classes.bar}>
+      {content}
+      <Link href={href} className={classes.bannerLink} />
+    </div>
+  );
+};