replace old hooks

Author: pettinarip

app/[locale]/dapps/_components/dapps.tsx

@@ -8,7 +8,7 @@ import React, {
   useRef,
   useState,
 } from "react"
-import { useRouter } from "next/router"
+import { useSearchParams } from "next/navigation"
 import { useLocale } from "next-intl"
 
 import type { ChildOnlyProp } from "@/lib/types"
@@ -287,17 +287,16 @@ interface Categories {
 
 const DappsPage = () => {
   const { t } = useTranslation(["page-dapps", "common"])
-  const { query } = useRouter()
+  const searchParams = useSearchParams()
   const locale = useLocale()
 
   const [selectedCategory, setCategory] = useState<CategoryType>(
     CategoryType.FINANCE
   )
   const explore = useRef<HTMLDivElement>(null)
 
+  const queryParamCategories = searchParams.get("category") || ""
   useEffect(() => {
-    // Fetch category on load
-    const queryParamCategories = (query.category as string) || ""
     const selectedCategory = queryParamCategories
       ? (queryParamCategories.split(",")[0] as CategoryType)
       : CategoryType.FINANCE // Default to finance category if empty
@@ -319,7 +318,7 @@ const DappsPage = () => {
         behavior: "smooth",
       })
     }
-  }, [query.category])
+  }, [queryParamCategories])
 
   const updatePath = (
     selectedCategory: CategoryType,

src/components/RadialChart/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { type ReactNode, useEffect, useState } from "react"
-import { useRouter } from "next/router"
+import { useLocale } from "next-intl"
 import { MdInfoOutline } from "react-icons/md"
 import { PolarAngleAxis, RadialBar, RadialBarChart } from "recharts"
 
@@ -53,7 +53,7 @@ const RadialChart = ({
   displayValue,
 }: RadialChartProps) => {
   const { t } = useTranslation("common")
-  const { locale } = useRouter()
+  const locale = useLocale()
   const [isMounted, setIsMounted] = useState(false)
 
   useEffect(() => {

src/components/Resources/useResources.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react"
-import { useRouter } from "next/router"
+import { useLocale } from "next-intl"
 
 import { Lang } from "@/lib/types"
 
@@ -60,7 +60,7 @@ const formatSmallUSD = (value: number, locale: string): string =>
 
 export const useResources = ({ txCostsMedianUsd }): DashboardSection[] => {
   const { t } = useTranslation("page-resources")
-  const { locale } = useRouter()
+  const locale = useLocale()
   const localeForNumberFormat = getLocaleForNumberFormat(locale! as Lang)
 
   const medianTxCost =