282 lines
8.8 KiB
TypeScript
282 lines
8.8 KiB
TypeScript
import { IconButton, Link, makeStyles, Typography } from "@material-ui/core";
|
|
import { Link as RouterLink, NavLink } from "react-router-dom";
|
|
import Discord from "../icons/Discord.svg";
|
|
import Github from "../icons/Github.svg";
|
|
import Medium from "../icons/Medium.svg";
|
|
import Portal from "../icons/portal_logo_w.svg";
|
|
import Telegram from "../icons/Telegram.svg";
|
|
import Twitter from "../icons/Twitter.svg";
|
|
import footerImg from "../images/Footer.png";
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
footer: {
|
|
position: "relative",
|
|
},
|
|
backdrop: {
|
|
position: "absolute",
|
|
zIndex: -1,
|
|
background: `url(${footerImg})`,
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundPosition: "center 250px",
|
|
backgroundSize: "cover",
|
|
width: "100%",
|
|
height: "100%",
|
|
opacity: 0.25,
|
|
},
|
|
container: {
|
|
maxWidth: 1100,
|
|
margin: "0px auto",
|
|
paddingTop: theme.spacing(11),
|
|
paddingBottom: theme.spacing(6.5),
|
|
[theme.breakpoints.up("md")]: {
|
|
paddingBottom: theme.spacing(12),
|
|
},
|
|
},
|
|
flex: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
marginLeft: theme.spacing(3.5),
|
|
marginRight: theme.spacing(3.5),
|
|
borderTop: "1px solid #585587",
|
|
paddingTop: theme.spacing(7),
|
|
[theme.breakpoints.up("md")]: {
|
|
flexWrap: "wrap",
|
|
flexDirection: "row",
|
|
alignItems: "unset",
|
|
},
|
|
},
|
|
logoWrapper: {
|
|
paddingLeft: theme.spacing(0),
|
|
paddingBottom: theme.spacing(2),
|
|
borderTop: "1px solid #585587",
|
|
paddingTop: theme.spacing(7),
|
|
width: "100%",
|
|
textAlign: "center",
|
|
[theme.breakpoints.up("md")]: {
|
|
paddingLeft: theme.spacing(2),
|
|
paddingBottom: theme.spacing(2),
|
|
borderTop: "none",
|
|
paddingTop: theme.spacing(0),
|
|
width: "auto",
|
|
textAlign: "left",
|
|
},
|
|
},
|
|
spacer: {
|
|
flexGrow: 1,
|
|
},
|
|
linksWrapper: {
|
|
paddingLeft: theme.spacing(0),
|
|
order: -2,
|
|
textAlign: "center",
|
|
marginBottom: theme.spacing(7),
|
|
[theme.breakpoints.up("md")]: {
|
|
paddingLeft: theme.spacing(2),
|
|
order: 0,
|
|
textAlign: "left",
|
|
mb: theme.spacing(0),
|
|
},
|
|
},
|
|
linkStyle: {
|
|
color: "white",
|
|
display: "block",
|
|
marginRight: theme.spacing(0),
|
|
marginBottom: theme.spacing(1.5),
|
|
fontSize: 14,
|
|
textUnderlineOffset: "6px",
|
|
[theme.breakpoints.up("md")]: {
|
|
marginRight: theme.spacing(7.5),
|
|
},
|
|
},
|
|
linkActiveStyle: { textDecoration: "underline" },
|
|
socialWrapper: {
|
|
padding: theme.spacing(0, 2),
|
|
order: -2,
|
|
textAlign: "center",
|
|
borderTop: "1px solid #585587",
|
|
paddingTop: theme.spacing(7),
|
|
width: "100%",
|
|
marginBottom: theme.spacing(7),
|
|
[theme.breakpoints.up("md")]: {
|
|
order: 0,
|
|
textAlign: "left",
|
|
borderTop: "none",
|
|
paddingTop: theme.spacing(0),
|
|
width: "auto",
|
|
marginBottom: theme.spacing(0),
|
|
},
|
|
},
|
|
socialHeader: {
|
|
marginBottom: theme.spacing(3),
|
|
},
|
|
socialIcon: {
|
|
padding: theme.spacing(1),
|
|
"& img": {
|
|
height: 24,
|
|
width: 24,
|
|
},
|
|
},
|
|
builtWithContainer: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
opacity: 0.5,
|
|
marginTop: theme.spacing(1),
|
|
},
|
|
wormholeIcon: {
|
|
height: 68,
|
|
marginTop: -24,
|
|
},
|
|
copyWrapper: {
|
|
flexBasis: "100%",
|
|
paddingTop: theme.spacing(0),
|
|
textAlign: "center",
|
|
},
|
|
}));
|
|
|
|
export default function Footer() {
|
|
const classes = useStyles();
|
|
return (
|
|
<footer className={classes.footer}>
|
|
<div className={classes.backdrop} />
|
|
<div className={classes.container}>
|
|
<div className={classes.flex}>
|
|
<div className={classes.logoWrapper}>
|
|
<RouterLink to={"/transfer"}>
|
|
<img src={Portal} alt="Portal" className={classes.wormholeIcon} />
|
|
</RouterLink>
|
|
</div>
|
|
<div className={classes.spacer} />
|
|
<div className={classes.linksWrapper}>
|
|
<div>
|
|
<Link
|
|
component={NavLink}
|
|
to={"/transfer"}
|
|
color="inherit"
|
|
underline="hover"
|
|
className={classes.linkStyle}
|
|
activeClassName={classes.linkActiveStyle}
|
|
>
|
|
Bridge
|
|
</Link>
|
|
<Link
|
|
href="https://docs.wormholenetwork.com/wormhole/faqs"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
color="inherit"
|
|
underline="hover"
|
|
className={classes.linkStyle}
|
|
>
|
|
FAQ
|
|
</Link>
|
|
<Link
|
|
component={NavLink}
|
|
to={"/stats"}
|
|
color="inherit"
|
|
underline="hover"
|
|
className={classes.linkStyle}
|
|
activeClassName={classes.linkActiveStyle}
|
|
>
|
|
Stats
|
|
</Link>
|
|
<Link
|
|
href="https://wormholenetwork.com/"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
color="inherit"
|
|
underline="hover"
|
|
className={classes.linkStyle}
|
|
>
|
|
Wormhole
|
|
</Link>
|
|
<Link
|
|
component={NavLink}
|
|
to={"/custody-addresses"}
|
|
color="inherit"
|
|
underline="hover"
|
|
className={classes.linkStyle}
|
|
activeClassName={classes.linkActiveStyle}
|
|
>
|
|
Custody
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className={classes.spacer} />
|
|
<div className={classes.socialWrapper}>
|
|
<Typography className={classes.socialHeader}>
|
|
Let's be friends
|
|
</Typography>
|
|
<IconButton
|
|
href="https://discord.gg/wormholecrypto"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={classes.socialIcon}
|
|
>
|
|
<img src={Discord} alt="Discord" />
|
|
</IconButton>
|
|
<IconButton
|
|
href="https://github.com/certusone/wormhole"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={classes.socialIcon}
|
|
>
|
|
<img src={Github} alt="Github" />
|
|
</IconButton>
|
|
<IconButton
|
|
href="http://wormholecrypto.medium.com"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={classes.socialIcon}
|
|
>
|
|
<img src={Medium} alt="Medium" />
|
|
</IconButton>
|
|
<IconButton
|
|
href="https://t.me/wormholecrypto"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={classes.socialIcon}
|
|
>
|
|
<img src={Telegram} alt="Telegram" />
|
|
</IconButton>
|
|
<IconButton
|
|
href="https://twitter.com/portalbridge_"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={classes.socialIcon}
|
|
>
|
|
<img src={Twitter} alt="Twitter" />
|
|
</IconButton>
|
|
</div>
|
|
<div className={classes.copyWrapper}>
|
|
<Typography variant="body2" gutterBottom>
|
|
2022 © Wormhole. All Rights Reserved.
|
|
</Typography>
|
|
</div>
|
|
<Typography variant="body2">
|
|
This Interface is an open source software portal to Wormhole, a
|
|
cross chain messaging protocol. THIS INTERFACE AND THE WORMHOLE
|
|
PROTOCOL ARE PROVIDED "AS IS", AT YOUR OWN RISK, AND WITHOUT
|
|
WARRANTIES OF ANY KIND. By using or accessing this Interface or
|
|
Wormhole, you agree that no developer or entity involved in
|
|
creating, deploying, maintaining, operating this Interface or
|
|
Wormhole, or causing or supporting any of the foregoing, will be
|
|
liable in any manner for any claims or damages whatsoever associated
|
|
with your use, inability to use, or your interaction with other
|
|
users of, this Interface or Wormhole, or this Interface or Wormhole
|
|
themselves, including any direct, indirect, incidental, special,
|
|
exemplary, punitive or consequential damages, or loss of profits,
|
|
cryptocurrencies, tokens, or anything else of value. By using or
|
|
accessing this Interface, you represent that you are not subject to
|
|
sanctions or otherwise designated on any list of prohibited or
|
|
restricted parties or excluded or denied persons, including but not
|
|
limited to the lists maintained by the United States' Department of
|
|
Treasury's Office of Foreign Assets Control, the United Nations
|
|
Security Council, the European Union or its Member States, or any
|
|
other government authority.
|
|
</Typography>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|