Mark Sinclair
5dadd73dfd
* fixed styled component * dynamic colour for isSelected * corrected type names * wrapped nav for routing and positioning of main section and dynamic colour for selected section * overview info panes added * quick refactor break out components separately * WorldMap implemented but not data * map changed and updated to shades correctly * live data in cards * added any types for react simple map * nested routing added but needs tidying and types refactored * added tooltip to worldmap * worldmap killed unused props * updated MUI version to stable v5 * dark mode and ContentCard refactor complete * refactor of DarkMode context and API into class and context setup * context refactor for multiple APIs at top level * mui typography used for error msging instead of jsx/html * added typeDefs for node api types * small changes to sx styling * added types for api responses and main context * promiseAll for better error handling of individual async calls * switch out to live API for country nodes * removal of unnecessary type any and shortening sx style block * routing and basic mixnodes table and linking * fixed TS error handling and ts exclude files * refactor of class API fetch reqs * renaming to more appropriate explorer-api * broken - passing to Fouad * fix for types in context main * mixnode detail page * rebasing back before fetch mixnode by ID was implemented * added basic cache for huge dump of mixnode data * broken mixnodes context * fixed mixnode detail fetch * added hardcoded BondBreakdown section * added 2 col table for detail page and small refactor of ApiState type for consistent use throughout app * basic chart with basic dark/theme implemented - no live data * added scrollToTop useRef for Detail page * tidied grid items * media qry for smaller screens * small changes * added live data to bonds breakdown 1/2 * small changes/tweaks * Bondbreakdown retrieves live data * mixnode stats using live data * added node status live data * uptime story added with live data * date formatting added * mixnode map * error handling for mixnode stats * error handling for port stats * improved error handling for table - unfinished * error handling for mixnode table * handle Loading state for 2colSmallTable * Uptime story loading handling * set up data grid component * remove mixnode value check as handled inside MixnodesDataGrid component * use loading prop in data grid component * undo unintentional code formatting * map blur and linkable data-grid added * getting ready for gateways and removing con logs * quickfix for map blur * PR comment changes * refactored data grid for reuseability * Link to open Big Dipper for Blocks * passing element to title instead of string for routing to Big Dipper * quick fix for element passed as title for contentCard * fix for colour coding nodes * nuts and bolts of search and results per page are working * media query for responsive search and no-per-page toolbar * broke out search and pagesize to separate toolbar * fix for going back to mixnodes datagrid and refetching * corrected typings for WorldMap * removed API for topojson * Cleaner implementation of formatting inline for datagrid * added Type to Datagrid Rows for mixnode * removed optional from type for Datagrid * added page listing the Gateway nodes * adding clickable location to handleSearch * tidying util functions and removing dead useEffect * Add missing constant * Validators link to Big Dipper * added validators link to side nav as per Issues card * SVG icons * PR tweak to move logic to routes * removed dead code post rebase * fixed light dark mode for DataGrid * light dark mode works on SVGs in Nav * moving logic back to Nav to avoid window object issues * neater ternary for SVG icons dark mode * Better Linking/Styling for cells * corrected prop/attr name in svg to Reactify it * moved api url to constants * SVGs dark now governed by context not props so reverting renderIcon method back to key value setup * percentage for bond total added * SVGs for Overview cards Mixnodes Gateways and Validators * decimalised formatted punks and % of bond for BondBreakdown card * number formatting via validator module * adding cossmjs math pkg * unfinished refactor BondBreakdown * first few ui tweaks * Adding google font Open Sans as per designs * DataGrid unstylable in theme so nuking in css * adding theming to Block Height card not hardcoded colours * DataGrid styling * Nav styling colours but without hover fix * theme for bond breakdown * killing con logs * Datagrid styling * Nav bar working * added lines to nav * removed cursive from fallback fonts * trimming and refactoring * removed dead isActive code from nav options * Color correction for theme on 2col table * Moved cell styles out to UniversalDatagrid for reuseability * Nav colors moved to theme * Removing comments and dead code * DataGrid UI improvements * theming for Overview content card * Bonds updated from UPUNK to PUNK * corrected SVG warning on stroke-width * added Boolean class instead of ternary * fixing up svg attr to jsx props * merging UPUNK changes into ui-tweaks * corrected SVG warning on stroke-width * added Boolean class instead of ternary * last instance of Boolean * BondBreakdown handles 0 delegations * formatting for webpack config and svgs * Add `npm run lint` and `npm run lint:fix` targets to `package.json` * Allow `.vscode` directories - exclude them individually like has been done already in the `.gitignore` directory * Add `vscode` action to run `eslint` on save for the `/explorer/**` sub-directory * eslint auto fix * Fix some easy eslint issues * removing grid pipes and pastel map colors * Grid xl lg values to align with Search Toolbar * GitHub Actions: do not trigger Rust actions when the paths are only `/explorer/**` See https://docs.github.com/en/actions/learn-github-actions/workflow-syntax-for-github-actions#onpushpull_requestpaths for details. * GitHub Actions: run eslint and annotate pull requests * socials added to Appbar and Footer * smaller darkmode icon for mobile * cleaner code for nav dark light selector * almost all lint fixes * post linting Nav fix * killed con log and removed unused dep * ref type and removed 1x ts ignore from worldMap * disabl nested tern w/ nav is refactored on diff br * icons smaller put into mui List format * Added hover effect to match DarkLight switch * ts ignore for worldMap vs no ts decl * parking changes * Flipped to MUI SVGs * re-added external links to Socials * nav functionality working * spacing on Mixnode detail page * datagrid alignment & detail page spacing * map but no datagrid yet * killed old SVGs now using mui icons * added palette instead of strings * Mixnode Map page working still needs tidying * better lg xl responsive on Overview and sanitized Page Titles * removed typography from imports as unused now * search, sort working & added LG XL responsiveness * Routing root reqs direct to Overview * basic 404 page and btn back to overview * killed fragments and comments * updated Bond total in column * Change bond col to type number not text * Added field to DataGrid and updated MixnodeToGridrow logic * Added type number so sorting works properly. * added %self to Detail page * basic scroll working desktop * delegations now popout and scroll according to designs * added stickyHeader and killed dead code * ExpandMore only renders if delegations exist * killed old svg icons * added theme to Overview SVGs * bringing Title into other pages * linting fix * pagination and spacing of gateways cols * linting fix * style override for pagination * added hamburger and changed appbar to fixed * bringing in other lint fix to pass linting * PR feedback changes * Add README.md for theme customisation * Add hook to get app state context * Add Nym theme typings to MUI `Theme` types * Use new theme provider * Fixing up components to use theme typings Updated Overview Footer and ContentCard Footer and Nav socials Title, Nav chevron and Nav SVGs Overview SVGs Light Dark switch BondBreakdown and 2 col table DataGrid and 2col Tables WorldMap UptimeChart and theme changes WorldMap colors merge changes added StatsCard for overview * Bug fix: do no close drawer when clicking on mixnodes or gateways * Theme primary colour set to orange highlight, so that default/primary actions are clear to the user. This fixes colours on the pagination page list. * Fixing up map projection * Map view uses stroke colour from theme * added useTheme from correct pkg * react types upgrade to kill SXProps issue * SXProps fix removing dead mixins from fixed AppBar * Scale of Map changed to see more countries * return type for main Context required * Fixed map so more countries show * type for useMainContext hook added * Remove unused file * Tidy up imports * Remove use of `any` by using strongly typed hook to get the app state * Remove module declaration so that @types/react-simple-maps is used * API map response changed to indexed object * Map view uses correct typings from `@types/react-simple-maps` and `d3-scale` * Make content responsive and fills the view when screen widest * Link network explorer in title to overview page * Increase size of card headers to differentiate * Fix column widths * Fixed icons showing incorrectly the stats card in mixnode detail view * Set default sort on mixnodes and gateways to be `bond` descending. There is an error in MUI data-grid that does not adjust the sort caret based on initial `sortModel` value. Needs investigation. * GitHub Action for deployment: prefix with network explorer to stop collisions with other deployment projects * Mixnode list: fix up header title for `host` * Fix up notification URLs and tidy up readme * Fix up license information Co-authored-by: Adrian Thompson <adrian@nymtech.net> Co-authored-by: Adrian Thompson <adrianthompson@Adrians-MacBook-Air.local> Co-authored-by: fmtabbara <fmtabbara@hotmail.co.uk> Co-authored-by: Aid19801 <adrianThompson19801@gmail.com>
73 lines
2.8 KiB
TypeScript
73 lines
2.8 KiB
TypeScript
import * as React from 'react';
|
|
import { styled } from '@mui/material/styles';
|
|
import Switch from '@mui/material/Switch';
|
|
import { Button } from '@mui/material';
|
|
import { useMainContext } from 'src/context/main';
|
|
import { LightSwitchSVG } from '../icons/LightSwitchSVG';
|
|
|
|
export const DarkLightSwitch = styled(Switch)(({ theme }) => ({
|
|
width: 55,
|
|
height: 34,
|
|
padding: 7,
|
|
'& .MuiSwitch-switchBase': {
|
|
margin: 1,
|
|
padding: 2,
|
|
transform: 'translateX(4px)',
|
|
'&.Mui-checked': {
|
|
color: '#fff',
|
|
transform: 'translateX(22px)',
|
|
'& .MuiSwitch-thumb:before': {
|
|
backgroundImage:
|
|
'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="black" d="M4.2 2.5l-.7 1.8-1.8.7 1.8.7.7 1.8.6-1.8L6.7 5l-1.9-.7-.6-1.8zm15 8.3a6.7 6.7 0 11-6.6-6.6 5.8 5.8 0 006.6 6.6z"/></svg>\')',
|
|
},
|
|
'& + .MuiSwitch-track': {
|
|
opacity: 1,
|
|
backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',
|
|
},
|
|
},
|
|
},
|
|
'& .MuiSwitch-thumb': {
|
|
backgroundColor: theme.palette.nym.networkExplorer.nav.text,
|
|
width: 25,
|
|
height: 25,
|
|
marginTop: '2px',
|
|
'&:before': {
|
|
content: "''",
|
|
position: 'absolute',
|
|
width: '100%',
|
|
height: '100%',
|
|
left: 0,
|
|
top: 0,
|
|
backgroundRepeat: 'no-repeat',
|
|
backgroundPosition: 'center',
|
|
backgroundImage:
|
|
'url(\'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 20 20"><path fill="black" d="M9.305 1.667V3.75h1.389V1.667h-1.39zm-4.707 1.95l-.982.982L5.09 6.072l.982-.982-1.473-1.473zm10.802 0L13.927 5.09l.982.982 1.473-1.473-.982-.982zM10 5.139a4.872 4.872 0 00-4.862 4.86A4.872 4.872 0 0010 14.862 4.872 4.872 0 0014.86 10 4.872 4.872 0 0010 5.139zm0 1.389A3.462 3.462 0 0113.471 10a3.462 3.462 0 01-3.473 3.472A3.462 3.462 0 016.527 10 3.462 3.462 0 0110 6.528zM1.665 9.305v1.39h2.083v-1.39H1.666zm14.583 0v1.39h2.084v-1.39h-2.084zM5.09 13.928L3.616 15.4l.982.982 1.473-1.473-.982-.982zm9.82 0l-.982.982 1.473 1.473.982-.982-1.473-1.473zM9.305 16.25v2.083h1.389V16.25h-1.39z"/></svg>\')',
|
|
},
|
|
},
|
|
'& .MuiSwitch-track': {
|
|
opacity: 1,
|
|
backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',
|
|
borderRadius: 20 / 2,
|
|
},
|
|
}));
|
|
|
|
export const DarkLightSwitchMobile: React.FC = () => {
|
|
const { toggleMode } = useMainContext();
|
|
return (
|
|
<Button onClick={() => toggleMode()}>
|
|
<LightSwitchSVG />
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export const DarkLightSwitchDesktop: React.FC<{ defaultChecked: boolean }> = ({
|
|
defaultChecked,
|
|
}) => {
|
|
const { toggleMode } = useMainContext();
|
|
return (
|
|
<Button onClick={() => toggleMode()}>
|
|
<DarkLightSwitch defaultChecked={defaultChecked} />
|
|
</Button>
|
|
);
|
|
};
|