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 classes = useStyles();
|
||||||
const isBeta = useBetaContext();
|
const isBeta = useBetaContext();
|
||||||
const isHomepage = useRouteMatch({ path: "/", exact: true });
|
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 { push } = useHistory();
|
||||||
const { pathname } = useLocation();
|
const { pathname } = useLocation();
|
||||||
const handleTabChange = useCallback(
|
const handleTabChange = useCallback(
|
||||||
|
@ -249,14 +243,10 @@ function App() {
|
||||||
</AppBar>
|
</AppBar>
|
||||||
) : null}
|
) : null}
|
||||||
<div className={classes.content}>
|
<div className={classes.content}>
|
||||||
{isHomepage || isOriginVerifier || isStats || isMigrate ? null : (
|
{["/transfer", "/nft", "/redeem"].includes(pathname) ? (
|
||||||
<Container maxWidth="md" style={{ paddingBottom: 24 }}>
|
<Container maxWidth="md" style={{ paddingBottom: 24 }}>
|
||||||
<Tabs
|
<Tabs
|
||||||
value={
|
value={pathname}
|
||||||
["/transfer", "/nft", "/redeem"].includes(pathname)
|
|
||||||
? pathname
|
|
||||||
: "/transfer"
|
|
||||||
}
|
|
||||||
variant="fullWidth"
|
variant="fullWidth"
|
||||||
onChange={handleTabChange}
|
onChange={handleTabChange}
|
||||||
indicatorColor="primary"
|
indicatorColor="primary"
|
||||||
|
@ -266,20 +256,20 @@ function App() {
|
||||||
<Tab label="Redeem" value="/redeem" to="/redeem" />
|
<Tab label="Redeem" value="/redeem" to="/redeem" />
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</Container>
|
</Container>
|
||||||
)}
|
) : null}
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route exact path="/nft">
|
|
||||||
<NFT />
|
|
||||||
</Route>
|
|
||||||
<Route exact path="/nft-origin-verifier">
|
|
||||||
<NFTOriginVerifier />
|
|
||||||
</Route>
|
|
||||||
<Route exact path="/transfer">
|
<Route exact path="/transfer">
|
||||||
<Transfer />
|
<Transfer />
|
||||||
</Route>
|
</Route>
|
||||||
|
<Route exact path="/nft">
|
||||||
|
<NFT />
|
||||||
|
</Route>
|
||||||
<Route exact path="/redeem">
|
<Route exact path="/redeem">
|
||||||
<Recovery />
|
<Recovery />
|
||||||
</Route>
|
</Route>
|
||||||
|
<Route exact path="/nft-origin-verifier">
|
||||||
|
<NFTOriginVerifier />
|
||||||
|
</Route>
|
||||||
<Route exact path="/register">
|
<Route exact path="/register">
|
||||||
<Attest />
|
<Attest />
|
||||||
</Route>
|
</Route>
|
||||||
|
|
|
@ -16,6 +16,7 @@ import {
|
||||||
selectAttestIsSendComplete,
|
selectAttestIsSendComplete,
|
||||||
selectAttestIsSending,
|
selectAttestIsSending,
|
||||||
} from "../../store/selectors";
|
} from "../../store/selectors";
|
||||||
|
import HeaderText from "../HeaderText";
|
||||||
import Create from "./Create";
|
import Create from "./Create";
|
||||||
import CreatePreview from "./CreatePreview";
|
import CreatePreview from "./CreatePreview";
|
||||||
import Send from "./Send";
|
import Send from "./Send";
|
||||||
|
@ -44,6 +45,7 @@ function Attest() {
|
||||||
}, [preventNavigation]);
|
}, [preventNavigation]);
|
||||||
return (
|
return (
|
||||||
<Container maxWidth="md">
|
<Container maxWidth="md">
|
||||||
|
<HeaderText>Token Registration</HeaderText>
|
||||||
<Alert severity="info">
|
<Alert severity="info">
|
||||||
This form allows you to register a token on a new foreign chain. Tokens
|
This form allows you to register a token on a new foreign chain. Tokens
|
||||||
must be registered before they can be transferred.
|
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,
|
makeStyles,
|
||||||
Typography,
|
Typography,
|
||||||
} from "@material-ui/core";
|
} from "@material-ui/core";
|
||||||
import clsx from "clsx";
|
|
||||||
import { Link as RouterLink } from "react-router-dom";
|
import { Link as RouterLink } from "react-router-dom";
|
||||||
import { COLORS } from "../../muiTheme";
|
import { COLORS } from "../../muiTheme";
|
||||||
|
import HeaderText from "../HeaderText";
|
||||||
|
|
||||||
const useStyles = makeStyles((theme) => ({
|
const useStyles = makeStyles((theme) => ({
|
||||||
centeredContainer: {
|
|
||||||
textAlign: "center",
|
|
||||||
width: "100%",
|
|
||||||
},
|
|
||||||
header: {
|
header: {
|
||||||
marginTop: theme.spacing(12),
|
marginTop: theme.spacing(12),
|
||||||
marginBottom: theme.spacing(15),
|
marginBottom: theme.spacing(15),
|
||||||
|
@ -21,15 +17,6 @@ const useStyles = makeStyles((theme) => ({
|
||||||
marginBottom: theme.spacing(6),
|
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: {
|
description: {
|
||||||
marginBottom: theme.spacing(2),
|
marginBottom: theme.spacing(2),
|
||||||
},
|
},
|
||||||
|
@ -57,10 +44,8 @@ function Home() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Container maxWidth="md">
|
<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>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
<Container maxWidth="md">
|
<Container maxWidth="md">
|
||||||
|
|
|
@ -23,7 +23,6 @@ import {
|
||||||
import { Launch } from "@material-ui/icons";
|
import { Launch } from "@material-ui/icons";
|
||||||
import { Alert } from "@material-ui/lab";
|
import { Alert } from "@material-ui/lab";
|
||||||
import { Connection } from "@solana/web3.js";
|
import { Connection } from "@solana/web3.js";
|
||||||
import clsx from "clsx";
|
|
||||||
import { useCallback, useEffect, useState } from "react";
|
import { useCallback, useEffect, useState } from "react";
|
||||||
import { useBetaContext } from "../contexts/BetaContext";
|
import { useBetaContext } from "../contexts/BetaContext";
|
||||||
import { useEthereumProvider } from "../contexts/EthereumProviderContext";
|
import { useEthereumProvider } from "../contexts/EthereumProviderContext";
|
||||||
|
@ -46,30 +45,11 @@ import {
|
||||||
isNFT,
|
isNFT,
|
||||||
isValidEthereumAddress,
|
isValidEthereumAddress,
|
||||||
} from "../utils/ethereum";
|
} from "../utils/ethereum";
|
||||||
|
import HeaderText from "./HeaderText";
|
||||||
import KeyAndBalance from "./KeyAndBalance";
|
import KeyAndBalance from "./KeyAndBalance";
|
||||||
import NFTViewer from "./TokenSelectors/NFTViewer";
|
import NFTViewer from "./TokenSelectors/NFTViewer";
|
||||||
|
|
||||||
const useStyles = makeStyles((theme) => ({
|
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: {
|
mainCard: {
|
||||||
padding: theme.spacing(2),
|
padding: theme.spacing(2),
|
||||||
backgroundColor: COLORS.nearBlackWithMinorTransparency,
|
backgroundColor: COLORS.nearBlackWithMinorTransparency,
|
||||||
|
@ -234,14 +214,7 @@ export default function NFTOriginVerifier() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Container maxWidth="md">
|
<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>
|
||||||
<Container maxWidth="sm">
|
<Container maxWidth="sm">
|
||||||
<Card className={classes.mainCard}>
|
<Card className={classes.mainCard}>
|
||||||
|
|
Loading…
Reference in New Issue