Mejora diagnóstico OKX Web3 Wallet: detección de extensión y monitoreo de conexión

- Amplía detección de OKX: window.okxwallet, window.okex, propiedades isOKX/isOkxWallet
- Log de propiedades enumerables de window.ethereum
- Monitoreo de estado de conexión (address, chainId, connector)
- Mejora detección en componente OKXNetworkCheck para extensiones
- Mantiene logging para diagnóstico en consola del navegador

Author: vtamara

apps/nextjs/components/OKXNetworkCheck.tsx

@@ -9,16 +9,38 @@ export default function OKXNetworkCheck() {
   const [showHelp, setShowHelp] = useState(false)
 
   useEffect(() => {
-    // Detectar si es navegador interno de OKX
+    const win = window as any
+    // Detectar OKX Wallet (navegador interno o extensión)
+    let isOKX = false
+    let detectionMethod = 'none'
+
     const ua = navigator.userAgent.toLowerCase()
-    const isOKX = ua.includes('okx') || ua.includes('web3wallet')
+    if (ua.includes('okx') || ua.includes('web3wallet')) {
+      isOKX = true
+      detectionMethod = 'userAgent'
+    } else if (win.ethereum?.isOKX) {
+      isOKX = true
+      detectionMethod = 'window.ethereum.isOKX'
+    } else if (win.ethereum?.isOkxWallet) {
+      isOKX = true
+      detectionMethod = 'window.ethereum.isOkxWallet'
+    } else if (win.okxwallet) {
+      isOKX = true
+      detectionMethod = 'window.okxwallet'
+    } else if (win.okex) {
+      isOKX = true
+      detectionMethod = 'window.okex'
+    }
+
+    console.log('OKX Detection:', { isOKX, detectionMethod })
     setIsOKXBrowser(isOKX)
 
     // Si es OKX y está en red incorrecta, mostrar ayuda
     if (isOKX && chainId && chainId !== 42220 && chainId !== 11142220) {
       console.log('OKX on wrong network:', chainId)
       console.log('User Agent:', navigator.userAgent)
       console.log('Address:', address)
+      console.log('Detection method:', detectionMethod)
       setShowHelp(true)
     }
   }, [chainId])

apps/nextjs/providers/AppProvider.tsx

@@ -13,7 +13,17 @@ import OKXNetworkCheck from '@/components/OKXNetworkCheck'
 interface ExtendedWindow extends Window {
   ethereum?: {
     selectedAddress?: string
+    isOKX?: boolean
+    isOkxWallet?: boolean
+    isMetaMask?: boolean
+    isRabby?: boolean
+    isTrust?: boolean
+    isCoinbaseWallet?: boolean
+    chainId?: string
+    networkVersion?: string
   }
+  okxwallet?: any
+  okex?: any
 }
 import { AppProps } from 'next/app'
 import {
@@ -88,20 +98,45 @@ const queryClient = new QueryClient()
 // https://github.com/0xRowdy/nextauth-siwe-route-handlers/blob/main/src/app/providers/web3-providers.tsx
 export function AppProvider(props: RainbowKitProviderProps) {
   useEffect(() => {
+    const win = window as ExtendedWindow
     console.log('=== OKX DIAGNOSTIC INFO ===')
     console.log('1. User Agent:', navigator.userAgent)
     console.log('2. Is OKX Browser?', navigator.userAgent.toLowerCase().includes('okx'))
-    console.log('3. Ethereum provider:', window.ethereum ? 'Present' : 'Absent')
-    if (window.ethereum) {
-      console.log('4. Provider details:', {
-        isOKX: window.ethereum.isOKX,
-        isMetaMask: window.ethereum.isMetaMask,
-        chainId: window.ethereum.chainId,
-        networkVersion: window.ethereum.networkVersion
+    console.log('3. Ethereum provider:', win.ethereum ? 'Present' : 'Absent')
+    console.log('4. window.okxwallet:', win.okxwallet ? 'Present' : 'Absent')
+    console.log('5. window.okex:', win.okex ? 'Present' : 'Absent')
+    if (win.ethereum) {
+      console.log('6. Provider details:', {
+        isOKX: win.ethereum.isOKX,
+        isOkxWallet: win.ethereum.isOkxWallet,
+        isMetaMask: win.ethereum.isMetaMask,
+        isRabby: win.ethereum.isRabby,
+        isTrust: win.ethereum.isTrust,
+        isCoinbaseWallet: win.ethereum.isCoinbaseWallet,
+        chainId: win.ethereum.chainId,
+        networkVersion: win.ethereum.networkVersion
       })
+      // Log all enumerable properties of window.ethereum
+      try {
+        const props = Object.keys(win.ethereum)
+        console.log('7. window.ethereum properties:', props)
+      } catch (e) {
+        console.log('7. Failed to enumerate window.ethereum properties:', e)
+      }
     }
   }, [])
 
+  // Monitor wallet connection state
+  const { address, chainId, isConnected, connector } = useAccount()
+  useEffect(() => {
+    console.log('=== WALLET CONNECTION STATE ===')
+    console.log('Address:', address)
+    console.log('Chain ID:', chainId)
+    console.log('Is connected:', isConnected)
+    console.log('Connector:', connector?.name)
+    console.log('Connector ID:', connector?.id)
+  }, [address, chainId, isConnected, connector])
+
   return (
     <WagmiProvider config={config}>
       <SessionProvider>