feat(web): Add mobile bridge support for P2P WebView integration

- Add mobile-bridge.ts utility for native app communication
- Add useMobileBridge.ts React hook
- Update AuthContext to detect and use native wallet
- Update PezkuwiContext to connect mobile wallet automatically
- Update WalletContext to sign transactions via native bridge

Mobile app can now seamlessly use web P2P features with native wallet.

web/src/hooks/useMobileBridge.ts

@@ -0,0 +1,111 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+  isMobileApp,
+  getPlatform,
+  getNativeWalletAddress,
+  getNativeAccountName,
+  isNativeWalletConnected,
+  requestNativeWalletConnection,
+  signTransactionNative,
+  navigateBackNative,
+  type MobileBridgeState,
+} from '@/lib/mobile-bridge';
+
+/**
+ * React hook for mobile bridge integration
+ *
+ * Provides reactive state and methods for interacting with the native mobile app.
+ * Automatically updates when the native bridge becomes ready.
+ */
+export function useMobileBridge() {
+  const [state, setState] = useState<MobileBridgeState>({
+    isMobile: false,
+    platform: 'web',
+    walletAddress: null,
+    accountName: null,
+    isWalletConnected: false,
+  });
+
+  // Update state from native bridge
+  const updateState = useCallback(() => {
+    setState({
+      isMobile: isMobileApp(),
+      platform: getPlatform(),
+      walletAddress: getNativeWalletAddress(),
+      accountName: getNativeAccountName(),
+      isWalletConnected: isNativeWalletConnected(),
+    });
+  }, []);
+
+  useEffect(() => {
+    // Initial state
+    updateState();
+
+    // Listen for native bridge ready event
+    const handleNativeReady = (event: CustomEvent) => {
+      if (import.meta.env.DEV) {
+        console.log('[MobileBridge] Native bridge ready:', event.detail);
+      }
+      updateState();
+    };
+
+    // Listen for wallet changes from native
+    const handleWalletChange = () => {
+      updateState();
+    };
+
+    window.addEventListener('pezkuwi-native-ready', handleNativeReady as EventListener);
+    window.addEventListener('walletChanged', handleWalletChange);
+
+    // Check periodically in case bridge loads after initial render
+    const checkInterval = setInterval(() => {
+      if (isMobileApp() && !state.isMobile) {
+        updateState();
+      }
+    }, 500);
+
+    // Clear interval after 5 seconds (bridge should be ready by then)
+    const clearTimer = setTimeout(() => {
+      clearInterval(checkInterval);
+    }, 5000);
+
+    return () => {
+      window.removeEventListener('pezkuwi-native-ready', handleNativeReady as EventListener);
+      window.removeEventListener('walletChanged', handleWalletChange);
+      clearInterval(checkInterval);
+      clearTimeout(clearTimer);
+    };
+  }, [updateState, state.isMobile]);
+
+  // Connect wallet via native app
+  const connectWallet = useCallback(() => {
+    if (state.isMobile) {
+      requestNativeWalletConnection();
+    }
+  }, [state.isMobile]);
+
+  // Sign transaction via native app
+  const signTransaction = useCallback(async (extrinsicHex: string): Promise<string> => {
+    if (!state.isMobile) {
+      throw new Error('Not running in mobile app');
+    }
+    return signTransactionNative(extrinsicHex);
+  }, [state.isMobile]);
+
+  // Navigate back in native app
+  const goBack = useCallback(() => {
+    if (state.isMobile) {
+      navigateBackNative();
+    }
+  }, [state.isMobile]);
+
+  return {
+    ...state,
+    connectWallet,
+    signTransaction,
+    goBack,
+    updateState,
+  };
+}
+
+export default useMobileBridge;