Fouad
b27fa51092
* Chore/browser extension bootstrap (#3257) * init package * set up TS and Webpack * add eslint config * add prettier config * add react and mui theme * add CI * update mui theme version number * Chore/browser extension routes (#3327) * start routes * create layouts * add initial app routes * add initial app pages * add global types * create reuseable components * move password and mnemonic fields to shared react components package * refactor register routes * move client address component to shared package * move components to ui folder * create menu and appbar components * adjust layout components * add readme * use memory router * Feature/nym browser extension login and send (#3373) * init package * set up TS and Webpack * add eslint config * add prettier config * add react and mui theme * add CI * update mui theme version number * Chore/browser extension routes (#3327) * start routes * create layouts * add initial app routes * add initial app pages * add global types * create reuseable components * move password and mnemonic fields to shared react components package * refactor register routes * move client address component to shared package * move components to ui folder * create menu and appbar components * adjust layout components * add readme * use memory router * add extension to mono-repo config * fix webpack build * util functions * add TX type * refactor routes * refactor pages + add send page * add page layout for app pages * set up app context * app components * set up connection config * fix lint errors * Chore/browser extension bootstrap (#3257) * init package * set up TS and Webpack * add eslint config * add prettier config * add react and mui theme * add CI * update mui theme version number * Chore/browser extension routes (#3327) * start routes * create layouts * add initial app routes * add initial app pages * add global types * create reuseable components * move password and mnemonic fields to shared react components package * refactor register routes * move client address component to shared package * move components to ui folder * create menu and appbar components * adjust layout components * add readme * use memory router * add extension to mono-repo config * util functions * add TX type * refactor routes * refactor pages + add send page * add page layout for app pages * set up app context * app components * set up connection config * use fee simulation when sending tokens * use object argument for simulate send api * login validation + fee refinements * use components from shared components lib * add receive modal (#3408) * account storage via wasm * method to get all storage keys * Feature/nym browser extension password encryption (single account) (#3442) * build wasm * reuse components and state for password pages * refactor registration pages * use login with password * import storage as local package * add yarn preinstall script to ts lint gh action * install wasm-pack for CI * use @nym scope for ext storage package * introduced a call to check if database was already initialised (#3465) * introduced a call to check if database was already initialised * use extension storage method to check for db existance --------- Co-authored-by: fmtabbara <fmtabbara@hotmail.co.uk> * introduced mnemonic key existence check (#3462) * Browser extension - Multi-accounts + view mnemonic action (#3488) * add UI for multi-accounts + add view mnemonic for accounts * refactor routes * set up import account * add account to existing wallet * check if account name exists before creating new one * handle password errors * add token to currency conversion * fixed ClientStorageError import path * fix CI * fix CI --------- Co-authored-by: Jędrzej Stuczyński <jedrzej.stuczynski@gmail.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: FCWithChildren = () => (
<AppContextProvider>
<AppTheme>
<Content />
</AppTheme>
</AppContextProvider>
);
export const AppTheme: FCWithChildren = ({ children }) => {
const { mode } = useAppContext();
return <NymThemeProvider mode={mode}>{children}</NymThemeProvider>;
};
export const Content: FCWithChildren = () => {
...
<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.