Mark Sinclair
15c3012199
* explorer-api: add nym node endpoints + UI to show nym-nodes and account balances * explorer-api: add endpoints to get operator rewards explorer-ui: show delegations on nym-nodes, show operator rewards, bug fixes * explorer-ui: change summary screen to only show nym-node stats * explorer-api: add unstable routes to get legacy mixnodes and gateways from the contract instead of the Nym API explorer-ui: adapt front-end to show less information in legacy nodes with plain bond types * explorer-ui: fix up source of legacy mixnode data * explorer-ui: add more account page null and undefined checks * explorer-ui: filter out null gateway versions * explorer-ui: sanitise gateway versions * explorer-ui: add more guards on the balance parts to check that greater than 0 * explorer-api: make /tmp/unstable/gateways endpoint compatible with the current Harbour Master API * explorer-ui: fix typo * cargo fmt * Add node-id, total stake and links to nodes list --------- Co-authored-by: Mark Sinclair <mmsinclair@users.noreply.github.com> Co-authored-by: Jędrzej Stuczyński <jedrzej.stuczynski@gmail.com>
76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
import React from "react";
|
|
import { styled, alpha } from '@mui/material/styles';
|
|
import AppBar from '@mui/material/AppBar';
|
|
import Box from '@mui/material/Box';
|
|
import Toolbar from '@mui/material/Toolbar';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import Typography from '@mui/material/Typography';
|
|
import InputBase from '@mui/material/InputBase';
|
|
import MenuIcon from '@mui/icons-material/Menu';
|
|
import SearchIcon from '@mui/icons-material/Search';
|
|
import {useRouter} from "next/navigation";
|
|
|
|
const Search = styled('div')(({ theme }) => ({
|
|
position: 'relative',
|
|
borderRadius: theme.shape.borderRadius,
|
|
backgroundColor: alpha(theme.palette.common.white, 0.15),
|
|
'&:hover': {
|
|
backgroundColor: alpha(theme.palette.common.white, 0.25),
|
|
},
|
|
marginLeft: 0,
|
|
width: '100%',
|
|
[theme.breakpoints.up('sm')]: {
|
|
marginLeft: theme.spacing(1),
|
|
width: 'auto',
|
|
},
|
|
}));
|
|
|
|
const SearchIconWrapper = styled('div')(({ theme }) => ({
|
|
padding: theme.spacing(0, 2),
|
|
height: '100%',
|
|
position: 'absolute',
|
|
pointerEvents: 'none',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}));
|
|
|
|
const StyledInputBase = styled(InputBase)(({ theme }) => ({
|
|
color: 'inherit',
|
|
width: '100%',
|
|
'& .MuiInputBase-input': {
|
|
padding: theme.spacing(1, 1, 1, 0),
|
|
// vertical padding + font size from searchIcon
|
|
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
|
|
[theme.breakpoints.up('sm')]: {
|
|
width: '30ch',
|
|
},
|
|
},
|
|
}));
|
|
|
|
export const SearchToolbar = () => {
|
|
const [search, setSearch] = React.useState<string>();
|
|
const router = useRouter();
|
|
const handleSubmit = async (e: React.SyntheticEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
if(search?.trim().length) {
|
|
router.push(`/account/${search.trim()}`);
|
|
}
|
|
}
|
|
return (
|
|
<Search>
|
|
<SearchIconWrapper>
|
|
<SearchIcon />
|
|
</SearchIconWrapper>
|
|
<form onSubmit={handleSubmit}>
|
|
<StyledInputBase
|
|
placeholder="Search for account id…"
|
|
inputProps={{ 'aria-label': 'search' }}
|
|
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
|
setSearch(event.target.value);
|
|
}}
|
|
/>
|
|
</form>
|
|
</Search>
|
|
);
|
|
} |