62 lines
1.9 KiB
JavaScript
62 lines
1.9 KiB
JavaScript
import { Box, Button, SvgIcon, useMediaQuery, useTheme } from "@mui/material";
|
|
import MenuIcon from "../../assets/icons/hamburger.svg?react";
|
|
import Wallet from "./Wallet"
|
|
import SelectNetwork from "./SelectNetwork";
|
|
|
|
|
|
const PREFIX = "TopBar";
|
|
|
|
const classes = {
|
|
appBar: `${PREFIX}-appBar`,
|
|
menuButton: `${PREFIX}-menuButton`,
|
|
pageTitle: `${PREFIX}-pageTitle`,
|
|
};
|
|
|
|
function TopBar({
|
|
chainId,
|
|
chainExists,
|
|
address,
|
|
wrongNetworkToastId,
|
|
connect,
|
|
handleDrawerToggle,
|
|
setWrongNetworkToastId
|
|
}) {
|
|
const themeColor = useTheme();
|
|
const desktop = useMediaQuery(themeColor.breakpoints.up(1048));
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
flexDirection="row"
|
|
justifyContent="flex-end"
|
|
paddingTop="21px"
|
|
marginRight={desktop ? "33px" : "0px"}
|
|
>
|
|
<Box display="flex" alignItems="center">
|
|
<Box display="flex" justifyContent="space-between" alignItems="center" width="320px">
|
|
<SelectNetwork
|
|
wrongNetworkToastId={wrongNetworkToastId}
|
|
setWrongNetworkToastId={setWrongNetworkToastId}
|
|
chainId={chainId}
|
|
/>
|
|
<Wallet address={address} connect={connect} chainId={chainId} />
|
|
</Box>
|
|
{!desktop && (
|
|
<Button
|
|
id="hamburger"
|
|
aria-label="open drawer"
|
|
size="large"
|
|
variant="text"
|
|
color="secondary"
|
|
onClick={handleDrawerToggle}
|
|
className={classes.menuButton}
|
|
>
|
|
<SvgIcon component={MenuIcon} />
|
|
</Button>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default TopBar;
|