chore: resolve comments

apps/common/components/FeaturedApp.tsx

@@ -20,7 +20,7 @@ export function FeaturedApp(props: {app: TApp}): ReactElement {
 				<Image
 					src={props.app.logoURI}
 					alt={props.app.name}
-					priority={true}
+					priority
 					width={2000}
 					height={2000}
 					className={'right-0 top-0 size-full bg-center object-cover  '}

apps/common/components/MobileNavbar.tsx

@@ -1,9 +1,9 @@
 import Link from 'next/link';
 import {usePathname} from 'next/navigation';
 import {cl} from '@builtbymom/web3/utils';
-import {LogoDiscordRound} from '@common/icons/LogoDiscordRound';
-import {LogoParagraphRound} from '@common/icons/LogoParagraphRound';
-import {LogoTwitterRound} from '@common/icons/LogoTwitterRound';
+import {IconDiscord} from '@common/icons/IconDiscord';
+import {IconParagraph} from '@common/icons/IconParagraph';
+import {IconTwitter} from '@common/icons/IconTwitter';
 import {iconsDict, LANDING_SIDEBAR_LINKS, MENU_TABS} from '@common/utils/constants';
 
 import type {ReactElement} from 'react';
@@ -16,11 +16,12 @@ export function MobileNavbar({onClose}: {onClose: VoidFunction}): ReactElement {
 	return (
 		<div
 			className={
-				'flex h-full w-screen flex-col justify-end border-t border-gray-600/50 bg-gradient-to-b from-gray-900 to-[#1A1A1A] '
+				'flex h-full w-screen flex-col justify-end border-t border-gray-600/50 bg-gradient-to-b from-gray-900 to-[#1A1A1A]'
 			}>
 			<div className={'flex flex-col items-start gap-y-2 bg-transparent p-6 pb-4'}>
 				{MENU_TABS.map(tab => (
 					<Link
+						key={tab.route}
 						className={cl(
 							'text-base flex items-center gap-x-2 py-2 text-gray-400',
 							currentTab === tab.route ? 'text-white' : 'text-gray-400'
@@ -35,10 +36,11 @@ export function MobileNavbar({onClose}: {onClose: VoidFunction}): ReactElement {
 				))}
 			</div>
 
-			<div className={'w-full border-t border-gray-700 p-6'}>
+			<div className={'w-full border-t border-gray-700 p-6 pb-[104px]'}>
 				<div className={'flex w-full justify-between'}>
 					{LANDING_SIDEBAR_LINKS.slice(0, 5).map(link => (
 						<Link
+							key={link.href}
 							href={link.href}
 							className={'text-sm text-gray-400'}
 							target={'_blank'}>
@@ -51,17 +53,17 @@ export function MobileNavbar({onClose}: {onClose: VoidFunction}): ReactElement {
 					<Link
 						target={'_blank'}
 						href={'https://discord.com/invite/yearn'}>
-						<LogoDiscordRound />
+						<IconDiscord />
 					</Link>
 					<Link
 						target={'_blank'}
-						href={''}>
-						<LogoParagraphRound />
+						href={'https://paragraph.xyz/@yearn'}>
+						<IconParagraph />
 					</Link>
 					<Link
 						target={'_blank'}
 						href={'https://twitter.com/yearnfi'}>
-						<LogoTwitterRound />
+						<IconTwitter />
 					</Link>
 				</div>
 			</div>

apps/common/components/ModalMobileMenu.tsx

@@ -54,7 +54,7 @@ export function FooterNav(): ReactElement {
 					<IconParagraph className={'size-8 text-white transition-colors hover:text-primary'} />
 				</Link>
 				<Link
-					href={'https://discord.com/invite/b8ENPNqG5c'}
+					href={'https://discord.com/invite/yearn'}
 					target={'_blank'}
 					className={'flex items-center gap-x-4'}>
 					<IconDiscord className={'size-8 text-white transition-colors hover:text-primary'} />

apps/common/components/Sidebar.tsx

@@ -37,7 +37,9 @@ export function Sidebar(props: TSidebarProps): ReactElement {
 			<div>
 				<div className={'px-4'}>
 					<div className={'mb-4 ml-2'}>
-						<Link href={'/'}>
+						<Link
+							href={'/'}
+							className={'flex w-fit'}>
 							<LogoYearn
 								className={'size-10'}
 								back={'text-blue-500'}

apps/common/components/SortingBar.tsx

@@ -15,7 +15,7 @@ export function SortingBar(): ReactElement {
 				<p className={'mr-2 text-xs text-white'}>{'Sort by Popularity'}</p>
 				<IconChevron className={`size-6 text-white ${isOpen && 'rotate-180'}`} />
 			</button>
-			{isOpen && (
+			{isOpen ? (
 				<div
 					className={
 						'border-1 absolute top-28 z-30 w-80 border border-gray-700 bg-gray-500 py-2 text-white max-sm:left-0 md:right-1 md:top-10'
@@ -24,12 +24,13 @@ export function SortingBar(): ReactElement {
 						.fill('List Item')
 						.map((item, i) => (
 							<SortItem
+								key={i}
 								isActive={i === 2}
 								title={item}
 							/>
 						))}
 				</div>
-			)}
+			) : null}
 		</>
 	);
 }

apps/landing/components/sections/About.tsx

@@ -45,7 +45,7 @@ export function About(): ReactElement {
 						{'at all times.'}
 					</p>
 				</div>
-				{!isReadMore && (
+				{isReadMore ? null : (
 					<button
 						className={'mt-6 text-lg font-light text-primary'}
 						onClick={() => set_isReadMore(true)}>

apps/landing/components/sections/Contribute.tsx

@@ -51,7 +51,7 @@ function ContributeCard(props: {title: string; description: string; href: string
 			</div>
 			<div className={'flex justify-between gap-2'}>
 				<p className={'leading-6 underline opacity-70 transition-opacity hover:opacity-100'}>{'Read more'}</p>
-				{isHovering && <IconArrow className={'text-black'} />}
+				{isHovering ? <IconArrow className={'text-black'} /> : null}
 			</div>
 		</Link>
 	);
@@ -68,7 +68,10 @@ export function Contribute(): ReactElement {
 					'mt-10 grid grid-flow-col grid-cols-1 grid-rows-4 gap-6 sm:grid-cols-2 sm:grid-rows-2 md:grid-flow-row md:grid-cols-4 md:grid-rows-1'
 				}>
 				{CARDS.map(card => (
-					<ContributeCard {...card} />
+					<ContributeCard
+						key={card.title}
+						{...card}
+					/>
 				))}
 			</div>
 		</div>

apps/landing/components/sections/Partners.tsx

@@ -25,7 +25,9 @@ export function Partners(): ReactElement {
 					pauseOnHover={true}
 					className={'grid h-full overflow-hidden'}>
 					{PARTNERS.map(partner => (
-						<div className={'mx-5 flex h-full max-h-[32px] flex-col items-center justify-center pr-10'}>
+						<div
+							className={'mx-5 flex h-full max-h-[32px] flex-col items-center justify-center pr-10'}
+							key={partner.src}>
 							<Image
 								src={partner.src}
 								alt={'partner'}

pages/_app.tsx

@@ -70,7 +70,7 @@ const WithLayout = memo(function WithLayout(
 						</motion.nav>
 						{isNavbarOpen && (
 							<motion.nav
-								className={'sticky top-20 z-50 h-[calc(100vh-80px)] w-screen md:hidden'}
+								className={'sticky top-16 z-50 h-[calc(100vh-64px)] w-screen md:hidden'}
 								initial={{y: '100%'}} // Start from below the screen
 								animate={{y: 0}} // Animate to the original position
 								exit={{y: '100%'}} // Exit back to below the screen

pages/apps/[category].tsx

@@ -52,7 +52,12 @@ export default function Index(props: {router: NextRouter}): ReactElement {
 				</div>
 
 				<div className={'flex grid-rows-1 flex-col gap-4 md:grid md:grid-cols-2 lg:grid-cols-4'}>
-					{shuffledApps?.map(app => <AppCard app={app} />)}
+					{shuffledApps?.map(app => (
+						<AppCard
+							app={app}
+							key={app.appURI}
+						/>
+					))}
 				</div>
 			</div>
 		</div>

pages/apps/index.tsx

@@ -41,7 +41,7 @@ export default function Home(): ReactElement {
 
 					<div>
 						<div className={'mb-6 flex items-start justify-between'}>
-							<p className={'text-lg font-bold text-white'}>{'Featured Apps'}</p>
+							<p className={'w-full text-lg font-bold text-white'}>{'Featured Apps'}</p>
 							<CarouselSlideArrows
 								onScrollBack={onScrollBack}
 								onScrollForward={onScrollForward}

pages/apps/search/[query].tsx

@@ -25,7 +25,9 @@ export default function SeachResults(): ReactElement {
 						className={cl(
 							'hidden truncate text-[64px] font-bold leading-[84px] text-white md:block',
 							searchFilteredApps.length < 1 ? 'mb-4' : 'mb-10'
-						)}>{`Results for "${searchValue}"`}</p>
+						)}>
+						{`Results for "${searchValue}"`}
+					</p>
 					{searchFilteredApps.length < 1 ? (
 						<div>
 							<p className={'text-base text-gray-400'}>