Provide dashboard layout with 4NK context

app/dashboard/layout.tsx

@@ -31,9 +31,10 @@ import EventBus from "@/lib/4nk/EventBus"
 import AuthModal from "@/components/4nk/AuthModal"
 import Iframe from "@/components/4nk/Iframe"
 import { iframeUrl } from "../page"
-import { FourNKProvider } from "@/lib/contexts/FourNKContext";
+import { FourNKProvider, use4NK } from "@/lib/contexts/FourNKContext";
 
-export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+// Composant interne qui utilise le contexte 4NK
+function DashboardLayoutContent({ children }: { children: React.ReactNode }) {
   const [isConnected, setIsConnected] = useState(false)
   const [userPairingId, setUserPairingId] = useState<string | null>(null)
   const [isAuthenticated, setIsAuthenticated] = useState(false)
@@ -46,6 +47,9 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
   const [isCopied, setIsCopied] = useState(false)
   const router = useRouter()
   
+  // Récupérer les données du contexte 4NK
+  const { userName } = use4NK()
+
   useEffect(() => {
     try {
       const saved = typeof window !== 'undefined' ? localStorage.getItem('theme') : null
@@ -225,9 +229,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
 
         {/* Page content */}
         <main className="flex-1 overflow-hidden bg-gray-900">
-          <FourNKProvider>
+          {children}
-            {children}
-          </FourNKProvider>
         </main>
       </div>
 
@@ -269,3 +271,14 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
     </div>
   )
 }
+
+// Composant principal qui wrap avec le provider
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <FourNKProvider>
+      <DashboardLayoutContent>
+        {children}
+      </DashboardLayoutContent>
+    </FourNKProvider>
+  )
+}