update components

Makefile

@@ -1,2 +1,5 @@
+token:
+	yarn remove crypto-token-icon && yarn add crypto-token-icon
+
 push:
 	npm version patch && npm publish

README.md

@@ -3,3 +3,12 @@
 ```bash
 yarn add @auxo-dev/frontend-common
 ```
+
+## Add image in public folder
+
+```
+/images/default_banner.png
+/images/default_avatar.png
+/images/bgheader1.png
+/images/LOGO_ICON_2D.png
+```

lib/components/Avatar/Avatar.tsx

@@ -0,0 +1,62 @@
+import { Box, Typography } from '@mui/material';
+import { AddAPhotoRounded } from '@mui/icons-material';
+
+export type TAvatarProps = {
+    src?: string;
+    alt?: string;
+    size: number;
+    onChange?: (file: FileList | null) => void;
+};
+export function Avatar({ alt = 'user avatar', src, size, onChange }: TAvatarProps) {
+    function changeInput(file: FileList | null) {
+        onChange
+            ? onChange(file)
+            : () => {
+                  return;
+              };
+    }
+    return (
+        <Box
+            sx={{
+                width: `${size}px`,
+                height: `${size}px`,
+                minWidth: `${size}px`,
+                borderRadius: '50%',
+                overflow: 'hidden',
+                position: 'relative',
+                '&:hover': {
+                    '.bg-avatar': { opacity: 1 },
+                },
+            }}
+        >
+            <img src={src || ''} alt={alt} style={{ width: '100%', height: '100%', borderRadius: '50%' }} />
+            <Box
+                className="bg-avatar"
+                sx={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    bgcolor: '#000000a1',
+                    opacity: 0,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    transition: 'opacity 0.3s',
+                }}
+            >
+                <AddAPhotoRounded sx={{ color: 'white', mb: 1 }} fontSize="large" />
+                <Typography color={'white'} variant="body2">
+                    Change Avatar
+                </Typography>
+            </Box>
+            <input
+                onChange={(e) => changeInput(e.target.files)}
+                type="file"
+                style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', borderRadius: '50%', cursor: 'pointer', opacity: 0 }}
+            />
+        </Box>
+    );
+}

lib/components/Avatar/index.ts

@@ -0,0 +1 @@
+export * from './Avatar';

lib/components/BoxPrivateData/BoxPrivateData.tsx

@@ -0,0 +1,32 @@
+import { Box, SxProps, Typography } from '@mui/material';
+import { IconSpinLoading } from '../../icons';
+import { ReactNode } from 'react';
+import { useAccount } from 'wagmi';
+import { ButtonConnectWallet } from '../ButtonConnectWallet';
+
+export function BoxPrivateData({ children, iconLoadingProps }: { children?: ReactNode; iconLoadingProps?: SxProps }) {
+    const { address: userAddress, isConnecting } = useAccount();
+
+    if (isConnecting) {
+        return (
+            <Box>
+                <IconSpinLoading sx={{ fontSize: '80px', ...iconLoadingProps }} />
+            </Box>
+        );
+    }
+    return (
+        <Box>
+            {userAddress ? (
+                children
+            ) : (
+                <Box textAlign={'center'}>
+                    <img src={'/images/LOGO_ICON_2D.png'} alt="logo auxo" style={{ width: '90%', maxWidth: '85px', height: 'auto' }} />
+                    <Typography variant="body2" fontWeight={600} my={2}>
+                        Connect wallet to continute!
+                    </Typography>
+                    <ButtonConnectWallet />
+                </Box>
+            )}
+        </Box>
+    );
+}

lib/components/BoxPrivateData/index.ts

@@ -0,0 +1 @@
+export * from './BoxPrivateData';

lib/components/ButtonConnectWallet/ButtonConnectWallet.tsx

