init project

auxo-zk · Jul 31, 2024 · a297f0a · a297f0a
commit a297f0a
Show file tree

Hide file tree

Showing 51 changed files with 6,361 additions and 0 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,23 @@
+**/*.svg
+package.json
+/node_modules
+/dist
+/build
+/coverage
+.dockerignore
+.DS_Store
+.eslintignore
+*.png
+*.toml
+docker
+.editorconfig
+Dockerfile*
+.gitignore
+.prettierignore
+LICENSE
+.eslintcache
+*.lock
+yarn-error.log
+.history
+CNAME
+/resources
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,7 @@
+{
+    "printWidth": 200,
+    "singleQuote": true,
+    "tabWidth": 4,
+    "semi": true,
+    "trailingComma": "es5"
+}
diff --git a/Makefile b/Makefile
@@ -0,0 +1,2 @@
+push:
+	npm version patch && npm publish
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+## Install package
+
+```bash
+yarn add @auxo-dev/frontend-common
+```
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet" />
+
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap"
+            rel="stylesheet"
+        />
+
+        <title>Vite + React + TS</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>
diff --git a/lib/components/AppStateProvider/AppStateProvider.tsx b/lib/components/AppStateProvider/AppStateProvider.tsx
@@ -0,0 +1,12 @@
+import { Provider } from 'jotai';
+import { BaseProviderProps } from '../../types';
+import React from 'react';
+import { AuxoThemeProvider } from '../ThemeProvider';
+
+export function AppStateProvider({ children }: BaseProviderProps) {
+    return (
+        <Provider>
+            <AuxoThemeProvider>{children}</AuxoThemeProvider>
+        </Provider>
+    );
+}
diff --git a/lib/components/AppStateProvider/index.ts b/lib/components/AppStateProvider/index.ts
@@ -0,0 +1 @@
+export * from './AppStateProvider';
diff --git a/lib/components/ButtonConnectWallet/ButtonConnectWallet.tsx b/lib/components/ButtonConnectWallet/ButtonConnectWallet.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function ButtonConnectWallet() {
+    return <div>ButtonConnectWallet</div>;
+}
diff --git a/lib/components/ButtonConnectWallet/index.ts b/lib/components/ButtonConnectWallet/index.ts
@@ -0,0 +1 @@
+export * from './ButtonConnectWallet';
diff --git a/lib/components/Layout/Header/Header.tsx b/lib/components/Layout/Header/Header.tsx
@@ -0,0 +1,44 @@
+import { Menu } from '@mui/icons-material';
+import { Box, Container } from '@mui/material';
+import { ButtonConnectWallet } from '../../ButtonConnectWallet';
+import { useEffect, useState } from 'react';
+
+export default function Header({ headerHeight }: { headerHeight: string }) {
+    const [isScrollDown, setIsScrollDown] = useState<boolean>(false);
+
+    useEffect(() => {
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, []);
+
+    const handleScroll = () => {
+        if (window.scrollY > 10) {
+            setIsScrollDown(true);
+        } else {
+            setIsScrollDown(false);
+        }
+    };
+
+    return (
+        <Box
+            sx={{
+                borderBottom: '1px solid',
+                borderColor: 'divider',
+                background: isScrollDown ? '#fff' : '',
+                height: headerHeight,
+                position: 'sticky',
+                top: '0',
+                left: 0,
+                width: '100%',
+                zIndex: '900',
+            }}
+        >
+            <Container sx={{ height: headerHeight, display: 'flex', placeItems: 'center' }}>
+                <Box component={'label'} htmlFor="control-sidebar" sx={{ display: { xs: 'flex', md: 'none' }, cursor: 'pointer', ml: 1 }}>
+                    <Menu sx={{ fontSize: '28px' }} />
+                </Box>
+                <ButtonConnectWallet />
+            </Container>
+        </Box>
+    );
+}
diff --git a/lib/components/Layout/Layout.tsx b/lib/components/Layout/Layout.tsx
@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { Box } from '@mui/material';
+import Sidebar from './Sidebar/Sidebar';
+import Header from './Header/Header';
+import { AppStateProvider } from '../AppStateProvider';
+import { MenuSidebar } from '../../types';
+import { WalletProvider } from '../WalletProvider';
+import { ModalCustom } from '../ModalCustom';
+import { ToastNotifier } from '../ToastNotifier';
+
+export function Layout({ children, menu, logoApp }: { menu: MenuSidebar; children: ReactNode; logoApp: string }) {
+    const sidebarWidth = '202px';
+    const headerHeight = '64px';
+    return (
+        <WalletProvider>
+            <AppStateProvider>
+                <Box sx={{ position: 'relative' }}>
+                    <Sidebar sidebarWidth={sidebarWidth} headerHeight={headerHeight} menu={menu} logoApp={logoApp} />
+                    <Box
+                        sx={{
+                            position: 'relative',
+                            zIndex: 1,
+                            ml: { xs: 0, md: sidebarWidth },
+                            backgroundImage: `url(/images/bgheader1.png)`,
+                            backgroundRepeat: 'no-repeat',
+                            backgroundPosition: 'top center',
+                            backgroundSize: '975px auto',
+                        }}
+                    >
+                        <Header headerHeight={headerHeight}></Header>
+                        <Box
+                            sx={{
+                                minHeight: `calc(100svh - ${headerHeight})`,
+                            }}
+                        >
+                            {children}
+                        </Box>
+                    </Box>
+                </Box>
+                <ModalCustom />
+                <ToastNotifier />
+            </AppStateProvider>
+        </WalletProvider>
+    );
+}
diff --git a/lib/components/Layout/Sidebar/Sidebar.tsx b/lib/components/Layout/Sidebar/Sidebar.tsx
@@ -0,0 +1,120 @@
+import { Box, Typography } from '@mui/material';
+import { MenuSidebar } from '../../../types';
+import React from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
+export default function Sidebar({ menu, sidebarWidth, headerHeight, logoApp }: { menu: MenuSidebar; sidebarWidth: string; headerHeight: string; logoApp: string }) {
+    const route = useLocation();
+    return (
+        <Box
+            sx={(theme) => ({
+                [theme.breakpoints.down('md')]: {
+                    '#sidebar': {
+                        transform: 'translateX(-100%)',
+                        '& > #bgsidebar': {
+                            opacity: 0,
+                            transition: 'opacity 0.3s',
+                        },
+                        '& > #mainsidebar': {
+                            transform: 'translateX(-100%)',
+                            transition: 'transform 0.3s',
+                        },
+                    },
+                    '#control-sidebar': {
+                        '&:checked': {
+                            '& + #sidebar': {
+                                transform: 'translateX(0)',
+                                '& > #bgsidebar': {
+                                    opacity: 0.8,
+                                },
+                                '& > #mainsidebar': {
+                                    transform: 'translateX(0)',
+                                },
+                            },
+                        },
+                    },
+                },
+            })}
+        >
+            <input id="control-sidebar" type="checkbox" style={{ display: 'none' }} />
+            <Box id="sidebar" sx={{ position: 'fixed', height: '100svh', width: '100%', top: 0, left: 0, maxWidth: { xs: '100%', md: sidebarWidth }, zIndex: 1000 }}>
+                <Box
+                    id="bgsidebar"
+                    component={'label'}
+                    htmlFor="control-sidebar"
+                    sx={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', bgcolor: '#1e3732a8', opacity: 0.8, zIndex: 0 }}
+                ></Box>
+                <Box
+                    id="mainsidebar"
+                    sx={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', bgcolor: 'background.secondary', maxWidth: sidebarWidth, zIndex: 1, overflowY: 'auto' }}
+                >
+                    <Box sx={{ height: headerHeight, display: 'flex', pl: 3, placeItems: 'center' }}>
+                        <img src={logoApp} alt="logo auxo" style={{ width: '90px', height: 'auto' }} />
+                    </Box>
+                    <Box mt={1} px={1}>
+                        {menu.map((item, index) => {
+                            return <MenuItem menu={menu} index={index} pathname={route.pathname} key={'menu' + item.title + index} />;
+                        })}
+                    </Box>
+                </Box>
+            </Box>
+        </Box>
+    );
+}
+
+function MenuItem({ index, pathname, menu }: { menu: MenuSidebar; index: number; pathname: string }) {
+    // console.log(route);
+    const menuItem = menu[index];
+    const IconItem = menuItem.icon;
+    const activeItem = pathname.indexOf(menuItem.url) == 0;
+    return (
+        // <Box sx={{ background: activeItem ? '#043E35' : '' }}>
+        <Box mb={1}>
+            <Link to={menuItem.url} style={{ textDecoration: 'none', color: 'unset' }}>
+                <Box
+                    sx={{
+                        borderRadius: '12px',
+                        display: 'flex',
+                        placeItems: 'center',
+                        cursor: 'pointer',
+                        background: activeItem ? '#CFE9E4' : '',
+                        '&:hover': { background: activeItem ? '' : '#dbedea' },
+                    }}
+                >
+                    <Box sx={{ width: '50px', height: '46px', display: 'flex', justifyContent: 'center', placeItems: 'center' }}>
+                        <IconItem sx={{ fontSize: '24px', color: activeItem ? 'primary.main' : 'primary.light' }} />
+                    </Box>
+                    <Box>
+                        <Typography variant="body2" fontWeight={600} sx={{ color: activeItem ? 'primary.main' : 'primary.light' }}>
+                            {menuItem.title}
+                        </Typography>
+                    </Box>
+                </Box>
+            </Link>
+
+            {menuItem.children.map((item, j) => {
+                return <SubMenuItem menu={menu} key={j + item.title + index} indexParent={index} indexSubmenu={j} pathname={pathname} />;
+            })}
+        </Box>
+    );
+}
+
+function SubMenuItem({ indexParent, indexSubmenu, pathname, menu }: { menu: MenuSidebar; indexParent: number; indexSubmenu: number; pathname: string }) {
+    const subMenu = menu[indexParent].children[indexSubmenu];
+    const activeItem = pathname.indexOf(subMenu.url) == 0;
+
+    return (
+        <Box>
+            <Link to={subMenu.url} style={{ textDecoration: 'none', color: 'unset' }}>
+                <Box sx={{ display: 'flex', placeItems: 'center', cursor: 'pointer', '&:hover': { '& .title-submenu': { color: activeItem ? '' : 'secondary.main' } } }}>
+                    <Box sx={{ width: '50px', height: '46px', display: 'flex', justifyContent: 'center', placeItems: 'center' }}></Box>
+                    <Box>
+                        <Typography className="title-submenu" variant="body2" fontWeight={600} sx={{ color: activeItem ? 'secondary.main' : 'primary.light', transition: 'color 0.3s' }}>
+                            {subMenu.title}
+                        </Typography>
+                    </Box>
+                </Box>
+            </Link>
+        </Box>
+    );
+}
diff --git a/lib/components/Layout/index.ts b/lib/components/Layout/index.ts
@@ -0,0 +1 @@
+export * from './Layout';
diff --git a/lib/components/ModalCustom/ModalCustom.tsx b/lib/components/ModalCustom/ModalCustom.tsx
@@ -0,0 +1,25 @@
+import { ClearRounded } from '@mui/icons-material';
+import { Box, Dialog, DialogContent, DialogTitle, Typography } from '@mui/material';
+import { useModalFunction, useModalValue } from '../../states/modal';
+
+export function ModalCustom() {
+    const modal = useModalValue();
+    const { closeModal } = useModalFunction();
+    return (
+        <Dialog fullWidth maxWidth={modal.modalProps?.maxWidth || 'xsm'} open={modal.open} {...modal.modalProps}>
+            <DialogTitle>
+                <Box sx={{ display: 'flex' }}>
+                    {typeof modal.title == 'string' ? (
+                        <Typography variant="h6" color={'primary.main'}>
+                            {modal.title}
+                        </Typography>
+                    ) : (
+                        modal.title
+                    )}
+                    <ClearRounded sx={{ ml: 'auto', cursor: 'pointer', fontSize: '25px' }} onClick={closeModal} />
+                </Box>
+            </DialogTitle>
+            <DialogContent>{modal.content}</DialogContent>
+        </Dialog>
+    );
+}
diff --git a/lib/components/ModalCustom/index.ts b/lib/components/ModalCustom/index.ts
@@ -0,0 +1 @@
+export * from './ModalCustom';
diff --git a/lib/components/ThemeProvider/AuxoThemeProvider.tsx b/lib/components/ThemeProvider/AuxoThemeProvider.tsx
@@ -0,0 +1,9 @@
+import { ThemeProvider } from '@mui/material';
+import { useThemeConfigValue } from '../../states/theme/hooks';
+import React from 'react';
+import { BaseProviderProps } from '../../types';
+
+export function AuxoThemeProvider({ children }: BaseProviderProps) {
+    const themeConfig = useThemeConfigValue();
+    return <ThemeProvider theme={themeConfig}>{children}</ThemeProvider>;
+}
diff --git a/lib/components/ThemeProvider/index.ts b/lib/components/ThemeProvider/index.ts
@@ -0,0 +1 @@
+export * from './AuxoThemeProvider';
diff --git a/lib/components/ToastNotifier/ToastNotifier.tsx b/lib/components/ToastNotifier/ToastNotifier.tsx
@@ -0,0 +1,6 @@
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
+export function ToastNotifier() {
+    return <ToastContainer />;
+}
diff --git a/lib/components/ToastNotifier/index.ts b/lib/components/ToastNotifier/index.ts
@@ -0,0 +1 @@
+export * from './ToastNotifier';