Gala
d7e82b075f
* adding delegators number info on mixnode details * add PM, Delegators and Avg. Uptime fields to the node list hardcoded * make delegations number dynamic * fixing bg color bug * wip node info statistics * adding basic tooltip new section and some ui * tooltip customisation * progress bar styles * remove not used import * fix info icons color * remove discord icon * Economic dynamics stats endpoint on the explorer API with dummy fixture data * fetching economic-dynamics-stats * Populating the endpoint with real data aggregated from validator api * Introduced new cache functionalities * using explorer-api data * adding marging profit * adding average update * Update network-explorer.yml * adding more info on mix nodes page * display only part of wallet and node id * typo * remove log * adding new values on node response and fix a typo * remove delegators number column * Endpoints for average mixnode uptime * remove TODO * Clippy * some ui fixes for percentage linear progress * GitHub Actions: build storybook for the Network Explorer and add to notification * Fix file extension to `.ts` * Fix up formatting and types * Add storybook * Add story for mix node details economics * Fix unused warning * adding percentage symbol on uptime in mix nodes * Change eslint config * some refactor * progress bar story * wip refactoring * more refactor * adding empty state to the story * change default values for empty state * refactor naming and progress bar contrast * adding hardcoded selection chance and update the storybook * adding selection chance stories * adding the progress bar back * tooltip button padding fix * Endpoints for average mixnode uptime * Fix unused warning * Rustfmt * moking selection chance response and new colors * remove log * fix camelCases issue * remove hardcoded code * remove avg_uptime at mixnodes table * Add jsonchema to uptimeresponse struct - add the route for avg_uptimes * adding space between words * update selection chance colours * adding the 2 missing tooltips * fix up uptimeresponse * fix duplicate entry * fmt * validator-client: use statement * explorer: PR requests Co-authored-by: Jędrzej Stuczyński <jedrzej.stuczynski@gmail.com> Co-authored-by: Fouad <fmtabbara@hotmail.co.uk> Co-authored-by: Jon Häggblad <jon.haggblad@gmail.com> Co-authored-by: Mark Sinclair <mmsinclair@gmail.com> Co-authored-by: tommy <tommyvez@protonmail.com>
Nym MUI Theme
This package provides an extension to the MUI theme system to use Nym branding.
If you are unfamiliar with Material UI theming, please read the following first:
- https://mui.com/customization/theming/
- https://mui.com/customization/palette/
- https://mui.com/customization/dark-mode/#dark-mode-with-custom-palette
Add theme typings to your project
This package also provides a template file to add typings to the theme using Typescript's module augmentation.
Read the following if you are unfamiliar with module augmentation and declaration merging. Then look at the recommendations from Material UI docs for implementation:
- https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation
- https://www.typescriptlang.org/docs/handbook/declaration-merging.html#merging-interfaces
- https://mui.com/customization/palette/#adding-new-colors
Example usage
You can see an example of how to use this theme in react-webpack-with-theme-example:
export const App: React.FC = () => (
<AppContextProvider>
<AppTheme>
<Content />
</AppTheme>
</AppContextProvider>
);
export const AppTheme: React.FC = ({ children }) => {
const { mode } = useAppContext();
return <NymThemeProvider mode={mode}>{children}</NymThemeProvider>;
};
export const Content: React.FC = () => {
...
<Typography sx={{ color: (theme) => theme.palette.nym.networkExplorer.mixnodes.status.active }}>
The quick brown fox jumps over the white fence
</Typography>
...
}
Development
The best way to make changes to the theme is to:
- Run this package in watch mode with
yarn watch - Run Storybook from react-components with
yarn storybook - Make sure the component you are changing is included in the playground
- Watch for changes in the Playground story
Also remember to check light mode and dark mode!
Building
This package should be built from the root of the repository as follows:
yarn
yarn build
Publishing
This package is not published to NPM ... yet.