diff --git a/landing/siwe.react.js b/landing/siwe.react.js
--- a/landing/siwe.react.js
+++ b/landing/siwe.react.js
@@ -35,6 +35,7 @@
 
 import { SIWEContext } from './siwe-context.js';
 import css from './siwe.css';
+import { useMonitorForWalletConnectModal } from './walletconnect-hooks.js';
 
 const projectId = process.env.COMM_WALLETCONNECT_KEY;
 const { chains, provider } = configureWagmiChains(process.env.COMM_ALCHEMY_KEY);
@@ -55,6 +56,13 @@
   window.ReactNativeWebView?.postMessage?.(JSON.stringify(message));
 }
 
+function onWalletConnectModalUpdate(update) {
+  postMessageToNativeWebView({
+    type: 'walletconnect_modal_update',
+    ...update,
+  });
+}
+
 async function signInWithEthereum(
   address: string,
   signer,
@@ -114,41 +122,7 @@
     prevConnectModalOpen.current = connectModalOpen;
   }, [connectModalOpen, signer]);
 
-  const newModalAppeared = React.useCallback(mutationList => {
-    for (const mutation of mutationList) {
-      for (const addedNode of mutation.addedNodes) {
-        if (
-          addedNode instanceof HTMLElement &&
-          addedNode.id === 'walletconnect-wrapper'
-        ) {
-          postMessageToNativeWebView({
-            type: 'walletconnect_modal_update',
-            state: 'open',
-          });
-        }
-      }
-      for (const addedNode of mutation.removedNodes) {
-        if (
-          addedNode instanceof HTMLElement &&
-          addedNode.id === 'walletconnect-wrapper'
-        ) {
-          postMessageToNativeWebView({
-            type: 'walletconnect_modal_update',
-            state: 'closed',
-          });
-        }
-      }
-    }
-  }, []);
-
-  React.useEffect(() => {
-    const observer = new MutationObserver(newModalAppeared);
-    invariant(document.body, 'document.body should be set');
-    observer.observe(document.body, { childList: true });
-    return () => {
-      observer.disconnect();
-    };
-  }, [newModalAppeared]);
+  useMonitorForWalletConnectModal(onWalletConnectModalUpdate);
 
   if (!hasNonce) {
     return (
diff --git a/landing/walletconnect-hooks.js b/landing/walletconnect-hooks.js
new file mode 100644
--- /dev/null
+++ b/landing/walletconnect-hooks.js
@@ -0,0 +1,46 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+
+type WalletConnectModalUpdate = {
+  +state: 'open' | 'closed',
+};
+function useMonitorForWalletConnectModal(
+  callback: WalletConnectModalUpdate => mixed,
+) {
+  const newModalAppeared = React.useCallback(
+    mutationList => {
+      for (const mutation of mutationList) {
+        for (const addedNode of mutation.addedNodes) {
+          if (
+            addedNode instanceof HTMLElement &&
+            addedNode.id === 'walletconnect-wrapper'
+          ) {
+            callback({ state: 'open' });
+          }
+        }
+        for (const addedNode of mutation.removedNodes) {
+          if (
+            addedNode instanceof HTMLElement &&
+            addedNode.id === 'walletconnect-wrapper'
+          ) {
+            callback({ state: 'closed' });
+          }
+        }
+      }
+    },
+    [callback],
+  );
+
+  React.useEffect(() => {
+    const observer = new MutationObserver(newModalAppeared);
+    invariant(document.body, 'document.body should be set');
+    observer.observe(document.body, { childList: true });
+    return () => {
+      observer.disconnect();
+    };
+  }, [newModalAppeared]);
+}
+
+export { useMonitorForWalletConnectModal };