diff --git a/landing/siwe.react.js b/landing/siwe.react.js
--- a/landing/siwe.react.js
+++ b/landing/siwe.react.js
@@ -108,6 +108,42 @@
prevConnectModalOpen.current = connectModalOpen;
}, [connectModalOpen]);
+ 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]);
+
if (!hasNonce) {
return (
diff --git a/lib/types/siwe-types.js b/lib/types/siwe-types.js
--- a/lib/types/siwe-types.js
+++ b/lib/types/siwe-types.js
@@ -16,4 +16,8 @@
}
| {
+type: 'siwe_closed',
+ }
+ | {
+ +type: 'walletconnect_modal_update',
+ +state: 'open' | 'closed',
};
diff --git a/native/account/siwe-panel.react.js b/native/account/siwe-panel.react.js
--- a/native/account/siwe-panel.react.js
+++ b/native/account/siwe-panel.react.js
@@ -3,6 +3,7 @@
import BottomSheet from '@gorhom/bottom-sheet';
import * as React from 'react';
import { ActivityIndicator, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
import WebView from 'react-native-webview';
import {
@@ -64,6 +65,30 @@
})();
}, [dispatchActionPromise, getSIWENonceCall]);
+ const [isLoading, setLoading] = React.useState(true);
+ const [isWalletConnectModalOpen, setWalletConnectModalOpen] = React.useState(
+ false,
+ );
+ const insets = useSafeAreaInsets();
+ const bottomInset = insets.bottom;
+ const snapPoints = React.useMemo(() => {
+ if (isLoading) {
+ return [1];
+ } else if (isWalletConnectModalOpen) {
+ return [bottomInset + 600];
+ } else {
+ return [bottomInset + 435, bottomInset + 600];
+ }
+ }, [isLoading, isWalletConnectModalOpen, bottomInset]);
+
+ const bottomSheetRef = React.useRef();
+ const snapToIndex = bottomSheetRef.current?.snapToIndex;
+ React.useEffect(() => {
+ // When the snapPoints change, always reset to the first one
+ // Without this, when we close the WalletConnect modal we don't resize
+ snapToIndex?.(0);
+ }, [snapToIndex, snapPoints]);
+
const handleSIWE = React.useCallback(
({ address, signature }) => {
// this is all mocked from register-panel
@@ -82,7 +107,6 @@
},
[logInExtraInfo, dispatchActionPromise, registerAction],
);
- const bottomSheetRef = React.useRef();
const closeBottomSheet = bottomSheetRef.current?.close;
const { onClose } = props;
const handleMessage = React.useCallback(
@@ -96,6 +120,8 @@
} else if (data.type === 'siwe_closed') {
onClose();
closeBottomSheet?.();
+ } else if (data.type === 'walletconnect_modal_update') {
+ setWalletConnectModalOpen(data.state === 'open');
}
},
[handleSIWE, onClose, closeBottomSheet],
@@ -111,16 +137,6 @@
[nonce],
);
- const [isLoading, setLoading] = React.useState(true);
-
- const snapPoints = React.useMemo(() => {
- if (isLoading) {
- return [1];
- } else {
- return [700];
- }
- }, [isLoading]);
-
const onWebViewLoaded = React.useCallback(() => {
setLoading(false);
}, []);