diff --git a/bridge_ui/src/App.js b/bridge_ui/src/App.js
index 0bfa4f84e..a000164c4 100644
--- a/bridge_ui/src/App.js
+++ b/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() {
) : null}
- {isHomepage || isOriginVerifier || isStats || isMigrate ? null : (
+ {["/transfer", "/nft", "/redeem"].includes(pathname) ? (
- )}
+ ) : null}
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/bridge_ui/src/components/Attest/index.tsx b/bridge_ui/src/components/Attest/index.tsx
index 2f60be034..5a5fa4b97 100644
--- a/bridge_ui/src/components/Attest/index.tsx
+++ b/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 (
+ Token Registration
This form allows you to register a token on a new foreign chain. Tokens
must be registered before they can be transferred.
diff --git a/bridge_ui/src/components/HeaderText.tsx b/bridge_ui/src/components/HeaderText.tsx
new file mode 100644
index 000000000..0beb5e729
--- /dev/null
+++ b/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 (
+
+
+ {children}
+
+
+ );
+}
diff --git a/bridge_ui/src/components/Home/index.tsx b/bridge_ui/src/components/Home/index.tsx
index 2ff059c2b..572ecf8ae 100644
--- a/bridge_ui/src/components/Home/index.tsx
+++ b/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 (
-
-
- The Portal is Open
-
+
+ The Portal is Open
diff --git a/bridge_ui/src/components/NFTOriginVerifier.tsx b/bridge_ui/src/components/NFTOriginVerifier.tsx
index 87b4b7898..8fc236af0 100644
--- a/bridge_ui/src/components/NFTOriginVerifier.tsx
+++ b/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 (
-
-
- NFT Origin Verifier
-
-
+ NFT Origin Verifier