diff --git a/landing/siwe.react.js b/landing/siwe.react.js --- a/landing/siwe.react.js +++ b/landing/siwe.react.js @@ -21,6 +21,8 @@ } from 'wagmi'; import { publicProvider } from 'wagmi/providers/public'; +import type { SIWEWebViewMessage } from 'lib/types/siwe-types'; + import { SIWENonceContext } from './siwe-nonce-context.js'; import css from './siwe.css'; @@ -57,6 +59,10 @@ return message.prepareMessage(); } +function postMessageToNativeWebView(message: SIWEWebViewMessage) { + window.ReactNativeWebView?.postMessage?.(JSON.stringify(message)); +} + async function signInWithEthereum(address: string, signer, nonce: string) { invariant(nonce, 'nonce must be present in signInWithEthereum'); const message = createSiweMessage( @@ -65,8 +71,12 @@ nonce, ); const signature = await signer.signMessage(message); - const messageToPost = JSON.stringify({ address, message, signature }); - window.ReactNativeWebView?.postMessage?.(messageToPost); + postMessageToNativeWebView({ + type: 'siwe_success', + address, + message, + signature, + }); return signature; } 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 @@ -3,3 +3,13 @@ export type SIWENonceResponse = { +nonce: string, }; + +// This is a message that the rendered webpage (landing/siwe.react.js) uses to +// communicate back to the React Native WebView that is rendering it +// (native/account/siwe-panel.react.js) +export type SIWEWebViewMessage = { + +type: 'siwe_success', + +address: string, + +message: string, + +signature: string, +}; 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 @@ -12,6 +12,7 @@ import { registerActionTypes, register } from 'lib/actions/user-actions'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors'; import type { LogInStartingPayload } from 'lib/types/account-types'; +import type { SIWEWebViewMessage } from 'lib/types/siwe-types'; import { useServerCall, useDispatchActionPromise, @@ -83,12 +84,12 @@ ); const handleMessage = React.useCallback( event => { - const { - nativeEvent: { data }, - } = event; - const { address, signature } = JSON.parse(data); - if (address && signature) { - handleSIWE({ address, signature }); + const data: SIWEWebViewMessage = JSON.parse(event.nativeEvent.data); + if (data.type === 'siwe_success') { + const { address, signature } = data; + if (address && signature) { + handleSIWE({ address, signature }); + } } }, [handleSIWE],