certusone
/
wormhole
mirror of https://github.com/certusone/wormhole.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

bridge_ui: homepage redesign 

Change-Id: I74e5623b171cbc4f907f0ee0903677e9aae630a7
This commit is contained in:
Chase Moran 2021-09-19 15:31:02 -04:00
parent 6ab6c95fdf
commit 57a3e55608
13 changed files with 3956 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
bridge_ui/src/components/Attest/index.tsx
View File

@ -9,6 +9,7 @@ import {
import { Alert } from "@material-ui/lab";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { COLORS } from "../../muiTheme";
import { setStep } from "../../store/attestSlice";
import {
selectAttestActiveStep,
@ -28,7 +29,7 @@ import TargetPreview from "./TargetPreview";
const useStyles = makeStyles(() => ({
rootContainer: {
backgroundColor: "rgba(0,0,0,0.2)",
backgroundColor: COLORS.nearBlackWithMinorTransparency,
},
}));

51
bridge_ui/src/components/BackgroundImage.tsx Normal file
View File

@ -0,0 +1,51 @@
import { makeStyles } from "@material-ui/core";
import { useRouteMatch } from "react-router";
import holev2 from "../images/holev2.svg";
const useStyles = makeStyles((theme) => ({
holeOuterContainer: {
maxWidth: "100%",
width: "100%",
position: "relative",
},
holeInnerContainer: {
position: "absolute",
zIndex: -1,
left: "50%",
transform: "translate(-50%, 0)",
width: "100%",
maxWidth: "100%",
overflow: "hidden",
display: "flex",
justifyContent: "center",
},
holeImage: {
width: "max(1200px, 100vw)",
maxWidth: "1600px",
},
blurred: {
filter: "blur(2px)",
opacity: ".9",
},
}));
const BackgroundImage = () => {
const classes = useStyles();
const isHomepage = useRouteMatch({ path: "/", exact: true });
return (
<div className={classes.holeOuterContainer}>
<div className={classes.holeInnerContainer}>
<img
src={holev2}
alt=""
className={
classes.holeImage + (isHomepage ? "" : " " + classes.blurred)
}
/>
</div>
</div>
);
};
export default BackgroundImage;

96
bridge_ui/src/components/Home/index.tsx
View File

@ -1,29 +1,38 @@
import {
Button,
Card,
Container,
Link,
makeStyles,
Typography,
} from "@material-ui/core";
import { Link as RouterLink } from "react-router-dom";
import overview from "../../images/overview.svg";
import overview from "../../images/overview2.svg";
import { COLORS } from "../../muiTheme";
const useStyles = makeStyles((theme) => ({
rootContainer: {
backgroundColor: "rgba(0,0,0,0.2)",
margin: theme.spacing(4, 0),
padding: theme.spacing(4, 4),
centeredContainer: {
textAlign: "center",
width: "100%",
},
header: {
marginBottom: theme.spacing(12),
marginTop: theme.spacing(12),
marginBottom: theme.spacing(15),
[theme.breakpoints.down("sm")]: {
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: {
fontWeight: 400,
marginBottom: theme.spacing(4),
marginBottom: theme.spacing(2),
},
button: {
marginBottom: theme.spacing(4),
@ -35,56 +44,81 @@ const useStyles = makeStyles((theme) => ({
},
maxWidth: "100%",
},
mainCard: {
padding: theme.spacing(1),
borderRadius: "5px",
backgroundColor: COLORS.nearBlackWithMinorTransparency,
},
spacer: {
height: theme.spacing(5),
},
}));
function Home() {
const classes = useStyles();
return (
<Container maxWidth="lg">
<div className={classes.rootContainer}>
<Typography variant="h3" className={classes.header}>
The portal is open.
<div>
<Container maxWidth="md">
<div className={classes.centeredContainer}>
<Typography variant="h2" component="h1" className={classes.header}>
<span className={classes.linearGradient}>The Portal is Open</span>
</Typography>
<Typography variant="h5" gutterBottom>
</div>
</Container>
<Container maxWidth="sm">
<Card className={classes.mainCard}>
<Typography variant="h4" className={classes.description}>
Wormhole v2 is here!
</Typography>
<Typography variant="subtitle1" gutterBottom>
If you transferred assets using the previous version of Wormhole, most
assets can be migrated to v2 on the{" "}
<Link component={RouterLink} to="/transfer" color="secondary">
transfer page
</Link>
.
</Typography>
<Typography variant="subtitle1" className={classes.header}>
For assets that don't support the migration, the v1 UI can be found at{" "}
<Link href="https://v1.wormholebridge.com" color="secondary">
v1.wormholebridge.com
</Link>
</Typography>
<Typography variant="h6" className={classes.description}>
The Wormhole Token Bridge allows you to seamlessly transfer tokenized
assets across Solana and Ethereum.
The Wormhole Token Bridge allows you to seamlessly transfer
tokenized assets across Solana and Ethereum.
</Typography>
<Button
component={RouterLink}
to="/transfer"
variant="contained"
color="primary"
color="secondary"
size="large"
className={classes.button}
>
Transfer Tokens
</Button>
<Typography variant="h6" className={classes.description}>
<div className={classes.spacer} />
<Typography variant="subtitle1" className={classes.description}>
If you transferred assets using the previous version of Wormhole,
most assets can be migrated to v2 on the{" "}
<Link
component={RouterLink}
to="/transfer"
color="secondary"
noWrap
>
transfer page
</Link>
.
</Typography>
<Typography variant="subtitle1" className={classes.description}>
For assets that don't support the migration, the v1 UI can be found
at{" "}
<Link href="https://v1.wormholebridge.com" color="secondary">
v1.wormholebridge.com
</Link>
</Typography>
<Typography variant="subtitle1" className={classes.description}>
To learn more about the Wormhole Protocol that powers it, visit{" "}
<Link href="https://wormholenetwork.com/en/" color="secondary">
wormholenetwork.com
</Link>
</Typography>
</Card>
</Container>
<Container maxWidth="md">
<div className={classes.centeredContainer}>
<img src={overview} alt="overview" className={classes.overview} />
</div>
</Container>
</div>
);
}

2
bridge_ui/src/components/Migration/Workflow.tsx
View File

@ -22,6 +22,7 @@ import { useSolanaWallet } from "../../contexts/SolanaWalletContext";
import useIsWalletReady from "../../hooks/useIsWalletReady";
import useMetaplexData from "../../hooks/useMetaplexData";
import useSolanaTokenMap from "../../hooks/useSolanaTokenMap";
import { COLORS } from "../../muiTheme";
import { MIGRATION_PROGRAM_ADDRESS, SOLANA_HOST } from "../../utils/consts";
import { getMultipleAccounts, signSendAndConfirm } from "../../utils/solana";
import ButtonWithLoader from "../ButtonWithLoader";
@ -35,6 +36,7 @@ import SolanaWalletKey from "../SolanaWalletKey";
const useStyles = makeStyles(() => ({
mainPaper: {
backgroundColor: COLORS.nearBlackWithMinorTransparency,
textAlign: "center",
padding: "2rem",
"& > h, p ": {

3
bridge_ui/src/components/NFT/index.tsx
View File

@ -27,10 +27,11 @@ import Source from "./Source";
import SourcePreview from "./SourcePreview";
import Target from "./Target";
import TargetPreview from "./TargetPreview";
import { COLORS } from "../../muiTheme";
const useStyles = makeStyles(() => ({
rootContainer: {
backgroundColor: "rgba(0,0,0,0.2)",
backgroundColor: COLORS.nearBlackWithMinorTransparency,
},
}));

34
bridge_ui/src/components/RadialGradient.tsx
View File

@ -1,34 +0,0 @@
import { makeStyles } from "@material-ui/core";
import hole from "../images/hole.svg";
const useStyles = makeStyles((theme) => ({
root: {
position: "fixed",
top: 0,
right: 0,
bottom: 0,
left: 0,
background: `radial-gradient(100% 100% at 100% 125%,${theme.palette.secondary.dark} 0,rgba(255,255,255,0) 100%)`,
zIndex: -1,
},
hole: {
position: "fixed",
bottom: 0,
right: 0,
opacity: 0.3,
filter: "blur(1px)",
zIndex: -1,
},
}));
const RadialGradient = () => {
const classes = useStyles();
return (
<>
<img src={hole} alt="" className={classes.hole} />
<div className={classes.root} />
</>
);
};
export default RadialGradient;

3
bridge_ui/src/components/Transfer/index.tsx
View File

@ -11,6 +11,7 @@ import { useDispatch, useSelector } from "react-redux";
import useCheckIfWormholeWrapped from "../../hooks/useCheckIfWormholeWrapped";
import useFetchTargetAsset from "../../hooks/useFetchTargetAsset";
import useGetBalanceEffect from "../../hooks/useGetBalanceEffect";
import { COLORS } from "../../muiTheme";
import {
selectTransferActiveStep,
selectTransferIsRedeemComplete,
@ -31,7 +32,7 @@ import TargetPreview from "./TargetPreview";
const useStyles = makeStyles(() => ({
rootContainer: {
backgroundColor: "rgba(0,0,0,0.2)",
backgroundColor: COLORS.nearBlackWithMinorTransparency,
},
}));

14
bridge_ui/src/images/hole.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 49 KiB

3740
bridge_ui/src/images/holev2.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

16
bridge_ui/src/images/overview.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 53 KiB

46
bridge_ui/src/images/overview2.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 193 KiB

4
bridge_ui/src/index.js
View File

@ -5,7 +5,7 @@ import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { HashRouter } from "react-router-dom";
import App from "./App";
import RadialGradient from "./components/RadialGradient";
import BackgroundImage from "./components/BackgroundImage";
import { EthereumProviderProvider } from "./contexts/EthereumProviderContext";
import { SolanaWalletProvider } from "./contexts/SolanaWalletContext.tsx";
import { TerraWalletProvider } from "./contexts/TerraWalletContext.tsx";
@ -18,13 +18,13 @@ ReactDOM.render(
<Provider store={store}>
<ThemeProvider theme={theme}>
<CssBaseline />
<RadialGradient />
<ErrorBoundary>
<SnackbarProvider maxSnack={3}>
<SolanaWalletProvider>
<EthereumProviderProvider>
<TerraWalletProvider>
<HashRouter>
<BackgroundImage />
<App />
</HashRouter>
</TerraWalletProvider>

28
bridge_ui/src/muiTheme.js
View File

@ -1,23 +1,33 @@
import { createTheme, responsiveFontSizes } from "@material-ui/core";
export const COLORS = {
lightGreen: "rgba(51, 242, 223, 1)",
green: "#00EFD8",
blue: "#0074FF",
blueWithTransparency: "rgba(0, 116, 255, 0.8)",
greenWithTransparency: "rgba(0,239,216,0.8)",
nearBlack: "#010114",
nearBlackWithMinorTransparency: "rgba(0,0,0,.97)",
};
export const theme = responsiveFontSizes(
createTheme({
palette: {
type: "dark",
background: {
default: "#010114",
paper: "#010114",
default: COLORS.nearBlack,
paper: COLORS.nearBlack,
},
divider: "#4e4e54",
text: {
primary: "rgba(255,255,255,0.98)",
},
primary: {
main: "rgba(0, 116, 255, 0.8)", // #0074FF
main: COLORS.blueWithTransparency, // #0074FF
},
secondary: {
main: "rgb(0,239,216,0.8)", // #00EFD8
light: "rgb(51, 242, 223, 1)",
main: COLORS.greenWithTransparency, // #00EFD8
light: COLORS.lightGreen,
},
error: {
main: "#FD3503",
@ -25,11 +35,17 @@ export const theme = responsiveFontSizes(
},
typography: {
fontFamily: "'Sora', sans-serif",
h2: {
fontWeight: "700",
},
h4: {
fontWeight: "500",
},
},
overrides: {
MuiButton: {
root: {
borderRadius: 0,
borderRadius: "5px",
textTransform: "none",
},
},