fix mode refresh problem

src/app/[locale]/(default)/(home)/HomeHeroRow.tsx

@@ -27,7 +27,7 @@ import { cn } from '@/lib/utils'
 import { Link } from '@/navigation'
 import { useLocale, useTranslations } from 'next-intl'
 import Image from 'next/image'
-import { useTheme } from 'next-themes'
+import { useTheme } from '@/hooks/utils/useTheme'
 import { faGithub } from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { DEFAULT_PATHS } from '../defaultNavs'
@@ -80,7 +80,8 @@ const logos = [
 export default function HomeHeroRow() {
   const t = useTranslations()
   const locale = useLocale()
-  const { theme } = useTheme()
+  const { theme, mounted } = useTheme()
+  if (!mounted) return null
 
   return (
     <>

src/app/[locale]/(default)/blinks/BlinksHeroRow.tsx

@@ -10,7 +10,7 @@ import { mainShardGradation } from '@/lib/decoration'
 import { cn } from '@/lib/utils'
 import { useLocale, useTranslations } from 'next-intl'
 import Image from 'next/image'
-import { useTheme } from 'next-themes'
+import { useTheme } from '@/hooks/utils/useTheme'
 import { Link } from '@/navigation'
 
 const logos = [
@@ -25,7 +25,8 @@ const logos = [
 export default function BlinksHeroRow() {
   const t = useTranslations()
   const locale = useLocale()
-  const { theme } = useTheme()
+  const { theme, mounted } = useTheme()
+  if (!mounted) return null
 
   return (
     <>

src/app/[locale]/(default)/blinks/StakingBlinks.tsx

@@ -1,11 +1,9 @@
 'use client'
 
-import '@dialectlabs/blinks/index.css'
 import { Blink, useAction } from '@dialectlabs/blinks'
 import { useActionSolanaWalletAdapter } from '@dialectlabs/blinks/hooks/solana'
-import appInfo from '@appInfo'
 import { solanaEndpoint } from '@/components/providers/SolanaWalletProvider'
-import { useTheme } from 'next-themes'
+import { useTheme } from '@/hooks/utils/useTheme'
 import { useWallet } from '@solana/wallet-adapter-react'
 import ConnectYourWalletCard from '@/components/common/ConnectYourWalletCard'
 import { Skeleton } from '@/components/ui/skeleton'
@@ -20,9 +18,10 @@ export default function StakingBlinks({ updateCounter }: Props) {
   const { adapter } = useActionSolanaWalletAdapter(solanaEndpoint)
   const { action } = useAction({
     url: `${VALIDATORS_BLINKS_BASE_URL}/v1/stake`,
-    adapter,
+    adapter
   })
-  const { theme } = useTheme()
+  const { theme, mounted } = useTheme()
+  if (!mounted) return null
 
   return (
     <>

src/app/[locale]/(default)/blinks/StakingFromAccountBlinks.tsx

@@ -1,10 +1,9 @@
 'use client'
 
-import '@dialectlabs/blinks/index.css'
 import { Blink, useAction } from '@dialectlabs/blinks'
 import { useActionSolanaWalletAdapter } from '@dialectlabs/blinks/hooks/solana'
 import { solanaEndpoint } from '@/components/providers/SolanaWalletProvider'
-import { useTheme } from 'next-themes'
+import { useTheme } from '@/hooks/utils/useTheme'
 import { useWallet } from '@solana/wallet-adapter-react'
 import ConnectYourWalletCard from '@/components/common/ConnectYourWalletCard'
 import { Skeleton } from '@/components/ui/skeleton'
@@ -19,9 +18,10 @@ export default function StakingFromAccountBlinks({ updateCounter }: Props) {
   const { adapter } = useActionSolanaWalletAdapter(solanaEndpoint)
   const { action } = useAction({
     url: `${VALIDATORS_BLINKS_BASE_URL}/v1/stake/active?pubkey=${publicKey}`,
-    adapter,
+    adapter
   })
-  const { theme } = useTheme()
+  const { theme, mounted } = useTheme()
+  if (!mounted) return null
 
   return (
     <>

src/app/[locale]/(default)/blinks/StakingHeroRow.tsx

@@ -12,7 +12,7 @@ import { Link } from '@/navigation'
 import { useLocale, useTranslations } from 'next-intl'
 import Image from 'next/image'
 import { DEFAULT_PATHS } from '../defaultNavs'
-import { useTheme } from 'next-themes'
+import { useTheme } from '@/hooks/utils/useTheme'
 import { SOLANA_FOUNDATION_STAKE_POOL_LINK } from '@/constants/links'
 import StakingTabs from './StakingTabs'
 
@@ -28,7 +28,8 @@ const logos = [
 export default function StakingHeroRow() {
   const t = useTranslations()
   const locale = useLocale()
-  const { theme } = useTheme()
+  const { theme, mounted } = useTheme()
+  if (!mounted) return null
 
   return (
     <>

src/app/[locale]/(default)/blinks/SwapBlinks.tsx

@@ -1,10 +1,9 @@
 'use client'
 
-import '@dialectlabs/blinks/index.css'
 import { Blink, useAction } from '@dialectlabs/blinks'
 import { useActionSolanaWalletAdapter } from '@dialectlabs/blinks/hooks/solana'
 import { solanaEndpoint } from '@/components/providers/SolanaWalletProvider'
-import { useTheme } from 'next-themes'
+import { useTheme } from '@/hooks/utils/useTheme'
 import { useWallet } from '@solana/wallet-adapter-react'
 import ConnectYourWalletCard from '@/components/common/ConnectYourWalletCard'
 import { Skeleton } from '@/components/ui/skeleton'
@@ -19,9 +18,10 @@ export default function SwapBlinks({ updateCounter }: Props) {
   const { adapter } = useActionSolanaWalletAdapter(solanaEndpoint)
   const { action } = useAction({
     url: `${VALIDATORS_BLINKS_BASE_URL}/v1/swap`,
-    adapter,
+    adapter
   })
-  const { theme } = useTheme()
+  const { theme, mounted } = useTheme()
+  if (!mounted) return null
 
   return (
     <>

src/app/[locale]/(default)/blinks/UnstakeBlinks.tsx

@@ -1,10 +1,9 @@
 'use client'
 
-import '@dialectlabs/blinks/index.css'
 import { Blink, useAction } from '@dialectlabs/blinks'
 import { useActionSolanaWalletAdapter } from '@dialectlabs/blinks/hooks/solana'
 import { solanaEndpoint } from '@/components/providers/SolanaWalletProvider'
-import { useTheme } from 'next-themes'
+import { useTheme } from '@/hooks/utils/useTheme'
 import { useWallet } from '@solana/wallet-adapter-react'
 import ConnectYourWalletCard from '@/components/common/ConnectYourWalletCard'
 import { Skeleton } from '@/components/ui/skeleton'
@@ -19,9 +18,10 @@ export default function UnstakingBlinks({ updateCounter }: Props) {
   const { adapter } = useActionSolanaWalletAdapter(solanaEndpoint)
   const { action } = useAction({
     url: `${VALIDATORS_BLINKS_BASE_URL}/v1/unstake`,
-    adapter,
+    adapter
   })
-  const { theme } = useTheme()
+  const { theme, mounted } = useTheme()
+  if (!mounted) return null
 
   return (
     <>

src/app/[locale]/layout.tsx

@@ -2,6 +2,7 @@ import { Inter, Noto_Sans_JP } from 'next/font/google'
 import { unstable_setRequestLocale, getMessages } from 'next-intl/server'
 import { NextIntlClientProvider } from 'next-intl'
 import '../globals.css'
+import '@dialectlabs/blinks/index.css'
 import { ThemeProvider } from '@/components/providers/ThemeProvider'
 import { cn } from '@/lib/utils'
 import { Toaster } from '@/components/ui/toaster'
@@ -11,13 +12,13 @@ import SolanaWalletProvider from '@/components/providers/SolanaWalletProvider'
 const inter = Inter({
   subsets: ['latin'],
   display: 'swap',
-  variable: '--font-inter',
+  variable: '--font-inter'
 })
 
 const notoSansJP = Noto_Sans_JP({
   subsets: ['latin'],
   display: 'swap',
-  variable: '--font-noto-sans-jp',
+  variable: '--font-noto-sans-jp'
 })
 
 type Props = {
@@ -33,7 +34,7 @@ export function generateStaticParams() {
 
 export default async function LocaleLayout({
   children,
-  params: { locale },
+  params: { locale }
 }: Props) {
   unstable_setRequestLocale(locale)
   const messages = await getMessages({ locale })

src/components/common/ConnectYourWalletCard.tsx

@@ -8,12 +8,13 @@ import { mainShardGradation } from '@/lib/decoration'
 import { cn } from '@/lib/utils'
 import { WalletMultiButton } from '@solana/wallet-adapter-react-ui'
 import { useTranslations } from 'next-intl'
-import { useTheme } from 'next-themes'
+import { useTheme } from '@/hooks/utils/useTheme'
 import Image from 'next/image'
 
 export default function ConnectYourWalletCard() {
   const t = useTranslations()
-  const { theme } = useTheme()
+  const { theme, mounted } = useTheme()
+  if (!mounted) return null
   return (
     <>
       <Card className="grid w-full gap-5 p-4">

src/components/config/ModeToggle.tsx

@@ -2,20 +2,21 @@
 
 import * as React from 'react'
 import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
-import { useTheme } from 'next-themes'
+import { useTheme } from '@/hooks/utils/useTheme'
 
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuTrigger,
+  DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
 import { useTranslations } from 'next-intl'
 
 export function ModeToggle() {
-  const { setTheme } = useTheme()
   const t = useTranslations()
+  const { theme, mounted, setTheme } = useTheme()
+  if (!mounted) return null
 
   return (
     <DropdownMenu>

src/components/rows/InstantLiquidityRow.tsx

@@ -11,7 +11,7 @@ import { Link } from '@/navigation'
 import { useLocale, useTranslations } from 'next-intl'
 import Image from 'next/image'
 
-import { useTheme } from 'next-themes'
+import { useTheme } from '@/hooks/utils/useTheme'
 import { ELSOL_LP_ORCA_LINK } from '@/constants/links'
 import LiquidityTabs from '@/components/solana/LiquidityTabs'
 
@@ -27,7 +27,8 @@ const logos = [
 export default function InstantLiquidityRow() {
   const t = useTranslations()
   const locale = useLocale()
-  const { theme } = useTheme()
+  const { theme, mounted } = useTheme()
+  if (!mounted) return null
 
   return (
     <>

src/components/solana/CloseOrcaPositionBlinks.tsx

@@ -1,10 +1,9 @@
 'use client'
 
-import '@dialectlabs/blinks/index.css'
 import { Blink, useAction } from '@dialectlabs/blinks'
 import { useActionSolanaWalletAdapter } from '@dialectlabs/blinks/hooks/solana'
 import { solanaEndpoint } from '@/components/providers/SolanaWalletProvider'
-import { useTheme } from 'next-themes'
+import { useTheme } from '@/hooks/utils/useTheme'
 import { useWallet } from '@solana/wallet-adapter-react'
 import ConnectYourWalletCard from '@/components/common/ConnectYourWalletCard'
 import { Skeleton } from '@/components/ui/skeleton'
@@ -19,9 +18,10 @@ export default function CloseOrcaPositionBlinks({ updateCounter }: Props) {
   const { adapter } = useActionSolanaWalletAdapter(solanaEndpoint)
   const { action } = useAction({
     url: `${VALIDATORS_BLINKS_BASE_URL}/v1/whirlpool/close?pubkey=${publicKey}`,
-    adapter,
+    adapter
   })
-  const { theme } = useTheme()
+  const { theme, mounted } = useTheme()
+  if (!mounted) return null
 
   return (
     <>

src/components/solana/OpenOrcaPositionBlinks.tsx

@@ -1,10 +1,9 @@
 'use client'
 
-import '@dialectlabs/blinks/index.css'
 import { Blink, useAction } from '@dialectlabs/blinks'
 import { useActionSolanaWalletAdapter } from '@dialectlabs/blinks/hooks/solana'
 import { solanaEndpoint } from '@/components/providers/SolanaWalletProvider'
-import { useTheme } from 'next-themes'
+import { useTheme } from '@/hooks/utils/useTheme'
 import { useWallet } from '@solana/wallet-adapter-react'
 import ConnectYourWalletCard from '@/components/common/ConnectYourWalletCard'
 import { Skeleton } from '@/components/ui/skeleton'
@@ -17,15 +16,16 @@ type Props = {
 
 export default function OpenOrcaPositionBlinks({
   updateCounter,
-  symbol,
+  symbol
 }: Props) {
   const { publicKey } = useWallet()
   const { adapter } = useActionSolanaWalletAdapter(solanaEndpoint)
   const { action } = useAction({
     url: `${VALIDATORS_BLINKS_BASE_URL}/v1/whirlpool?symbol=${symbol}`,
-    adapter,
+    adapter
   })
-  const { theme } = useTheme()
+  const { theme, mounted } = useTheme()
+  if (!mounted) return null
 
   return (
     <>

src/hooks/utils/useTheme.tsx

@@ -0,0 +1,14 @@
+'use client'
+import { useTheme as useNextTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+
+export function useTheme() {
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useNextTheme()
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return { theme, setTheme, mounted }
+}