bridge_ui: add title to registration page
Change-Id: I58b32427c9eddc1e80f824210f294ae10f8f4b24
This commit is contained in:
parent
fe2b0d4d07
commit
b9c718c625
|
@ -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={
|
||||
["/transfer", "/nft", "/redeem"].includes(pathname)
|
||||
? pathname
|
||||
: "/transfer"
|
||||
}
|
||||
value={pathname}
|
||||
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>
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -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}>
|
||||
<Typography variant="h1" className={clsx(classes.header, classes.linearGradient)}>
|
||||
The Portal is Open
|
||||
</Typography>
|
||||
<div className={classes.header}>
|
||||
<HeaderText>The Portal is Open</HeaderText>
|
||||
</div>
|
||||
</Container>
|
||||
<Container maxWidth="md">
|
||||
|
|
|
@ -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}>
|
||||
<Typography
|
||||
variant="h1"
|
||||
className={clsx(classes.header, classes.linearGradient)}
|
||||
>
|
||||
NFT Origin Verifier
|
||||
</Typography>
|
||||
</div>
|
||||
<HeaderText>NFT Origin Verifier</HeaderText>
|
||||
</Container>
|
||||
<Container maxWidth="sm">
|
||||
<Card className={classes.mainCard}>
|
||||
|
|
Loading…
Reference in New Issue