chore: fix most warnings and ignore a few warnings, because the code quality is too bad

packages/app/src/ui/button/button.tsx

@@ -1,12 +1,4 @@
-import {
-  HTMLAttributes,
-  cloneElement,
-  ReactElement,
-  Children,
-  CSSProperties,
-  forwardRef,
-  PropsWithChildren,
-} from 'react';
+import { cloneElement, Children, forwardRef } from 'react';
 import { StyledButton } from './styles';
 
 import { ButtonProps } from './interface';

packages/app/src/ui/button/styles.ts

@@ -113,6 +113,7 @@ export const StyledTextButton = styled('button', {
     bold = false,
     shape = 'default',
     // TODO: Implement type
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     type = 'default',
   }) => {
     const { fontSize, borderRadius, padding, height } = getSize(size);

packages/app/src/ui/confirm/styles.ts

@@ -1,7 +1,7 @@
 import { displayFlex, styled } from '@/styles';
 import { ModalWrapper } from '@/ui/modal';
 
-export const StyledModalWrapper = styled(ModalWrapper)(({ theme }) => {
+export const StyledModalWrapper = styled(ModalWrapper)(() => {
   return {
     width: '460px',
     padding: '46px 60px 32px',

packages/app/src/ui/input/input.tsx

@@ -9,6 +9,7 @@ type inputProps = {
   maxLength?: number;
   minLength?: number;
   onChange?: (value: string) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onBlur?: (e: any) => void;
 };
 

packages/app/src/ui/layout/content.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import { CSSProperties } from 'react';
 import { styled, textEllipsis } from '@/styles';
 
 // This component should be just used to be contained the text content

packages/app/src/ui/layout/wrapper.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react';
+import type { CSSProperties } from 'react';
 import { styled } from '@/styles';
 
 export type WrapperProps = {

packages/app/src/ui/menu/styles.ts

@@ -13,14 +13,12 @@ export const StyledMenuWrapper = styled(StyledPopperContainer)(({ theme }) => {
   };
 });
 
-export const StyledArrow = styled(ArrowRightIcon)(({ theme }) => {
-  return {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    bottom: 0,
-    margin: 'auto',
-  };
+export const StyledArrow = styled(ArrowRightIcon)({
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  bottom: 0,
+  margin: 'auto',
 });
 
 export const StyledMenuItem = styled.button<{

packages/app/src/ui/modal/modal-wrapper.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, HTMLAttributes, PropsWithChildren } from 'react';
+import { CSSProperties } from 'react';
 import { styled } from '@/styles';
 
 export const ModalWrapper = styled.div<{

packages/app/src/ui/modal/modal.tsx

@@ -1,5 +1,5 @@
 import Fade from '@mui/material/Fade';
-import { StyledModal, StyledBackdrop, StyledWrapper } from './styles';
+import { StyledModal, StyledBackdrop } from './styles';
 import { ModalUnstyledOwnProps } from '@mui/base/ModalUnstyled';
 
 const Backdrop = ({
@@ -11,7 +11,7 @@ const Backdrop = ({
 }) => {
   return (
     <Fade in={open}>
-      <StyledBackdrop open={open} {...other} />
+      <StyledBackdrop {...other} />
     </Fade>
   );
 };
@@ -31,7 +31,6 @@ const transformConfig = {
 export const Modal = (props: ModalProps) => {
   const {
     wrapperPosition = ['center', 'center'],
-    components,
     open,
     children,
     ...otherProps

packages/app/src/ui/modal/styles.ts

@@ -3,16 +3,14 @@ import ModalUnstyled from '@mui/base/ModalUnstyled';
 import { Wrapper } from '@/ui/layout';
 import { CSSProperties } from 'react';
 
-export const StyledBackdrop = styled.div<{ open?: boolean }>(({ open }) => {
-  return {
-    zIndex: '-1',
-    position: 'fixed',
-    right: '0',
-    bottom: '0',
-    top: '0',
-    left: '0',
-    backgroundColor: 'rgba(58, 76, 92, 0.2)',
-  };
+export const StyledBackdrop = styled.div({
+  zIndex: '-1',
+  position: 'fixed',
+  right: '0',
+  bottom: '0',
+  top: '0',
+  left: '0',
+  backgroundColor: 'rgba(58, 76, 92, 0.2)',
 });
 
 export const StyledModal = styled(ModalUnstyled, {

packages/app/src/ui/table/index.ts

@@ -1,6 +1,6 @@
 // import Table from '@mui/material/Table';
 // import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
+// import TableCell from '@mui/material/TableCell';
 // import TableHead from '@mui/material/TableHead';
 // import TableRow from '@mui/material/TableRow';
 //

packages/app/src/ui/table/styles.ts

@@ -14,7 +14,7 @@ export const StyledTable = styled.table<{ tableLayout: 'auto' | 'fixed' }>(
   }
 );
 
-export const StyledTableBody = styled.tbody(({ theme }) => {
+export const StyledTableBody = styled.tbody(() => {
   return {
     fontWeight: 400,
   };
@@ -22,7 +22,7 @@ export const StyledTableBody = styled.tbody(({ theme }) => {
 
 export const StyledTableCell = styled.td<
   Pick<TableCellProps, 'ellipsis' | 'align' | 'proportion'>
->(({ theme, align = 'left', ellipsis = false, proportion }) => {
+>(({ align = 'left', ellipsis = false, proportion }) => {
   const width = proportion ? `${proportion * 100}%` : 'auto';
   return {
     width,
@@ -37,7 +37,7 @@ export const StyledTableCell = styled.td<
   };
 });
 
-export const StyledTableHead = styled.thead(({ theme }) => {
+export const StyledTableHead = styled.thead(() => {
   return {
     fontWeight: 500,
     tr: {