fix: remove error when build sourde

components/Animation/RowShowAnimation.tsx

@@ -18,7 +18,7 @@ export default function RowShowAnimation({ children, action, minHeight = 'unset'
 				setShow(true)
 			}, 100)
 		}
-	}, [])
+	}, [action])
 	return (
 		<>
 			{action ? (

components/Card/Background/BackgroundCard.tsx

@@ -1,13 +1,14 @@
 import clsx from 'clsx'
+import React from 'react'
 import styles from './style.module.scss'
 
 interface Props {
-	children: JSX.Element
+	children: React.ReactNode
 	classes?: string
 }
 
 const BackgroundCard = ({ children, classes }: Props) => {
-	return <div className={clsx(styles.backgroundCard, classes)}>{children}</div>
+	return <div className={clsx(styles.backgroundCard, classes, 'radius-lg')}>{children}</div>
 }
 
 export default BackgroundCard

components/Card/CardInfo/index.tsx

@@ -37,7 +37,7 @@ type CardInfoProps = {
 
 export default function CardInfo({ items, classes = [] }: CardInfoProps) {
 	return (
-		<BackgroundCard classes={['margin-bottom-md', ...classes]}>
+		<BackgroundCard classes={`margin-bottom-md ${classes.join(' ')}`}>
 			<div className={'margin-left-2xl margin-right-2xl margin-top-lg margin-bottom-lg'}>
 				{items.map(({ label, type, contents }) => (
 					<div key={label} className={clsx(styles.cardRow, 'row margin-bottom-md')}>

components/Card/Layout/ItemsCard.tsx

@@ -1,5 +1,6 @@
+import Row from 'components/Grid/Row'
 import BackgroundCard from '../Background/BackgroundCard'
-
+import styles from './style.module.scss'
 interface ItemComponent {
 	label: string
 	content: JSX.Element | string

components/Card/Layout/StaticsCard.tsx

@@ -18,7 +18,7 @@ const StaticsCard = ({ icon, title, content, classes, contentClasses }: Props) =
 		<Row className={'block-ver-center'}>
 			<div className={clsx(styles.iconBlock, 'block-center')}>
 				{/* <span className={icon}></span> */}
-				<Image src={`/images/icons/${icon}.svg`} width={48} height={48} />
+				<Image alt={icon} src={`/images/icons/${icon}.svg`} width={48} height={48} />
 			</div>
 			<div className={clsx(styles.contentBlock)}>
 				<span className={clsx('text', 'text-sm', 'contrast-color-70')}>{title}</span>

components/Footer/FooterSocial.tsx

@@ -36,7 +36,7 @@ export default function FooterSocial({ classes }: FooterSocialProps) {
 			<div>
 				{socialItems.map(item => (
 					<a key={item.icon} href={item.link} className="margin-right-sm">
-						<Image src={item.icon} width={32} height={32} />
+						<Image alt="Astra explorer" src={item.icon} width={32} height={32} />
 					</a>
 				))}
 			</div>

components/Logo/index.tsx

@@ -15,8 +15,10 @@ export default function Logo({
 }: LogoProps) {
 	return (
 		<a href="/" className="link block-center text-bold contrast-color-100">
-			<Image src={`/images/logo/${type}_logo.svg`} width={48} height={48} />
-			{hasText && <span className={`text text-${textSize} text-bold`}>{text}</span>}
+			<>
+				<Image alt="Astra blockchain" src={`/images/logo/${type}_logo.svg`} width={48} height={48} />
+				{hasText && <span className={`text text-${textSize} text-bold`}>{text}</span>}
+			</>
 		</a>
 	)
 }

components/Navbar/Navigation.tsx

@@ -53,7 +53,7 @@ export default function Navigation({ items }: NavigationProps) {
 			>
 				{locale ? (
 					<>
-						<Image src={`/images/flag${link}.svg`} width={30} height={19} />
+						<Image alt={link} src={`/images/flag${link}.svg`} width={30} height={19} />
 						<span className="padding-left-xs">{text}</span>
 					</>
 				) : (
@@ -94,7 +94,7 @@ export default function Navigation({ items }: NavigationProps) {
 		return (
 			<>
 				<span className="text-base text-center text-bold contrast-color-70 padding-sm block-center pointer">
-					<Image src={`/images/flag/${locale}.svg`} width={30} height={19} />
+					<Image alt={locale} src={`/images/flag/${locale}.svg`} width={30} height={19} />
 					<span className="padding-left-xs">{localeItem.label}</span>
 				</span>
 			</>

components/Search/ResultView.tsx

@@ -1,5 +1,7 @@
 import clsx from 'clsx'
 import Typography from 'components/Typography'
+import Link from 'next/link'
+import { LinkMaker } from 'utils/helper'
 import styles from './style.module.scss'
 
 type ResultViewProps = {
@@ -16,25 +18,38 @@ export default function ResultView({ item }: ResultViewProps) {
 				return address_hash || tx_hash || block_hash
 		}
 	}
+	const _link = () => {
+		if (type === 'block') {
+			return LinkMaker.block(item.block_number)
+		}
+
+		if (type === 'address') {
+			return LinkMaker.address(item.address_hash)
+		}
+
+		return LinkMaker.transaction(address_hash || tx_hash || block_hash)
+	}
 	return (
-		<div className={clsx(styles.item, 'money money-sm padding-left-xs')}>
-			<div className={clsx('text-bold')}>{_getLabel()}</div>
-			<div className={clsx(styles.viewMoreInfo, 'margin-top-xs')}>
-				<div>
-					<Typography.Time time={inserted_at} confirmedWithin="2ss" />
-				</div>
-				<div
-					className={clsx(
-						styles.viewTag,
-						'text-xs text-bold',
-						'padding-left-sm padding-right-sm',
-						'border border-base',
-						'block-center'
-					)}
-				>
-					{type}
+		<Link href={_link()}>
+			<div className={clsx(styles.item, 'money money-sm padding-left-xs')}>
+				<div className={clsx('text-bold')}>{_getLabel()}</div>
+				<div className={clsx(styles.viewMoreInfo, 'margin-top-xs')}>
+					<div>
+						<Typography.Time time={inserted_at} />
+					</div>
+					<div
+						className={clsx(
+							styles.viewTag,
+							'text-xs text-bold',
+							'padding-left-sm padding-right-sm',
+							'border border-base',
+							'block-center'
+						)}
+					>
+						{type}
+					</div>
 				</div>
 			</div>
-		</div>
+		</Link>
 	)
 }

components/Search/SearchModal.tsx

@@ -57,7 +57,7 @@ export default function SearchModal({ open, closeModal }: SearchModalProps) {
 		if (_search && data !== undefined) {
 			_setSearchStatus(SearchStatusEnum.DONE)
 		}
-	}, [data])
+	}, [data, _search])
 	useEffect(() => {
 		if (open) {
 			setTimeout(() => {

components/Search/SearchResult.tsx

@@ -22,7 +22,7 @@ export default function SearchResult({ status, items, searchValue }: SearchResul
 			{status === SearchStatusEnum.DONE && (!items || items.length === 0) && (
 				<div className={styles.waitResult}>
 					<span style={{ paddingTop: '26px' }}>
-						<Image src={'/images/icons/empty_search.png'} width={164} height={97} />
+						<Image alt="Astra Blockchain" src={'/images/icons/empty_search.png'} width={164} height={97} />
 					</span>
 					Sorry! We could not find any results
 				</div>

components/Typography/RowTitle.tsx

@@ -11,7 +11,9 @@ export default function RowTitle({ columns }: RowTitleProps) {
 	return (
 		<div className="row contrast-color-50 margin-bottom-sm margin-top-xl">
 			{columns.map(column => (
-				<div className={`${column.col}`}>{column.title}</div>
+				<div className={`${column.col}`} key={column.title}>
+					{column.title}
+				</div>
 			))}
 		</div>
 	)

package.json

@@ -46,13 +46,13 @@
 		"@svgr/webpack": "^6.3.1",
 		"@types/lodash": "^4.14.185",
 		"@types/node": "17.0.14",
+		"@types/react": "18.0.17",
+		"@types/react-dom": "18.0.6",
 		"eslint": "^8.23.1",
+		"eslint-config-next": "^12.3.1",
 		"husky": "^8.0.1",
 		"prettier": "^2.7.1",
 		"sass": "^1.54.9",
 		"typescript": "4.5.5"
-	},
-	"resolutions": {
-		"@types/react": "17.0.43"
 	}
 }

pages/_app.tsx

@@ -4,7 +4,7 @@ import { AppProps } from 'next/app'
 import { Provider } from 'react-redux'
 import { PersistGate } from 'redux-persist/integration/react'
 
-import '@astraprotocol/astra-ui//lib/shared/style.css'
+import '@astraprotocol/astra-ui/lib/shared/style.css'
 import { cosmosFetcher, evmFetcher } from 'api'
 import { SWRConfig } from 'swr'
 import store, { persistor } from '../store'

pages/blocks/index.tsx

@@ -7,7 +7,7 @@ import { NextPage } from 'next'
 import Head from 'next/head'
 import React from 'react'
 import BlockRow from 'views/block/BlockRow'
-import useBlock from 'views/Block/hook/useBlock'
+import useBlock from 'views/block/hook/useBlock'
 import Layout from '../../components/Layout'
 
 const BlockDetailPage: React.FC<NextPage> = _ => {

tsconfig.json

@@ -17,5 +17,5 @@
 		"baseUrl": "."
 	},
 	"exclude": ["node_modules", ".vscode"],
-	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+	"include": ["next-env.d.ts", "project.d.ts", "**/*.ts", "**/*.tsx"]
 }

views/block/HomeBlock.tsx

@@ -4,7 +4,7 @@ import Container from 'components/Container'
 import DotSpace from 'components/DotSpace'
 import RowLoader from 'components/Loader/RowLoader'
 import { LinkMaker } from 'utils/helper'
-import RowBrief from './BlockBriefRow'
+import BlockBriefRow from './BlockBriefRow'
 import useBlock from './hook/useBlock'
 
 export function HomeBlock() {
@@ -24,7 +24,7 @@ export function HomeBlock() {
 			) : (
 				<BackgroundCard>
 					{top10?.map(item => (
-						<RowBrief
+						<BlockBriefRow
 							key={item.blockHeight}
 							blockNumber={item.blockHeight}
 							proposerAddress={getPropserAddress(item.committedCouncilNodes)?.address}