@@ -19,12 +19,8 @@ function NotconnectedButton() {
     const { openModal } = useModalFunction();
     return (
         <>
-            <Button
-                variant="contained"
-                onClick={() => openModal({ title: 'Choose Wallet', content: <ModalListWalletConnect />, modalProps: { maxWidth: 'xs' } })}
-                sx={{ textAlign: 'center', height: { xs: '36px', xsm: '44px' } }}
-            >
-                <Box component={'span'} sx={{ display: { sm: 'block', xs: 'none' }, mr: 1, width: '130px' }}>
+            <Button variant="contained" onClick={() => openModal({ title: 'Choose Wallet', content: <ModalListWalletConnect />, modalProps: { maxWidth: 'xs' } })}>
+                <Box component={'span'} sx={{ display: { sm: 'block', xs: 'none' } }}>
                     Connect Wallet
                 </Box>
                 <IconWallet fontSize="large" sx={{ display: { xs: 'block', sm: 'none' } }} />
@@ -36,7 +32,8 @@ function ConnectingButton() {
     return (
         <Box>
             <Button
-                variant="gradient"
+                variant="contained"
+                disabled
                 startIcon={
                     <HourglassEmpty
                         sx={{
@@ -45,11 +42,8 @@ function ConnectingButton() {
                         }}
                     />
                 }
-                sx={{ height: { xs: '36px', xsm: '44px' } }}
             >
-                <Box component={'span'} sx={{ display: { sm: 'block', xs: 'none' } }}>
-                    Connecting...
-                </Box>
+                Connecting...
             </Button>
         </Box>
     );

lib/components/ButtonLoading/ButtonLoading.tsx

@@ -0,0 +1,18 @@
+import { Button, ButtonProps } from '@mui/material';
+import { IconSpinLoading } from '../../icons';
+import { ReactNode } from 'react';
+
+type Props = { muiProps: ButtonProps; isLoading?: boolean; textLoading?: string; children: ReactNode };
+export function ButtonLoading({ muiProps, isLoading, textLoading, children }: Props) {
+    return (
+        <Button variant="contained" {...muiProps} disabled={isLoading || muiProps.disabled}>
+            {isLoading ? (
+                <>
+                    <IconSpinLoading sx={{ mr: 0.5 }} /> {textLoading || 'Loading...'}
+                </>
+            ) : (
+                children
+            )}
+        </Button>
+    );
+}

lib/components/ButtonLoading/index.ts

@@ -0,0 +1 @@
+export * from './ButtonLoading';

lib/components/ButtonSelectChain/ButtonSelectChain.tsx

@@ -45,7 +45,7 @@ export function ButtonSelectChain() {
                         </Box>
                     </Button>
                 ) : (
-                    <Button onClick={handleClick} variant="outlined" endIcon={<ExpandMoreIcon sx={{ color: 'white', fontSize: '24px' }} />}>
+                    <Button onClick={handleClick} variant="outlined" endIcon={<ExpandMoreIcon sx={{ fontSize: '24px' }} />}>
                         <IconChainConnected sx={{ fontSize: '24px', mr: { xs: 0, sm: 1 } }} />
                         <Box component={'span'} sx={{ display: { sm: 'block', xs: 'none' } }}>
                             {infoChain[chainIdConnected]?.name}

lib/components/Card/Card.tsx

@@ -0,0 +1,49 @@
+import { Box, SxProps } from '@mui/material';
+import { CSSProperties, ReactNode } from 'react';
+
+export function Card({
+    children,
+    sx,
+    avatar,
+    banner,
+    subChildren,
+    sxBanner,
+    altAvatar,
+    altBanner,
+}: {
+    children: ReactNode;
+    sx?: SxProps;
+    avatar?: string;
+    banner?: string;
+    altAvatar?: string;
+    altBanner?: string;
+    subChildren?: ReactNode;
+    sxBanner?: CSSProperties;
+}) {
+    return (
+        <Box
+            sx={{
+                borderRadius: '12px',
+                overflow: 'hidden',
+                '&:hover': { boxShadow: 2 },
+                transition: 'box-shadow 0.3s',
+                bgcolor: 'background.secondary',
+                height: '100%',
+                flexDirection: 'column',
+                ...sx,
+            }}
+        >
+            <img src={banner || '/images/default_banner.png'} alt={'banner' + ' ' + altBanner} style={{ width: '100%', height: 'auto', aspectRatio: '3/1', ...sxBanner }} />
+
+            <Box sx={{ px: 3, position: 'relative', zIndex: 1 }}>
+                <img
+                    src={avatar || '/images/default_avatar.png'}
+                    alt={'avatar' + ' ' + altAvatar}
+                    style={{ position: 'absolute', width: '66px', height: '66px', top: 0, transform: 'translatey(-50%)', borderRadius: '50%', objectFit: 'cover', border: '4px solid white' }}
+                />
+            </Box>
+            <Box sx={{ px: 3, position: 'relative', minHeight: '100px', pt: '33px', pb: 3 }}>{children}</Box>
+            {subChildren}
+        </Box>
+    );
+}

lib/components/Card/index.ts

@@ -0,0 +1 @@
+export * from './Card';

lib/components/CustomEditor/CustomEditor.tsx

@@ -0,0 +1,28 @@
+import { Box } from '@mui/material';
+import ReactQuill from 'react-quill';
+
+export function CustomEditor({ value, onChange }: { value: string; onChange: (value: string) => void }) {
+    return (
+        <Box
+            sx={(theme) => ({
+                '& .ql-container.ql-snow': { border: 'none' },
+                '& .ql-toolbar': {
+                    mb: 2,
+                    borderRadius: 2,
+                    border: 'none !important',
+                    boxShadow: '0px 2px 2px 0px rgba(0, 0, 0, 0.12)',
+                    backgroundColor: '#FFFFFF',
+                    width: 'fit-content',
+                },
+                '& .ql-editor': {
+                    border: '1px solid ' + theme.palette.background.primary + ' !important',
+                    borderRadius: 2.5,
+                    minHeight: '160px',
+                    backgroundColor: '#FFFFFF',
+                },
+            })}
+        >
+            <ReactQuill theme="snow" value={value} onChange={onChange} />
+        </Box>
+    );
+}

lib/components/CustomEditor/index.ts

@@ -0,0 +1 @@
+export * from './CustomEditor';

lib/components/Layout/Header/Header.tsx

@@ -35,7 +35,7 @@ export default function Header({ headerHeight }: { headerHeight: string }) {
             }}
         >
             <Container sx={{ height: headerHeight, display: 'flex', placeItems: 'center' }}>
-                <Box component={'label'} htmlFor="control-sidebar" sx={{ display: { xs: 'flex', md: 'none' }, cursor: 'pointer', ml: 1 }}>
+                <Box component={'label'} htmlFor="control-sidebar" sx={{ display: { xs: 'flex', md: 'none' }, cursor: 'pointer' }}>
                     <Menu sx={{ fontSize: '28px' }} />
                 </Box>
                 <Box ml={'auto'}></Box>

lib/components/Layout/Layout.tsx

@@ -1,3 +1,4 @@
+import 'react-quill/dist/quill.snow.css';
 import { ReactNode } from 'react';
 import { Box } from '@mui/material';
 import Sidebar from './Sidebar/Sidebar';

lib/components/NoData/index.tsx

@@ -0,0 +1,13 @@
+import { Box, Typography } from '@mui/material';
+import { IconEmpty } from '../../icons';
+
+export function NoData({ text }: { text?: string }) {
+    return (
+        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', my: 3 }}>
+            <IconEmpty sx={{ width: '100px', height: '100px' }} />
+            <Typography variant="body2" color="#9FC5C2">
+                {text || 'Empty Data'}
+            </Typography>
+        </Box>
+    );
+}

lib/components/Table/TableCell.tsx

@@ -0,0 +1,5 @@
+import { Grid, GridProps } from '@mui/material';
+
+export function TableCell(props: GridProps) {
+    return <Grid {...props} item></Grid>;
+}

lib/components/Table/TableContent.tsx

@@ -0,0 +1,5 @@
+import { Box } from '@mui/material';
+
+export function TableContent() {
+    return <Box>TableContent</Box>;
+}

lib/components/Table/TableHeader.tsx

@@ -0,0 +1,11 @@
+import { Box, Grid, GridProps } from '@mui/material';
+
+export function TableHeader(props: GridProps) {
+    return (
+        <Box sx={{ borderRadius: '12px 12px 0px 0px', background: '#F8F8F8', px: { xs: 1, xsm: 2, sm: 3, md: 4 }, position: 'sticky', top: 0 }}>
+            <Grid {...props} container sx={{ height: '56px', placeItems: 'center', background: '#F8F8F8', ...props.sx }}>
+                {props.children}
+            </Grid>
+        </Box>
+    );
+}

lib/components/Table/TableRow.tsx

@@ -0,0 +1,12 @@
+import { Box, Grid, SxProps } from '@mui/material';
+import { ReactNode } from 'react';
+
+export function TableRow({ children, activeHover = false, sx }: { children: ReactNode; activeHover?: boolean; sx?: SxProps }) {
+    return (
+        <Box sx={{ px: { xs: 1, xsm: 2, sm: 3, md: 4 }, '&:hover': { bgcolor: activeHover ? 'background.secondary' : '' } }}>
+            <Grid container sx={{ height: '56px', placeItems: 'center', ...sx }}>
+                {children}
+            </Grid>
+        </Box>
+    );
+}

lib/components/Table/TableWrapper.tsx

@@ -0,0 +1,6 @@
+import { Box, SxProps } from '@mui/material';
+import { ReactNode } from 'react';
+
+export function TableWrapper({ children, sx }: { children: ReactNode; sx?: SxProps }) {
+    return <Box sx={{ borderRadius: '12px', border: '1px solid #CFE9E4', position: 'relative', minHeight: '75px', ...sx }}>{children}</Box>;
+}

lib/components/Table/index.ts

@@ -0,0 +1,5 @@
+export * from './TableCell';
+export * from './TableContent';
+export * from './TableHeader';
+export * from './TableRow';
+export * from './TableWrapper';

lib/components/index.ts

@@ -6,3 +6,9 @@ export * from './ButtonConnectWallet';
 export * from './ModalCustom';
 export * from './ErrorExeTransaction';
 export * from './ButtonSelectChain';
+export * from './Avatar';
+export * from './Card';
+export * from './ButtonLoading';
+export * from './BoxPrivateData';
+export * from './CustomEditor';
+export * from './Table';