update next/link

components/SideNav.tsx

@@ -39,7 +39,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
     >
       <div className="flex min-h-screen flex-col justify-between">
         <div className="my-2">
-          <Link href={'/'} shallow={true} passHref>
+          <Link href={'/'} shallow={true} passHref legacyBehavior>
             <div
               className={`h-14 items-center transition-all duration-300 ease-in-out ${
                 collapsed ? '' : 'justify-start'
@@ -173,7 +173,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 export default SideNav
@@ -199,12 +199,13 @@ const MenuItem = ({
 }) => {
   return (
     <Tooltip content={title} placement="right" show={collapsed && showTooltip}>
-      <Link href={pagePath} shallow={true}>
-        <a
+      <Link
+        href={pagePath}
+        shallow={true}
         className={`default-transition flex cursor-pointer px-4 focus:text-th-primary focus:outline-none md:hover:text-th-primary ${
           active ? 'text-th-primary' : 'text-th-fgd-1'
-          } ${hideIconBg ? 'py-1' : 'py-1.5 xl:py-2'}`}
-        >
+        } ${hideIconBg ? 'py-1' : 'py-1.5 xl:py-2'}`}>
+
         <div className="flex w-full items-center justify-between">
           <div className="flex items-center">
             <div
@@ -233,10 +234,10 @@ const MenuItem = ({
             <ArrowTopRightOnSquareIcon className="h-4 w-4" />
           ) : null}
         </div>
-        </a>
+
       </Link>
     </Tooltip>
-  )
+  );
 }
 
 export const ExpandableMenuItem = ({

components/forms/MultiSelectDropdown.tsx

@@ -71,7 +71,7 @@ const MultiSelectDropdown = ({
         </div>
       )}
     </Popover>
-  )
+  );
 }
 
 export default MultiSelectDropdown

components/mobile/BottomBar.tsx

@@ -31,47 +31,43 @@ const BottomBar = () => {
   const { asPath } = useRouter()
   const [showPanel, setShowPanel] = useState(false)
 
-  return (
-    <>
+  return <>
     <div className="grid grid-cols-4 grid-rows-1 bg-th-bkg-2 py-2.5">
       <Link
         href={{
           pathname: '/',
         }}
-        >
-          <a
         className={`${
           asPath === '/' ? 'text-th-primary' : 'text-th-fgd-3'
-            } col-span-1 flex cursor-pointer flex-col items-center`}
-          >
+        } col-span-1 flex cursor-pointer flex-col items-center`}>
+
         <HomeIcon className="mb-1 h-4 w-4" />
         <StyledBarItemLabel>{t('account')}</StyledBarItemLabel>
-          </a>
+
       </Link>
       <Link
         href={{
           pathname: '/swap',
         }}
         shallow={true}
-        >
-          <a
         className={`${
           asPath === '/swap' ? 'text-th-primary' : 'text-th-fgd-3'
-            } col-span-1 flex cursor-pointer flex-col items-center`}
-          >
+        } col-span-1 flex cursor-pointer flex-col items-center`}>
+
         <ArrowsRightLeftIcon className="mb-1 h-4 w-4" />
         <StyledBarItemLabel>{t('swap')}</StyledBarItemLabel>
-          </a>
+
       </Link>
-        <Link href="/trade" shallow={true}>
-          <a
+      <Link
+        href="/trade"
+        shallow={true}
         className={`${
           asPath === '/trade' ? 'text-th-primary' : 'text-th-fgd-3'
-            } col-span-1 flex cursor-pointer flex-col items-center`}
-          >
+        } col-span-1 flex cursor-pointer flex-col items-center`}>
+
         <TradeIcon className="mb-1 h-4 w-4" />
         <StyledBarItemLabel>{t('trade')}</StyledBarItemLabel>
-          </a>
+
       </Link>
       <a
         className={`${
@@ -84,8 +80,7 @@ const BottomBar = () => {
       </a>
     </div>
     <MoreMenuPanel showPanel={showPanel} setShowPanel={setShowPanel} />
-    </>
-  )
+  </>;
 }
 
 export default BottomBar
@@ -161,14 +156,14 @@ const MoreMenuItem = ({
       <ChevronRightIcon className="h-5 w-5" />
     </a>
   ) : (
-    <Link href={path} shallow={true}>
-      <a className={classNames}>
+    (<Link href={path} shallow={true} className={classNames}>
+
       <div className="flex items-center">
         {icon}
         <span className="ml-1.5">{title}</span>
       </div>
       <ChevronRightIcon className="h-5 w-5" />
-      </a>
-    </Link>
-  )
+
+    </Link>)
+  );
 }

components/shared/MenuItem.tsx

@@ -12,19 +12,20 @@ const MenuItem = ({ href, children, newWindow = false }: MenuItemProps) => {
   const { asPath } = useRouter()
 
   return (
-    <Link href={href} shallow={true}>
-      <a
+    (<Link
+      href={href}
+      shallow={true}
       className={`text-mango-200 flex h-full items-center justify-between border-b border-th-bkg-4 p-3 font-bold hover:text-yellow-400 md:border-none md:py-0
         ${asPath === href ? `text-th-primary` : `border-transparent`}
       `}
       target={newWindow ? '_blank' : ''}
-        rel={newWindow ? 'noopener noreferrer' : ''}
-      >
+      rel={newWindow ? 'noopener noreferrer' : ''}>
+
       {children}
       <ChevronRightIcon className="h-5 w-5 md:hidden" />
-      </a>
-    </Link>
-  )
+
+    </Link>)
+  );
 }
 
 export default MenuItem