Skip to content

Commit

Permalink
bridge_ui: stats page overhaul, added custody-addresses page
Browse files Browse the repository at this point in the history
  • Loading branch information
@kev1n-peters
kev1n-peters committed Apr 28, 2022
1 parent 19fb468 commit c626eaf
Show file tree
Hide file tree
Showing 28 changed files with 2,767 additions and 357 deletions.
520 changes: 520 additions & 0 deletions bridge_ui/package-lock.json
View file

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions bridge_ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"clsx": "^1.1.1",
"ethers": "^5.4.1",
"js-base64": "^3.6.1",
"luxon": "^2.3.1",
"notistack": "^1.0.10",
"numeral": "^2.0.6",
"react": "^17.0.2",
Expand All @@ -34,6 +35,7 @@
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.0",
"react-table": "^7.7.0",
"recharts": "^2.1.9",
"redux": "^3.7.2",
"use-debounce": "^7.0.0"
},
Expand Down Expand Up @@ -63,6 +65,7 @@
},
"devDependencies": {
"@truffle/hdwallet-provider": "^1.4.1",
"@types/luxon": "^2.3.1",
"@types/node": "^16.6.1",
"@types/numeral": "^2.0.2",
"@types/react-router-dom": "^5.1.8",
Expand Down
178 changes: 87 additions & 91 deletions bridge_ui/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import NFT from "./components/NFT";
import NFTOriginVerifier from "./components/NFTOriginVerifier";
import Recovery from "./components/Recovery";
import Stats from "./components/Stats";
import CustodyAddresses from "./components/Stats/CustodyAddresses";
import TokenOriginVerifier from "./components/TokenOriginVerifier";
import Transfer from "./components/Transfer";
import UnwrapNative from "./components/UnwrapNative";
Expand Down Expand Up @@ -85,19 +86,13 @@ const useStyles = makeStyles((theme) => ({
position: "relative",
overflow: "hidden",
},
content: {
margin: theme.spacing(2, 0),
[theme.breakpoints.up("md")]: {
margin: theme.spacing(4, 0),
},
},
headerImage: {
position: "absolute",
zIndex: -1,
top: 0,
background: `url(${Header})`,
backgroundRepeat: "no-repeat",
backgroundPosition: "top -500px center",
backgroundPosition: "top -750px center",
backgroundSize: "2070px 1155px",
width: "100%",
height: 1155,
Expand Down Expand Up @@ -291,90 +286,91 @@ function App() {
</Typography>
</AppBar>
) : null}
<div className={classes.content}>
<div className={classes.headerImage} />
{["/transfer", "/nft", "/redeem"].includes(pathname) ? (
<Container maxWidth="md" style={{ paddingBottom: 24 }}>
<HeaderText
white
subtitle={
<>
<Typography>
Portal is a bridge that offers unlimited transfers across
chains for tokens and NFTs wrapped by Wormhole.
</Typography>
<Typography>
Unlike many other bridges, you avoid double wrapping and
never have to retrace your steps.
</Typography>
</>
}
>
Token Bridge
</HeaderText>
<Tabs
value={pathname}
variant="fullWidth"
onChange={handleTabChange}
indicatorColor="primary"
>
<Tab label="Tokens" value="/transfer" />
<Tab label="NFTs" value="/nft" />
<Tab label="Redeem" value="/redeem" to="/redeem" />
</Tabs>
</Container>
) : null}
<Switch>
<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="/token-origin-verifier">
<TokenOriginVerifier />
</Route>
<Route exact path="/register">
<Attest />
</Route>
<Route exact path="/migrate/Solana/:legacyAsset/:fromTokenAccount">
<Migration chainId={CHAIN_ID_SOLANA} />
</Route>
<Route exact path="/migrate/Ethereum/:legacyAsset/">
<Migration chainId={CHAIN_ID_ETH} />
</Route>
<Route exact path="/migrate/BinanceSmartChain/:legacyAsset/">
<Migration chainId={CHAIN_ID_BSC} />
</Route>
<Route exact path="/migrate/Ethereum/">
<EvmQuickMigrate chainId={CHAIN_ID_ETH} />
</Route>
<Route exact path="/migrate/BinanceSmartChain/">
<EvmQuickMigrate chainId={CHAIN_ID_BSC} />
</Route>
<Route exact path="/migrate/Solana/">
<SolanaQuickMigrate />
</Route>
<Route exact path="/stats">
<Stats />
</Route>
<Route exact path="/withdraw-tokens-terra">
<WithdrawTokensTerra />
</Route>
<Route exact path="/unwrap-native">
<UnwrapNative />
</Route>
<Route>
<Redirect to="/transfer" />
</Route>
</Switch>
</div>
<div className={classes.headerImage} />
{["/transfer", "/nft", "/redeem"].includes(pathname) ? (
<Container maxWidth="md" style={{ paddingBottom: 24 }}>
<HeaderText
white
subtitle={
<>
<Typography>
Portal is a bridge that offers unlimited transfers across
chains for tokens and NFTs wrapped by Wormhole.
</Typography>
<Typography>
Unlike many other bridges, you avoid double wrapping and never
have to retrace your steps.
</Typography>
</>
}
>
Token Bridge
</HeaderText>
<Tabs
value={pathname}
variant="fullWidth"
onChange={handleTabChange}
indicatorColor="primary"
>
<Tab label="Tokens" value="/transfer" />
<Tab label="NFTs" value="/nft" />
<Tab label="Redeem" value="/redeem" to="/redeem" />
</Tabs>
</Container>
) : null}
<Switch>
<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="/token-origin-verifier">
<TokenOriginVerifier />
</Route>
<Route exact path="/register">
<Attest />
</Route>
<Route exact path="/migrate/Solana/:legacyAsset/:fromTokenAccount">
<Migration chainId={CHAIN_ID_SOLANA} />
</Route>
<Route exact path="/migrate/Ethereum/:legacyAsset/">
<Migration chainId={CHAIN_ID_ETH} />
</Route>
<Route exact path="/migrate/BinanceSmartChain/:legacyAsset/">
<Migration chainId={CHAIN_ID_BSC} />
</Route>
<Route exact path="/migrate/Ethereum/">
<EvmQuickMigrate chainId={CHAIN_ID_ETH} />
</Route>
<Route exact path="/migrate/BinanceSmartChain/">
<EvmQuickMigrate chainId={CHAIN_ID_BSC} />
</Route>
<Route exact path="/migrate/Solana/">
<SolanaQuickMigrate />
</Route>
<Route exact path="/stats">
<Stats />
</Route>
<Route exact path="/withdraw-tokens-terra">
<WithdrawTokensTerra />
</Route>
<Route exact path="/unwrap-native">
<UnwrapNative />
</Route>
<Route exact path="/custody-addresses">
<CustodyAddresses />
</Route>
<Route>
<Redirect to="/transfer" />
</Route>
</Switch>
<div className={classes.spacer} />
<div className={classes.gradientRight}></div>
<div className={classes.gradientRight2}></div>
Expand Down
10 changes: 10 additions & 0 deletions bridge_ui/src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,16 @@ export default function Footer() {
>
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} />
Expand Down
14 changes: 9 additions & 5 deletions bridge_ui/src/components/HeaderText.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ import { COLORS } from "../muiTheme";

const useStyles = makeStyles((theme) => ({
centeredContainer: {
marginTop: theme.spacing(14),
marginBottom: theme.spacing(26),
minHeight: 208,
marginBottom: theme.spacing(24),
textAlign: "center",
width: "100%",
},
Expand All @@ -19,6 +17,9 @@ const useStyles = makeStyles((theme) => ({
MozBackgroundClip: "text",
MozTextFillColor: "transparent",
},
subtitle: {
marginTop: theme.spacing(2),
},
}));

export default function HeaderText({
Expand All @@ -39,11 +40,14 @@ export default function HeaderText({
variant={small ? "h2" : "h1"}
component="h1"
className={clsx({ [classes.linearGradient]: !white })}
gutterBottom={!!subtitle}
>
{children}
</Typography>
{subtitle ? <Typography component="div">{subtitle}</Typography> : null}
{subtitle ? (
<Typography component="div" className={classes.subtitle}>
{subtitle}
</Typography>
) : null}
</div>
);
}
46 changes: 46 additions & 0 deletions bridge_ui/src/components/Stats/Charts/CustomTooltip.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { makeStyles, Typography } from "@material-ui/core";
import { formatDate } from "./utils";

const useStyles = makeStyles(() => ({
container: {
padding: "16px",
minWidth: "214px",
background: "rgba(255, 255, 255, 0.95)",
borderRadius: "4px",
},
titleText: {
color: "#21227E",
fontSize: "24px",
fontWeight: 500,
},
ruler: {
height: "3px",
backgroundImage: "linear-gradient(90deg, #F44B1B 0%, #EEB430 100%)",
},
valueText: {
color: "#404040",
fontSize: "18px",
fontWeight: 500,
},
}));

const CustomTooltip = ({ active, payload, title, valueFormatter }: any) => {
const classes = useStyles();
if (active && payload && payload.length) {
return (
<div className={classes.container}>
<Typography className={classes.titleText}>{title}</Typography>
<hr className={classes.ruler}></hr>
<Typography className={classes.valueText}>
{valueFormatter(payload[0].value)}
</Typography>
<Typography className={classes.valueText}>
{formatDate(payload[0].payload.date)}
</Typography>
</div>
);
}
return null;
};

export default CustomTooltip;
Loading

0 comments on commit c626eaf

Please sign in to comment.