From 419a94a84e245f20256e9eff364f9e394234a3b9 Mon Sep 17 00:00:00 2001
From: simmmpleweb <hello@simmmple.com>
Date: Wed, 13 Sep 2023 16:58:28 +0300
Subject: [PATCH 1/3] Avatar rtl

---
 src/app/rtl/rtl-default/page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/rtl/rtl-default/page.tsx b/src/app/rtl/rtl-default/page.tsx
index ac64145..3375bec 100644
--- a/src/app/rtl/rtl-default/page.tsx
+++ b/src/app/rtl/rtl-default/page.tsx
@@ -23,6 +23,7 @@
 
 // Chakra imports
 import {
+  Avatar,
   Box,
   Flex,
   Icon,
@@ -97,7 +98,7 @@ export default function UserReports() {
         <MiniStatistics
           startContent={
             <Box height={'56px'} width={'56px'}>
-              <ChakraNextAvatar src={Usa} height={'56px'} width={'56px'} />
+              <Avatar src={Usa} height={'56px'} width={'56px'} />
             </Box>
           }
           endContent={

From b2456b2ede44ee7e5de5816b0afbf9cea9089137 Mon Sep 17 00:00:00 2001
From: simmmpleweb <hello@simmmple.com>
Date: Wed, 13 Sep 2023 16:58:44 +0300
Subject: [PATCH 2/3] Added src

---
 src/app/rtl/rtl-default/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/rtl/rtl-default/page.tsx b/src/app/rtl/rtl-default/page.tsx
index 3375bec..866b0ce 100644
--- a/src/app/rtl/rtl-default/page.tsx
+++ b/src/app/rtl/rtl-default/page.tsx
@@ -98,7 +98,7 @@ export default function UserReports() {
         <MiniStatistics
           startContent={
             <Box height={'56px'} width={'56px'}>
-              <Avatar src={Usa} height={'56px'} width={'56px'} />
+              <Avatar src={Usa.src} height={'56px'} width={'56px'} />
             </Box>
           }
           endContent={

From 2324b6eeb7e2dbfb45cc0806273fb349ddd68867 Mon Sep 17 00:00:00 2001
From: simmmpleweb <hello@simmmple.com>
Date: Fri, 10 Nov 2023 20:08:55 +0200
Subject: [PATCH 3/3] Build errors fixed

---
 CHANGELOG.md                                  |   8 +-
 src/app/rtl/rtl-default/page.tsx              |   1 -
 src/components/card/NFT.tsx                   | 310 +++++++++---------
 src/components/charts/BarChart.tsx            |  55 ++--
 src/components/charts/LineAreaChart.tsx       |  64 ++--
 src/components/charts/LineChart.tsx           |  30 +-
 src/components/charts/PieChart.tsx            |  55 ++--
 src/components/image/Avatar.tsx               |  36 --
 src/components/image/Image.tsx                |  15 -
 src/components/navbar/NavbarLinksAdmin.tsx    |  10 +-
 src/components/sidebar/Sidebar.tsx            |  86 ++---
 .../sidebar/components/SidebarCard.tsx        |  12 +-
 .../marketplace/components/HistoryItem.tsx    |  14 +-
 src/views/admin/profile/components/Banner.tsx |  93 +++---
 .../admin/profile/components/Project.tsx      |   6 +-
 15 files changed, 357 insertions(+), 438 deletions(-)
 delete mode 100644 src/components/image/Avatar.tsx
 delete mode 100644 src/components/image/Image.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fc22ced..8debeaf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,10 @@
-# Changelog
+
+## [2.1.0] 2023-11-10
+
+### Bug fix - Build error due to Types
+
+- Updated types
+- Updated charts 
 ## [2.0.0] 2023-09-13 
 
 ### Big update - NextJS 13 Update
diff --git a/src/app/rtl/rtl-default/page.tsx b/src/app/rtl/rtl-default/page.tsx
index 866b0ce..65d0d72 100644
--- a/src/app/rtl/rtl-default/page.tsx
+++ b/src/app/rtl/rtl-default/page.tsx
@@ -37,7 +37,6 @@ import Usa from '/public/img/dashboards/usa.png';
 // import MiniCalendar from 'components/calendar/MiniCalendar';
 import MiniStatistics from 'components/card/MiniStatistics';
 import IconBox from 'components/icons/IconBox';
-import { ChakraNextAvatar } from 'components/image/Avatar';
 import {
   MdAddTask,
   MdAttachMoney,
diff --git a/src/components/card/NFT.tsx b/src/components/card/NFT.tsx
index c1cf37b..895c3de 100644
--- a/src/components/card/NFT.tsx
+++ b/src/components/card/NFT.tsx
@@ -1,163 +1,171 @@
 // Chakra imports
 import {
-	AvatarGroup,
-	Avatar,
-	Box,
-	Button,
-	Flex,
-	Icon,
-	Link,
-	Text,
-	useColorModeValue,
-	Spacer,
-	AspectRatio
+  AvatarGroup,
+  Avatar,
+  Box,
+  Button,
+  Flex,
+  Icon,
+  Image,
+  Link,
+  Text,
+  useColorModeValue,
+  AspectRatio,
 } from '@chakra-ui/react';
 // Custom components
 import Card from 'components/card/Card';
-import { NextAvatar } from 'components/image/Avatar';
-import { Image } from 'components/image/Image';
 // Assets
 import { useState } from 'react';
 import { IoHeart, IoHeartOutline } from 'react-icons/io5';
 
 export default function NFT(props: {
-	image: string;
-	name: string;
-	author: string;
-	bidders: string[];
-	download: string;
-	currentbid: string | number;
+  image: string | any;
+  name: string;
+  author: string;
+  bidders: string[] | any[];
+  download: string;
+  currentbid: string | number;
 }) {
-	const { image, name, author, bidders, download, currentbid } = props;
-	const [ like, setLike ] = useState(false);
-	const textColor = useColorModeValue('navy.700', 'white');
-	const textColorBid = useColorModeValue('brand.500', 'white');
-	return (
-		<Card p='20px'>
-			<Flex direction={{ base: 'column' }} justify='center'>
-				<Box mb={{ base: '20px', '2xl': '20px' }} position='relative'>
-					<AspectRatio ratio={7 / 5}>
-						<Image src={image} w={'100%'} borderRadius='20px' alt='' />
-					</AspectRatio>
-					<Button
-						position='absolute'
-						bg='white'
-						_hover={{ bg: 'whiteAlpha.900' }}
-						_active={{ bg: 'white' }}
-						_focus={{ bg: 'white' }}
-						p='0px !important'
-						top='14px'
-						right='14px'
-						borderRadius='50%'
-						minW='36px'
-						h='36px'
-						onClick={() => {
-							setLike(!like);
-						}}>
-						<Icon
-							transition='0.2s linear'
-							w='20px'
-							h='20px'
-							as={like ? IoHeart : IoHeartOutline}
-							color='brand.500'
-						/>
-					</Button>
-				</Box>
-				<Flex flexDirection='column' justify='space-between' h='100%'>
-					<Flex
-						justify='space-between'
-						direction={{
-							base: 'row',
-							md: 'column',
-							lg: 'row',
-							xl: 'column',
-							'2xl': 'row'
-						}}
-						mb='auto'>
-						<Flex direction='column'>
-							<Text
-								color={textColor}
-								fontSize={{
-									base: 'xl',
-									md: 'lg',
-									lg: 'lg',
-									xl: 'lg',
-									'2xl': 'md',
-									'3xl': 'lg'
-								}}
-								mb='5px'
-								fontWeight='bold'
-								me='14px'>
-								{name}
-							</Text>
-							<Text
-								color='secondaryGray.600'
-								fontSize={{
-									base: 'sm'
-								}}
-								fontWeight='400'
-								me='14px'>
-								{author}
-							</Text>
-						</Flex>
-						<AvatarGroup
-							max={3}
-							color={textColorBid}
-							size='sm'
-							mt={{
-								base: '0px',
-								md: '10px',
-								lg: '0px',
-								xl: '10px',
-								'2xl': '0px'
-							}}
-							fontSize='12px'>
-							{bidders.map((avt, key) => <NextAvatar key={key} h={'32px'} w={'32px'} src={avt} />)}
-						</AvatarGroup>
-					</Flex>
-					<Flex
-						align={{
-							base: 'center',
-							md: 'start',
-							lg: 'center',
-							xl: 'start',
-							'2xl': 'center'
-						}}
-						justify='space-between'
-						direction={{
-							base: 'row',
-							md: 'column',
-							lg: 'row',
-							xl: 'column',
-							'2xl': 'row'
-						}}
-						mt='25px'>
-						<Text fontWeight='700' fontSize='sm' color={textColorBid}>
-							Current Bid: {currentbid}
-						</Text>
-						<Link
-							href={download}
-							mt={{
-								base: '0px',
-								md: '10px',
-								lg: '0px',
-								xl: '10px',
-								'2xl': '0px'
-							}}>
-							<Button
-								variant='darkBrand'
-								color='white'
-								fontSize='sm'
-								fontWeight='500'
-								borderRadius='70px'
-								px='24px'
-								py='5px'>
-								Place Bid
-							</Button>
-						</Link>
-					</Flex>
-				</Flex>
-			</Flex>
-		</Card>
-	);
+  const { image, name, author, bidders, download, currentbid } = props;
+  const [like, setLike] = useState(false);
+  const textColor = useColorModeValue('navy.700', 'white');
+  const textColorBid = useColorModeValue('brand.500', 'white');
+  return (
+    <Card p="20px">
+      <Flex direction={{ base: 'column' }} justify="center">
+        <Box mb={{ base: '20px', '2xl': '20px' }} position="relative">
+          <AspectRatio ratio={7 / 5}>
+            <Image src={image.src} w={'100%'} borderRadius="20px" alt="" />
+          </AspectRatio>
+          <Button
+            position="absolute"
+            bg="white"
+            _hover={{ bg: 'whiteAlpha.900' }}
+            _active={{ bg: 'white' }}
+            _focus={{ bg: 'white' }}
+            p="0px !important"
+            top="14px"
+            right="14px"
+            borderRadius="50%"
+            minW="36px"
+            h="36px"
+            onClick={() => {
+              setLike(!like);
+            }}
+          >
+            <Icon
+              transition="0.2s linear"
+              w="20px"
+              h="20px"
+              as={like ? IoHeart : IoHeartOutline}
+              color="brand.500"
+            />
+          </Button>
+        </Box>
+        <Flex flexDirection="column" justify="space-between" h="100%">
+          <Flex
+            justify="space-between"
+            direction={{
+              base: 'row',
+              md: 'column',
+              lg: 'row',
+              xl: 'column',
+              '2xl': 'row',
+            }}
+            mb="auto"
+          >
+            <Flex direction="column">
+              <Text
+                color={textColor}
+                fontSize={{
+                  base: 'xl',
+                  md: 'lg',
+                  lg: 'lg',
+                  xl: 'lg',
+                  '2xl': 'md',
+                  '3xl': 'lg',
+                }}
+                mb="5px"
+                fontWeight="bold"
+                me="14px"
+              >
+                {name}
+              </Text>
+              <Text
+                color="secondaryGray.600"
+                fontSize={{
+                  base: 'sm',
+                }}
+                fontWeight="400"
+                me="14px"
+              >
+                {author}
+              </Text>
+            </Flex>
+            <AvatarGroup
+              max={3}
+              color={textColorBid}
+              size="sm"
+              mt={{
+                base: '0px',
+                md: '10px',
+                lg: '0px',
+                xl: '10px',
+                '2xl': '0px',
+              }}
+              fontSize="12px"
+            >
+              {bidders.map((avt, key) => (
+                <Avatar key={key} h={'32px'} w={'32px'} src={avt.src} />
+              ))}
+            </AvatarGroup>
+          </Flex>
+          <Flex
+            align={{
+              base: 'center',
+              md: 'start',
+              lg: 'center',
+              xl: 'start',
+              '2xl': 'center',
+            }}
+            justify="space-between"
+            direction={{
+              base: 'row',
+              md: 'column',
+              lg: 'row',
+              xl: 'column',
+              '2xl': 'row',
+            }}
+            mt="25px"
+          >
+            <Text fontWeight="700" fontSize="sm" color={textColorBid}>
+              Current Bid: {currentbid}
+            </Text>
+            <Link
+              href={download}
+              mt={{
+                base: '0px',
+                md: '10px',
+                lg: '0px',
+                xl: '10px',
+                '2xl': '0px',
+              }}
+            >
+              <Button
+                variant="darkBrand"
+                color="white"
+                fontSize="sm"
+                fontWeight="500"
+                borderRadius="70px"
+                px="24px"
+                py="5px"
+              >
+                Place Bid
+              </Button>
+            </Link>
+          </Flex>
+        </Flex>
+      </Flex>
+    </Card>
+  );
 }
diff --git a/src/components/charts/BarChart.tsx b/src/components/charts/BarChart.tsx
index 96bc882..ad40638 100644
--- a/src/components/charts/BarChart.tsx
+++ b/src/components/charts/BarChart.tsx
@@ -1,38 +1,23 @@
-import dynamic from 'next/dist/shared/lib/dynamic'
-import React from 'react'
-import { isWindowAvailable } from 'utils/navigation'
-import { ChartProps, ChartState } from './LineAreaChart'
-const Chart = dynamic(() => import('react-apexcharts'), { ssr: false })
+'use client';
+import dynamic from 'next/dynamic';
+// import Chart from 'react-apexcharts';
+const Chart = dynamic(() => import('react-apexcharts'), {
+  ssr: false,
+});
 
-class ColumnChart extends React.Component<ChartProps, ChartState> {
-  constructor (props: ChartState) {
-    super(props)
-    this.state = {
-      chartData: [],
-      chartOptions: {}
-    }
-  }
+const BarChart = (props: any) => {
+  const { chartData, chartOptions } = props;
 
-  componentDidMount () {
-    this.setState({
-      chartData: this.props.chartData,
-      chartOptions: this.props.chartOptions
-    })
-  }
+  return (
+    // @ts-expect-error
+    <Chart
+      options={chartOptions}
+      type="bar"
+      width="100%"
+      height="100%"
+      series={chartData}
+    />
+  );
+};
 
-  render () {
-    if (!isWindowAvailable()) return <></>
-
-    return (
-      <Chart
-        options={this.state.chartOptions}
-        series={this.state.chartData}
-        type='bar'
-        width='100%'
-        height='100%'
-      />
-    )
-  }
-}
-
-export default ColumnChart
+export default BarChart;
diff --git a/src/components/charts/LineAreaChart.tsx b/src/components/charts/LineAreaChart.tsx
index e60635f..9a27a72 100644
--- a/src/components/charts/LineAreaChart.tsx
+++ b/src/components/charts/LineAreaChart.tsx
@@ -1,47 +1,23 @@
-import { ApexOptions } from 'apexcharts'
-import dynamic from 'next/dist/shared/lib/dynamic'
-import React from 'react'
-import { isWindowAvailable } from 'utils/navigation'
-const Chart = dynamic(() => import('react-apexcharts'), { ssr: false })
+'use client';
+import dynamic from 'next/dynamic';
+// import Chart from 'react-apexcharts';
+const Chart = dynamic(() => import('react-apexcharts'), {
+  ssr: false,
+});
 
-export type ChartState = {
-  chartData: ApexAxisChartSeries | ApexNonAxisChartSeries
-  chartOptions: ApexOptions
-}
+const LineAreaChart = (props: any) => {
+  const { chartData, chartOptions } = props;
 
-export type ChartProps = ChartState & {
-  [x: string]: any
-}
+  return (
+    // @ts-expect-error
+    <Chart
+      options={chartOptions}
+      type="area"
+      width="100%"
+      height="100%"
+      series={chartData}
+    />
+  );
+};
 
-class LineChart extends React.Component<ChartProps, ChartState> {
-  state: ChartState = {
-    chartData: [],
-    chartOptions: {}
-  }
-
-  constructor (props: ChartProps) {
-    super(props)
-  }
-
-  componentDidMount () {
-    this.setState({
-      chartData: this.props.chartData,
-      chartOptions: this.props.chartOptions
-    })
-  }
-
-  render () {
-    if (!isWindowAvailable()) return <></>
-    return (
-      <Chart
-        options={this.state.chartOptions}
-        series={this.state.chartData}
-        type='area'
-        width='100%'
-        height='100%'
-      />
-    )
-  }
-}
-
-export default LineChart
+export default LineAreaChart;
diff --git a/src/components/charts/LineChart.tsx b/src/components/charts/LineChart.tsx
index e059f6a..6d0f1b0 100644
--- a/src/components/charts/LineChart.tsx
+++ b/src/components/charts/LineChart.tsx
@@ -1,21 +1,23 @@
-import dynamic from 'next/dist/shared/lib/dynamic'
-import { ChartProps } from './LineAreaChart'
+'use client';
+import dynamic from 'next/dynamic';
+// import Chart from 'react-apexcharts';
+const Chart = dynamic(() => import('react-apexcharts'), {
+  ssr: false,
+});
 
-const Chart = dynamic(() => import('react-apexcharts'), { ssr: false })
+const LineChart = (props: any) => {
+  const { chartData, chartOptions } = props;
 
-interface LineChartProps extends ChartProps {}
-
-export default function LineChart ({
-  chartOptions,
-  chartData
-}: LineChartProps) {
   return (
+    // @ts-expect-error
     <Chart
       options={chartOptions}
+      type="line"
+      width="100%"
+      height="100%"
       series={chartData}
-      type='line'
-      width='100%'
-      height='100%'
     />
-  )
-}
+  );
+};
+
+export default LineChart;
diff --git a/src/components/charts/PieChart.tsx b/src/components/charts/PieChart.tsx
index 877a088..00d9dfb 100644
--- a/src/components/charts/PieChart.tsx
+++ b/src/components/charts/PieChart.tsx
@@ -1,38 +1,23 @@
-import dynamic from 'next/dist/shared/lib/dynamic'
-import React from 'react'
-import { isWindowAvailable } from 'utils/navigation'
-import { ChartProps, ChartState } from './LineAreaChart'
-const Chart = dynamic(() => import('react-apexcharts'), { ssr: false })
+'use client';
+import dynamic from 'next/dynamic';
+// import Chart from 'react-apexcharts';
+const Chart = dynamic(() => import('react-apexcharts'), {
+  ssr: false,
+});
 
-class PieChart extends React.Component<ChartProps, ChartState> {
-  state: ChartState = {
-    chartData: [],
-    chartOptions: {}
-  }
+const PieChart = (props: any) => {
+  const { chartData, chartOptions } = props;
 
-  constructor (props: ChartProps) {
-    super(props)
-  }
+  return (
+    // @ts-expect-error
+    <Chart
+      options={chartOptions}
+      type="pie"
+      width="100%"
+      height="100%"
+      series={chartData}
+    />
+  );
+};
 
-  componentDidMount () {
-    this.setState({
-      chartData: this.props.chartData,
-      chartOptions: this.props.chartOptions
-    })
-  }
-
-  render () {
-    if (!isWindowAvailable()) return <></>
-    return (
-      <Chart
-        options={this.state.chartOptions}
-        series={this.state.chartData}
-        type='pie'
-        width='100%'
-        height='55%'
-      />
-    )
-  }
-}
-
-export default PieChart
+export default PieChart;
diff --git a/src/components/image/Avatar.tsx b/src/components/image/Avatar.tsx
deleted file mode 100644
index 92623c0..0000000
--- a/src/components/image/Avatar.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { chakra, useColorMode } from '@chakra-ui/system'
-import { ComponentProps } from 'react'
-import { Image } from './Image'
-
-interface AvatarImageProps extends ComponentProps<typeof Image> {
-  showBorder?: boolean
-}
-
-export function NextAvatar ({
-  src,
-  showBorder,
-  alt,
-  style,
-  ...props
-}: AvatarImageProps) {
-  const { colorMode } = useColorMode()
-
-  return (
-    <Image
-      {...props}
-      {...(showBorder
-        ? {
-            border: '2px',
-            borderColor: colorMode === 'dark' ? 'navy.700' : 'white'
-          }
-        : {})}
-      alt={alt}
-      src={src}
-      style={{ ...style, borderRadius: '50%' }}
-    />
-  )
-}
-
-export const ChakraNextAvatar = chakra(NextAvatar, {
-  shouldForwardProp: prop => ['width', 'height', 'src', 'alt'].includes(prop)
-})
diff --git a/src/components/image/Image.tsx b/src/components/image/Image.tsx
deleted file mode 100644
index 782d585..0000000
--- a/src/components/image/Image.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Box, ChakraComponent } from '@chakra-ui/react'
-import * as React from 'react'
-import NextImage from 'next/image'
-import { ComponentProps } from 'react'
-
-interface ImageProps extends ComponentProps<ChakraComponent<'div', {}>> {}
-
-export const Image = (props: ImageProps) => {
-  const { src, alt, ...rest } = props
-  return (
-    <Box overflow={'hidden'} position='relative' {...rest}>
-      <NextImage objectFit='cover' layout='fill' src={src} alt={alt} />
-    </Box>
-  )
-}
diff --git a/src/components/navbar/NavbarLinksAdmin.tsx b/src/components/navbar/NavbarLinksAdmin.tsx
index 5ab47b1..99a8a8e 100644
--- a/src/components/navbar/NavbarLinksAdmin.tsx
+++ b/src/components/navbar/NavbarLinksAdmin.tsx
@@ -6,6 +6,7 @@ import {
   Center,
   Flex,
   Icon,
+  Image,
   Link,
   Menu,
   MenuButton,
@@ -16,7 +17,6 @@ import {
   useColorModeValue,
 } from '@chakra-ui/react';
 // Custom Components
-import { Image } from 'components/image/Image';
 import { ItemContent } from 'components/menu/ItemContent';
 import { SearchBar } from 'components/navbar/searchBar/SearchBar';
 import { SidebarResponsive } from 'components/sidebar/Sidebar';
@@ -26,7 +26,11 @@ import { FaEthereum } from 'react-icons/fa';
 import { IoMdMoon, IoMdSunny } from 'react-icons/io';
 import { MdInfoOutline, MdNotificationsNone } from 'react-icons/md';
 import routes from 'routes';
-export default function HeaderLinks(props: { secondary: boolean }) {
+export default function HeaderLinks(props: {
+  secondary: boolean;
+  onOpen: boolean | any;
+  fixed: boolean | any;
+}) {
   const { secondary } = props;
   const { colorMode, toggleColorMode } = useColorMode();
   // Chakra Color Mode
@@ -181,7 +185,7 @@ export default function HeaderLinks(props: { secondary: boolean }) {
           minW={{ base: 'unset' }}
           maxW={{ base: '360px', md: 'unset' }}
         >
-          <Image src={navImage} borderRadius="16px" mb="28px" alt="" />
+          <Image src={navImage.src} borderRadius="16px" mb="28px" alt="" />
           <Flex flexDirection="column">
             <Link w="100%" href="https://horizon-ui.com/pro">
               <Button w="100%" h="44px" mb="10px" variant="brand">
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 8de9217..e3f25ea 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React from 'react';
 
 // chakra imports
 import {
@@ -11,54 +11,55 @@ import {
   DrawerOverlay,
   useDisclosure,
   DrawerContent,
-  DrawerCloseButton
-} from '@chakra-ui/react'
-import Content from 'components/sidebar/components/Content'
+  DrawerCloseButton,
+} from '@chakra-ui/react';
+import Content from 'components/sidebar/components/Content';
 import {
   renderThumb,
   renderTrack,
-  renderView
-} from 'components/scrollbar/Scrollbar'
-import { Scrollbars } from 'react-custom-scrollbars-2'
+  renderView,
+} from 'components/scrollbar/Scrollbar';
+import { Scrollbars } from 'react-custom-scrollbars-2';
 
 // Assets
-import { IoMenuOutline } from 'react-icons/io5'
-import { IRoute } from 'types/navigation'
-import { isWindowAvailable } from 'utils/navigation'
+import { IoMenuOutline } from 'react-icons/io5';
+import { IRoute } from 'types/navigation';
+import { isWindowAvailable } from 'utils/navigation';
 
 interface SidebarResponsiveProps {
-  routes: IRoute[]
+  routes: IRoute[];
 }
 
 interface SidebarProps extends SidebarResponsiveProps {
-  [x: string]: any
+  [x: string]: any;
 }
 
-function Sidebar (props: SidebarProps) {
-  const { routes } = props
+function Sidebar(props: SidebarProps) {
+  const { routes } = props;
 
-  let variantChange = '0.2s linear'
+  let variantChange = '0.2s linear';
   let shadow = useColorModeValue(
     '14px 17px 40px 4px rgba(112, 144, 176, 0.08)',
-    'unset'
-  )
+    'unset',
+  );
   // Chakra Color Mode
-  let sidebarBg = useColorModeValue('white', 'navy.800')
-  let sidebarMargins = '0px'
+  let sidebarBg = useColorModeValue('white', 'navy.800');
+  let sidebarMargins = '0px';
 
   // SIDEBAR
   return (
-    <Box display={{ sm: 'none', xl: 'block' }} position='fixed' minH='100%'>
+    <Box display={{ sm: 'none', xl: 'block' }} position="fixed" minH="100%">
       <Box
         bg={sidebarBg}
         transition={variantChange}
-        w='300px'
-        h='100vh'
+        w="300px"
+        h="100vh"
         m={sidebarMargins}
-        minH='100%'
-        overflowX='hidden'
+        minH="100%"
+        overflowX="hidden"
         boxShadow={shadow}
       >
+        {/* @ts-expect-error */}
         <Scrollbars
           autoHide
           renderTrackVertical={renderTrack}
@@ -69,32 +70,32 @@ function Sidebar (props: SidebarProps) {
         </Scrollbars>
       </Box>
     </Box>
-  )
+  );
 }
 
 // FUNCTIONS
 
-export function SidebarResponsive (props: SidebarResponsiveProps) {
-  let sidebarBackgroundColor = useColorModeValue('white', 'navy.800')
-  let menuColor = useColorModeValue('gray.400', 'white')
+export function SidebarResponsive(props: SidebarResponsiveProps) {
+  let sidebarBackgroundColor = useColorModeValue('white', 'navy.800');
+  let menuColor = useColorModeValue('gray.400', 'white');
   // // SIDEBAR
-  const { isOpen, onOpen, onClose } = useDisclosure()
-  const btnRef = React.useRef()
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const btnRef = React.useRef();
 
-  const { routes } = props
+  const { routes } = props;
   // let isWindows = navigator.platform.startsWith("Win");
   //  BRAND
 
   return (
-    <Flex display={{ sm: 'flex', xl: 'none' }} alignItems='center'>
-      <Flex ref={btnRef} w='max-content' h='max-content' onClick={onOpen}>
+    <Flex display={{ sm: 'flex', xl: 'none' }} alignItems="center">
+      <Flex ref={btnRef} w="max-content" h="max-content" onClick={onOpen}>
         <Icon
           as={IoMenuOutline}
           color={menuColor}
-          my='auto'
-          w='20px'
-          h='20px'
-          me='10px'
+          my="auto"
+          w="20px"
+          h="20px"
+          me="10px"
           _hover={{ cursor: 'pointer' }}
         />
       </Flex>
@@ -109,14 +110,15 @@ export function SidebarResponsive (props: SidebarResponsiveProps) {
         finalFocusRef={btnRef}
       >
         <DrawerOverlay />
-        <DrawerContent w='285px' maxW='285px' bg={sidebarBackgroundColor}>
+        <DrawerContent w="285px" maxW="285px" bg={sidebarBackgroundColor}>
           <DrawerCloseButton
-            zIndex='3'
+            zIndex="3"
             onClick={onClose}
             _focus={{ boxShadow: 'none' }}
             _hover={{ boxShadow: 'none' }}
           />
-          <DrawerBody maxW='285px' px='0rem' pb='0'>
+          <DrawerBody maxW="285px" px="0rem" pb="0">
+            {/* @ts-expect-error */}
             <Scrollbars
               autoHide
               renderTrackVertical={renderTrack}
@@ -129,8 +131,8 @@ export function SidebarResponsive (props: SidebarResponsiveProps) {
         </DrawerContent>
       </Drawer>
     </Flex>
-  )
+  );
 }
 // PROPS
 
-export default Sidebar
+export default Sidebar;
diff --git a/src/components/sidebar/components/SidebarCard.tsx b/src/components/sidebar/components/SidebarCard.tsx
index c72c589..a253d16 100644
--- a/src/components/sidebar/components/SidebarCard.tsx
+++ b/src/components/sidebar/components/SidebarCard.tsx
@@ -1,5 +1,11 @@
-import { Button, Flex, Link, Text, useColorModeValue } from '@chakra-ui/react';
-import { Image } from 'components/image/Image';
+import {
+  Button,
+  Flex,
+  Image,
+  Link,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react';
 import logoWhite from 'img/layout/logoWhite.png';
 
 export default function SidebarDocs() {
@@ -31,7 +37,7 @@ export default function SidebarDocs() {
         top="-47px"
         transform="translate(-50%, 0%)"
       >
-        <Image alt="" src={logoWhite} w="40px" h="40px" />
+        <Image alt="" src={logoWhite.src} w="40px" h="40px" />
       </Flex>
       <Flex
         direction="column"
diff --git a/src/views/admin/marketplace/components/HistoryItem.tsx b/src/views/admin/marketplace/components/HistoryItem.tsx
index 0996e65..4e59761 100644
--- a/src/views/admin/marketplace/components/HistoryItem.tsx
+++ b/src/views/admin/marketplace/components/HistoryItem.tsx
@@ -1,14 +1,20 @@
 import React from 'react';
 // Chakra imports
-import { Box, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react';
+import {
+  Box,
+  Flex,
+  Icon,
+  Image,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react';
 // Custom components
 import Card from 'components/card/Card';
 // Assets
 import { FaEthereum } from 'react-icons/fa';
-import { Image } from 'components/image/Image';
 
 export default function NFT(props: {
-  image: string;
+  image: string | any;
   name: string;
   author: string;
   date: string;
@@ -36,7 +42,7 @@ export default function NFT(props: {
           <Box>
             <Image
               alt=""
-              src={image}
+              src={image.src}
               w="66px"
               h="66px"
               borderRadius="20px"
diff --git a/src/views/admin/profile/components/Banner.tsx b/src/views/admin/profile/components/Banner.tsx
index 6b4331d..d7c9391 100644
--- a/src/views/admin/profile/components/Banner.tsx
+++ b/src/views/admin/profile/components/Banner.tsx
@@ -1,85 +1,76 @@
 // Chakra imports
-import { Box, Flex, Text, useColorModeValue } from '@chakra-ui/react'
-import Card from 'components/card/Card'
-import { NextAvatar } from 'components/image/Avatar'
+import { Box, Flex, Avatar, Text, useColorModeValue } from '@chakra-ui/react';
+import Card from 'components/card/Card';
 
-export default function Banner (props: {
-  banner: string
-  avatar: string
-  name: string
-  job: string
-  posts: number | string
-  followers: number | string
-  following: number | string
-  [x: string]: any
+export default function Banner(props: {
+  banner: string;
+  avatar: string | any;
+  name: string;
+  job: string;
+  posts: number | string;
+  followers: number | string;
+  following: number | string;
+  [x: string]: any;
 }) {
-  const {
-    banner,
-    avatar,
-    name,
-    job,
-    posts,
-    followers,
-    following,
-    ...rest
-  } = props
+  const { banner, avatar, name, job, posts, followers, following, ...rest } =
+    props;
   // Chakra Color Mode
-  const textColorPrimary = useColorModeValue('secondaryGray.900', 'white')
-  const textColorSecondary = 'gray.400'
+  const textColorPrimary = useColorModeValue('secondaryGray.900', 'white');
+  const textColorSecondary = 'gray.400';
   const borderColor = useColorModeValue(
     'white !important',
-    '#111C44 !important'
-  )
+    '#111C44 !important',
+  );
   return (
-    <Card mb={{ base: '0px', lg: '20px' }} alignItems='center' {...rest}>
+    <Card mb={{ base: '0px', lg: '20px' }} alignItems="center" {...rest}>
       <Box
         bg={`url(${banner})`}
-        bgSize='cover'
-        borderRadius='16px'
-        h='131px'
-        w='100%'
+        bgSize="cover"
+        borderRadius="16px"
+        h="131px"
+        w="100%"
       />
-      <NextAvatar
-        mx='auto'
-        src={avatar}
-        h='87px'
-        w='87px'
-        mt='-43px'
-        border='4px solid'
+      <Avatar
+        mx="auto"
+        src={avatar.src}
+        h="87px"
+        w="87px"
+        mt="-43px"
+        border="4px solid"
         borderColor={borderColor}
       />
-      <Text color={textColorPrimary} fontWeight='bold' fontSize='xl' mt='10px'>
+      <Text color={textColorPrimary} fontWeight="bold" fontSize="xl" mt="10px">
         {name}
       </Text>
-      <Text color={textColorSecondary} fontSize='sm'>
+      <Text color={textColorSecondary} fontSize="sm">
         {job}
       </Text>
-      <Flex w='max-content' mx='auto' mt='26px'>
-        <Flex mx='auto' me='60px' alignItems='center' flexDirection='column'>
-          <Text color={textColorPrimary} fontSize='2xl' fontWeight='700'>
+      <Flex w="max-content" mx="auto" mt="26px">
+        <Flex mx="auto" me="60px" alignItems="center" flexDirection="column">
+          <Text color={textColorPrimary} fontSize="2xl" fontWeight="700">
             {posts}
           </Text>
-          <Text color={textColorSecondary} fontSize='sm' fontWeight='400'>
+          <Text color={textColorSecondary} fontSize="sm" fontWeight="400">
             Posts
           </Text>
         </Flex>
-        <Flex mx='auto' me='60px' alignItems='center' flexDirection='column'>
-          <Text color={textColorPrimary} fontSize='2xl' fontWeight='700'>
+        <Flex mx="auto" me="60px" alignItems="center" flexDirection="column">
+          <Text color={textColorPrimary} fontSize="2xl" fontWeight="700">
             {followers}
           </Text>
-          <Text color={textColorSecondary} fontSize='sm' fontWeight='400'>
+          <Text color={textColorSecondary} fontSize="sm" fontWeight="400">
             Followers
           </Text>
         </Flex>
-        <Flex mx='auto' alignItems='center' flexDirection='column'>
-          <Text color={textColorPrimary} fontSize='2xl' fontWeight='700'>
+        <Flex mx="auto" alignItems="center" flexDirection="column">
+          <Text color={textColorPrimary} fontSize="2xl" fontWeight="700">
             {following}
           </Text>
-          <Text color={textColorSecondary} fontSize='sm' fontWeight='400'>
+          <Text color={textColorSecondary} fontSize="sm" fontWeight="400">
             Following
           </Text>
         </Flex>
       </Flex>
     </Card>
-  )
+  );
 }
diff --git a/src/views/admin/profile/components/Project.tsx b/src/views/admin/profile/components/Project.tsx
index e6f6f4a..8bc1b40 100644
--- a/src/views/admin/profile/components/Project.tsx
+++ b/src/views/admin/profile/components/Project.tsx
@@ -4,12 +4,12 @@ import {
   Flex,
   Icon,
   Link,
+  Image,
   Text,
   useColorModeValue,
 } from '@chakra-ui/react';
 // Custom components
 import Card from 'components/card/Card';
-import { Image } from 'components/image/Image';
 // Assets
 import { MdEdit } from 'react-icons/md';
 
@@ -17,7 +17,7 @@ export default function Project(props: {
   title: string;
   ranking: number | string;
   link: string;
-  image: string;
+  image: string | any;
   [x: string]: any;
 }) {
   const { title, ranking, link, image, ...rest } = props;
@@ -33,7 +33,7 @@ export default function Project(props: {
           alt=""
           h="80px"
           w="80px"
-          src={image}
+          src={image.src}
           borderRadius="8px"
           me="20px"
         />