Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bridge_ui: stats page overhaul, added custody-addresses page #1079

Merged
merged 1 commit into from
Apr 29, 2022
Merged

bridge_ui: stats page overhaul, added custody-addresses page #1079

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
520 changes: 520 additions & 0 deletions bridge_ui/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions bridge_ui/package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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