hicommonwealth · burtonator · May 5, 2025 · May 5, 2025 · May 5, 2025 · May 5, 2025
@@ -11,7 +11,8 @@ import { ToastContainer } from 'react-toastify';
 import { queryClient } from 'state/api/config';
 import { DefaultPrivyProvider } from 'views/components/DefaultPrivyProvider/DefaultPrivyProvider';
 import { DisableMavaOnMobile } from 'views/components/DisableMavaOnMobile';
-import ForceMobileAuth from 'views/components/ForceMobileAuth';
+import { PrivyMobileAuthStatusProvider } from 'views/components/PrivyMobile/PrivyMobileAuthStatusProvider';
+import { PrivyMobileAuthenticator } from 'views/components/PrivyMobile/PrivyMobileAuthenticator';
 import { ReactNativeBridgeUser } from 'views/components/ReactNativeBridge';
 import { ReactNativeLogForwarder } from 'views/components/ReactNativeBridge/ReactNativeLogForwarder';
 import { ReactNativeScrollToTopListener } from 'views/components/ReactNativeBridge/ReactNativeScrollToTopListener';
@@ -31,22 +32,28 @@ const App = () => {
         <QueryClientProvider client={queryClient}>
           <trpc.Provider client={trpcClient} queryClient={queryClient}>
             <DisableMavaOnMobile />
+            <ReactNativeLogForwarder />
             <FarcasterFrameProvider>
               {/*@ts-expect-error StrictNullChecks*/}
               <OpenFeatureProvider client={undefined}>
                 {isLoading ? (
                   <Splash />
                 ) : (
-                  <DefaultPrivyProvider>
-                    <ForceMobileAuth>
-                      <OnBoardingWrapperForMobile>
-                        <ReactNativeBridgeUser />
-                        <ReactNativeLogForwarder />
-                        <ReactNativeScrollToTopListener />
-                        <RouterProvider router={router()} />
-                      </OnBoardingWrapperForMobile>
-                    </ForceMobileAuth>
-                  </DefaultPrivyProvider>
+                  <>
+                    <PrivyMobileAuthStatusProvider>
+                      <PrivyMobileAuthenticator>
+                        <DefaultPrivyProvider>
+                          {/*<ForceMobileAuth>*/}
+                          <OnBoardingWrapperForMobile>
+                            <ReactNativeBridgeUser />
+                            <ReactNativeScrollToTopListener />
+                            <RouterProvider router={router()} />
+                          </OnBoardingWrapperForMobile>
+                          {/*</ForceMobileAuth>*/}
+                        </DefaultPrivyProvider>
+                      </PrivyMobileAuthenticator>
+                    </PrivyMobileAuthStatusProvider>
+                  </>
                 )}
                 <ToastContainer />
                 {import.meta.env.DEV && <ReactQueryDevtools />}

@@ -98,7 +98,6 @@ export class PrivyEthereumWebWalletController implements IWebWallet<string> {
   public async enable(forceChainId?: string) {
     // TODO: use https://docs.metamask.io/guide/rpc-api.html#other-rpc-methods to switch active
     // chain according to currently active node, if one exists
-    console.log('Attempting to enable Metamask');
     this._enabling = true;
     try {
       // default to ETH
@@ -188,6 +187,7 @@ export class PrivyEthereumWebWalletController implements IWebWallet<string> {
           throw switchError;
         }
       }
+
       // fetch active accounts
       this._accounts = (
         await this._web3.givenProvider.request({

@@ -0,0 +1,80 @@
+import { useCallback } from 'react';
+import { useReactNativeWebView } from '../useReactNativeWebView';
+
+type EvenSubscribeMessage = {
+  $id: string;
+  type: string;
+  variant: 'event-subscribe';
+  eventName: string;
+};
+
+type EventUpdateMessage<EventData> = {
+  $id: string;
+  type: string;
+  variant: 'event-update';
+  data: EventData;
+};
+
+export function useMobileRPCEventReceiver<EventData>(type: string) {
+  const reactNativeWebView = useReactNativeWebView();
+
+  return useCallback(
+    (eventName: string, listener: (update: EventData) => void) => {
+      const $id = '' + Math.random() * 100000;
+
+      const subscription: EvenSubscribeMessage = {
+        $id,
+        type: type,
+        eventName,
+        variant: 'event-subscribe',
+      };
+
+      if (!reactNativeWebView) {
+        return;
+      }
+
+      reactNativeWebView.postMessage(JSON.stringify(subscription));
+
+      function handler(message: MessageEvent<any>) {
+        const eventUpdateMessage = toEventUpdateMessage<EventData>(
+          type,
+          message.data,
+        );
+
+        if (eventUpdateMessage?.$id === $id) {
+          console.log('Got event update: ', eventUpdateMessage);
+          listener(eventUpdateMessage.data);
+        }
+      }
+
+      window.addEventListener('message', handler);
+    },
+    [reactNativeWebView, type],
+  );
+}
+
+function toEventUpdateMessage<EventData>(
+  type: string,
+  data: any,
+): EventUpdateMessage<EventData> | null {
+  const obj = messageToObject(data);
+
+  if (obj && obj.type === type && obj.variant === 'event-update') {
+    return obj;
+  }
+
+  return null;
+}
+
+function messageToObject(message: string | any): any | null {
+  if (message === 'string') {
+    try {
+      return JSON.parse(message);
+    } catch (e) {
+      // this might be just a string sent with sendMessage
+      return null;
+    }
+  }
+
+  return typeof message === 'string' ? JSON.parse(message) : message;
+}
@@ -0,0 +1,105 @@
+import { useCallback } from 'react';
+
+type ProtoError = {
+  message: string;
+};
+
+type ProtoRequestObject<Request> = {
+  $id: string;
+  type: string;
+  variant: 'request';
+  data: Request;
+};
+
+type ProtoResponseObjectSuccess<Response> = {
+  $id: string;
+  type: string;
+  variant: 'response';
+  data: Response;
+  error: null;
+};
+
+/**
+ * Wraps a response so that it includes the error OR data.
+ */
+type ProtoResponseObjectFailure = {
+  $id: string;
+  type: string;
+  variant: 'response';
+  data: null;
+  error: ProtoError;
+};
+
+type ProtoResponseObject<Response> =
+  | ProtoResponseObjectSuccess<Response>
+  | ProtoResponseObjectFailure;
+
+type Opts = {
+  type: string;
+};
+
+export function useMobileRPCSender<Request, Response>(opts: Opts) {
+  return useCallback(
+    async (request: Request) => {
+      return new Promise<Response>((resolve, reject) => {
+        const $id = '' + Math.random() * 100000;
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        function handler(message: MessageEvent<any>) {
+          const protoResponse = toProtoResponse<Response>(
+            opts.type,
+            message.data,
+          );
+
+          if (protoResponse?.$id === $id) {
+            console.log('Got proto response: ', protoResponse);
+
+            if (protoResponse.error) {
+              reject(protoResponse.error);
+            } else {
+              resolve(protoResponse.data);
+            }
+          }
+        }
+
+        window.addEventListener('message', handler);
+
+        const protoRequest: ProtoRequestObject<Request> = {
+          $id,
+          type: opts.type,
+          variant: 'request',
+          data: request,
+        };
+
+        window.ReactNativeWebView!.postMessage(JSON.stringify(protoRequest));
+      });
+    },
+    [opts.type],
+  );
+}
+
+function toProtoResponse<Response>(
+  type: string,
+  data: any,
+): ProtoResponseObject<Response> | null {
+  const obj = messageToObject(data);
+
+  if (obj && obj.type === type && obj.variant === 'response') {
+    return obj;
+  }
+
+  return null;
+}
+
+function messageToObject(message: string | any): any | null {
+  if (message === 'string') {
+    try {
+      return JSON.parse(message);
+    } catch (e) {
+      // this might be just a string sent with sendMessage
+      return null;
+    }
+  }
+
+  return typeof message === 'string' ? JSON.parse(message) : message;
+}
@@ -72,14 +72,26 @@
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function handler(message: MessageEvent<any>) {
+    console.log('FIXME execWithinMobileApp handler received message!');
     const dataObj = messageToObject(message.data);
 
+    // FIXME: it's possible messageToObject could be throwing an error?
+
+    console.log(
+      'FIXME execWithinMobileApp: got message: ',
+      JSON.stringify(dataObj, null, 2),
+    );
+
     if (dataObj.__requestID === __requestID) {
       latch.resolve(dataObj as Output);
     }
   }
 
-  addEventListener('message', handler);
+  console.log(
+    'FIXME execWithinMobileApp adding event listener to listen for response message',
+  );
+
+  window.addEventListener('message', handler);
 
   window.ReactNativeWebView!.postMessage(
     JSON.stringify({
@@ -88,13 +100,17 @@
     }),
   );
 
+  console.log('FIXME execWithinMobileApp waiting fr resolution  ');
+
   // the event listener we just registered will keep listening until the
   // latch is revolved and gets the response.
-  await latch.promise;
+  const output = await latch.promise;
+
+  console.log('FIXME execWithinMobileApp RESOLVED!!! ');
 
   // now we have to remove the event listener before we return the latch and
   // clean up after ourselves.
-  removeEventListener('message', handler);
+  window.removeEventListener('message', handler);
 
-  return latch.promise;
+  return output;
 }
@@ -1,6 +1,7 @@
 import { Navigate } from 'navigation/helpers';
 import React, { lazy } from 'react';
 import { Route } from 'react-router-dom';
+import { DebugMobile } from 'views/components/DebugMobile/DebugMobile';
 import { SignIn } from 'views/components/SignIn/SignIn';
 import { withLayout } from 'views/Layout';
 import { MobileSignIn } from 'views/modals/MobileSignIn/MobileSignIn';
@@ -145,6 +146,12 @@ const newProposalViewPage = lazy(
 );
 
 const CommonDomainRoutes = () => [
+  <Route
+    key="mobile-app-redirect"
+    path="/_internal/debug-mobile"
+    element={<DebugMobile />}
+  />,
+
   <Route
     key="mobile-app-redirect"
     path="/_internal/mobile-app-redirect"

@@ -30,7 +30,13 @@ export interface PermissionResponse {
   status: PermissionStatus;
 }
 
+/**
+ * @deprecated Not used any longer.  We should remove.
+ */
 export class MobileNotifications {
+  /**
+   * @deprecated
+   */
   public static async getPermissionsAsync(): Promise<PermissionResponse> {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const response = await execWithinMobileApp<any, any>({
@@ -44,6 +50,9 @@ export class MobileNotifications {
     };
   }
 
+  /**
+   * @deprecated
+   */
   public static async requestPermissionsAsync(): Promise<PermissionResponse> {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const response = await execWithinMobileApp<any, any>({