bridge_ui: add title to registration page

Change-Id: I58b32427c9eddc1e80f824210f294ae10f8f4b24

bridge_ui/src/App.js

@@ -127,12 +127,6 @@ function App() {
   const classes = useStyles();
   const isBeta = useBetaContext();
   const isHomepage = useRouteMatch({ path: "/", exact: true });
-  const isStats = useRouteMatch({ path: "/stats", exact: true });
-  const isMigrate = useRouteMatch({ path: "/migrate" });
-  const isOriginVerifier = useRouteMatch({
-    path: "/nft-origin-verifier",
-    exact: true,
-  });
   const { push } = useHistory();
   const { pathname } = useLocation();
   const handleTabChange = useCallback(
@@ -249,14 +243,10 @@ function App() {
         </AppBar>
       ) : null}
       <div className={classes.content}>
-        {isHomepage || isOriginVerifier || isStats || isMigrate ? null : (
+        {["/transfer", "/nft", "/redeem"].includes(pathname) ? (
           <Container maxWidth="md" style={{ paddingBottom: 24 }}>
             <Tabs
-              value={
+              value={pathname}
-                ["/transfer", "/nft", "/redeem"].includes(pathname)
-                  ? pathname
-                  : "/transfer"
-              }
               variant="fullWidth"
               onChange={handleTabChange}
               indicatorColor="primary"
@@ -266,20 +256,20 @@ function App() {
               <Tab label="Redeem" value="/redeem" to="/redeem" />
             </Tabs>
           </Container>
-        )}
+        ) : null}
         <Switch>
-          <Route exact path="/nft">
-            <NFT />
-          </Route>
-          <Route exact path="/nft-origin-verifier">
-            <NFTOriginVerifier />
-          </Route>
           <Route exact path="/transfer">
             <Transfer />
           </Route>
+          <Route exact path="/nft">
+            <NFT />
+          </Route>
           <Route exact path="/redeem">
             <Recovery />
           </Route>
+          <Route exact path="/nft-origin-verifier">
+            <NFTOriginVerifier />
+          </Route>
           <Route exact path="/register">
             <Attest />
           </Route>

bridge_ui/src/components/Attest/index.tsx

@@ -16,6 +16,7 @@ import {
   selectAttestIsSendComplete,
   selectAttestIsSending,
 } from "../../store/selectors";
+import HeaderText from "../HeaderText";
 import Create from "./Create";
 import CreatePreview from "./CreatePreview";
 import Send from "./Send";
@@ -44,6 +45,7 @@ function Attest() {
   }, [preventNavigation]);
   return (
     <Container maxWidth="md">
+      <HeaderText>Token Registration</HeaderText>
       <Alert severity="info">
         This form allows you to register a token on a new foreign chain. Tokens
         must be registered before they can be transferred.

bridge_ui/src/components/HeaderText.tsx

@@ -0,0 +1,40 @@
+import { makeStyles, Typography } from "@material-ui/core";
+import clsx from "clsx";
+import { ReactChild } from "react";
+import { COLORS } from "../muiTheme";
+
+const useStyles = makeStyles((theme) => ({
+  centeredContainer: {
+    textAlign: "center",
+    width: "100%",
+  },
+  header: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(4),
+    [theme.breakpoints.down("sm")]: {
+      marginBottom: theme.spacing(4),
+    },
+  },
+  linearGradient: {
+    background: `linear-gradient(to left, ${COLORS.blue}, ${COLORS.green});`,
+    WebkitBackgroundClip: "text",
+    backgroundClip: "text",
+    WebkitTextFillColor: "transparent",
+    MozBackgroundClip: "text",
+    MozTextFillColor: "transparent",
+  },
+}));
+
+export default function HeaderText({ children }: { children: ReactChild }) {
+  const classes = useStyles();
+  return (
+    <div className={classes.centeredContainer}>
+      <Typography
+        variant="h1"
+        className={clsx(classes.header, classes.linearGradient)}
+      >
+        {children}
+      </Typography>
+    </div>
+  );
+}

bridge_ui/src/components/Home/index.tsx

@@ -5,15 +5,11 @@ import {
   makeStyles,
   Typography,
 } from "@material-ui/core";
-import clsx from "clsx";
 import { Link as RouterLink } from "react-router-dom";
 import { COLORS } from "../../muiTheme";
+import HeaderText from "../HeaderText";
 
 const useStyles = makeStyles((theme) => ({
-  centeredContainer: {
-    textAlign: "center",
-    width: "100%",
-  },
   header: {
     marginTop: theme.spacing(12),
     marginBottom: theme.spacing(15),
@@ -21,15 +17,6 @@ const useStyles = makeStyles((theme) => ({
       marginBottom: theme.spacing(6),
     },
   },
-  linearGradient: {
-    background: `linear-gradient(to left, ${COLORS.blue}, ${COLORS.green});`,
-    WebkitBackgroundClip: "text",
-    backgroundClip: "text",
-    WebkitTextFillColor: "transparent",
-    MozBackgroundClip: "text",
-    MozTextFillColor: "transparent",
-    // filter: `drop-shadow( 0px 0px 8px ${COLORS.nearBlack}) drop-shadow( 0px 0px 14px ${COLORS.nearBlack}) drop-shadow( 0px 0px 24px ${COLORS.nearBlack})`,
-  },
   description: {
     marginBottom: theme.spacing(2),
   },
@@ -57,10 +44,8 @@ function Home() {
   return (
     <div>
       <Container maxWidth="md">
-        <div className={classes.centeredContainer}>
+        <div className={classes.header}>
-          <Typography variant="h1" className={clsx(classes.header, classes.linearGradient)}>
+          <HeaderText>The Portal is Open</HeaderText>
-            The Portal is Open
-          </Typography>
         </div>
       </Container>
       <Container maxWidth="md">

bridge_ui/src/components/NFTOriginVerifier.tsx

@@ -23,7 +23,6 @@ import {
 import { Launch } from "@material-ui/icons";
 import { Alert } from "@material-ui/lab";
 import { Connection } from "@solana/web3.js";
-import clsx from "clsx";
 import { useCallback, useEffect, useState } from "react";
 import { useBetaContext } from "../contexts/BetaContext";
 import { useEthereumProvider } from "../contexts/EthereumProviderContext";
@@ -46,30 +45,11 @@ import {
   isNFT,
   isValidEthereumAddress,
 } from "../utils/ethereum";
+import HeaderText from "./HeaderText";
 import KeyAndBalance from "./KeyAndBalance";
 import NFTViewer from "./TokenSelectors/NFTViewer";
 
 const useStyles = makeStyles((theme) => ({
-  centeredContainer: {
-    textAlign: "center",
-    width: "100%",
-  },
-  header: {
-    marginTop: theme.spacing(12),
-    marginBottom: theme.spacing(4),
-    [theme.breakpoints.down("sm")]: {
-      marginBottom: theme.spacing(4),
-    },
-  },
-  linearGradient: {
-    background: `linear-gradient(to left, ${COLORS.blue}, ${COLORS.green});`,
-    WebkitBackgroundClip: "text",
-    backgroundClip: "text",
-    WebkitTextFillColor: "transparent",
-    MozBackgroundClip: "text",
-    MozTextFillColor: "transparent",
-    // filter: `drop-shadow( 0px 0px 8px ${COLORS.nearBlack}) drop-shadow( 0px 0px 14px ${COLORS.nearBlack}) drop-shadow( 0px 0px 24px ${COLORS.nearBlack})`,
-  },
   mainCard: {
     padding: theme.spacing(2),
     backgroundColor: COLORS.nearBlackWithMinorTransparency,
@@ -234,14 +214,7 @@ export default function NFTOriginVerifier() {
   return (
     <div>
       <Container maxWidth="md">
-        <div className={classes.centeredContainer}>
+        <HeaderText>NFT Origin Verifier</HeaderText>
-          <Typography
-            variant="h1"
-            className={clsx(classes.header, classes.linearGradient)}
-          >
-            NFT Origin Verifier
-          </Typography>
-        </div>
       </Container>
       <Container maxWidth="sm">
         <Card className={classes.mainCard}>