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); }, []);