fix: move useCallback hooks before early returns in React hooks

This fixes the 'Rendered more hooks than during the previous render' error
that occurs when using useAppKitConnections and useAppKitConnection hooks.

The issue was that useCallback hooks were being called after conditional
early returns, which violates React's rules of hooks - hooks must be called
unconditionally in the same order on every render.

Changes:
- useAppKitConnections: moved formatConnection useCallback before the
  isMultiWalletEnabled early return
- useAppKitConnection: moved switchConnection and deleteConnection
  useCallback hooks before the isMultiWalletEnabled early return

Co-Authored-By: enes@reown.com <enes@reown.com>

Author: devin-ai-integration[bot]

packages/controllers/exports/react.ts

@@ -167,21 +167,6 @@ export function useAppKitConnections(namespace?: ChainNamespace) {
     throw new Error('No namespace found')
   }
 
-  const { connections, recentConnections } =
-    ConnectionControllerUtil.getConnectionsData(chainNamespace)
-
-  if (!isMultiWalletEnabled) {
-    AlertController.open(
-      ConstantsUtil.REMOTE_FEATURES_ALERTS.MULTI_WALLET_NOT_ENABLED.CONNECTIONS_HOOK,
-      'info'
-    )
-
-    return {
-      connections: [],
-      recentConnections: []
-    }
-  }
-
   const formatConnection = useCallback((connection: Connection) => {
     const connector = ConnectorController.getConnectorById(connection.connectorId)
 
@@ -197,6 +182,21 @@ export function useAppKitConnections(namespace?: ChainNamespace) {
     }
   }, [])
 
+  const { connections, recentConnections } =
+    ConnectionControllerUtil.getConnectionsData(chainNamespace)
+
+  if (!isMultiWalletEnabled) {
+    AlertController.open(
+      ConstantsUtil.REMOTE_FEATURES_ALERTS.MULTI_WALLET_NOT_ENABLED.CONNECTIONS_HOOK,
+      'info'
+    )
+
+    return {
+      connections: [],
+      recentConnections: []
+    }
+  }
+
   return {
     connections: connections.map(formatConnection),
     recentConnections: recentConnections.map(formatConnection)
@@ -217,24 +217,6 @@ export function useAppKitConnection({ namespace, onSuccess, onError }: UseAppKit
 
   const isMultiWalletEnabled = Boolean(remoteFeatures?.multiWallet)
 
-  if (!isMultiWalletEnabled) {
-    AlertController.open(
-      ConstantsUtil.REMOTE_FEATURES_ALERTS.MULTI_WALLET_NOT_ENABLED.CONNECTION_HOOK,
-      'info'
-    )
-
-    return {
-      connection: undefined,
-      isPending: false,
-      switchConnection: () => Promise.resolve(undefined),
-      deleteConnection: () => ({})
-    }
-  }
-
-  const connectorId = activeConnectorIds[chainNamespace]
-  const connList = connections.get(chainNamespace)
-  const connection = connList?.find(c => c.connectorId.toLowerCase() === connectorId?.toLowerCase())
-
   const switchConnection = useCallback(
     async ({ connection: _connection, address }: SwitchConnectionParams) => {
       try {
@@ -284,6 +266,24 @@ export function useAppKitConnection({ namespace, onSuccess, onError }: UseAppKit
     [chainNamespace]
   )
 
+  if (!isMultiWalletEnabled) {
+    AlertController.open(
+      ConstantsUtil.REMOTE_FEATURES_ALERTS.MULTI_WALLET_NOT_ENABLED.CONNECTION_HOOK,
+      'info'
+    )
+
+    return {
+      connection: undefined,
+      isPending: false,
+      switchConnection: () => Promise.resolve(undefined),
+      deleteConnection: () => ({})
+    }
+  }
+
+  const connectorId = activeConnectorIds[chainNamespace]
+  const connList = connections.get(chainNamespace)
+  const connection = connList?.find(c => c.connectorId.toLowerCase() === connectorId?.toLowerCase())
+
   return {
     connection,
     isPending: isSwitchingConnection,