diff --git a/landing/siwe.react.js b/landing/siwe.react.js index 3acdca9b6..9d062f58f 100644 --- a/landing/siwe.react.js +++ b/landing/siwe.react.js @@ -1,209 +1,199 @@ // @flow import { useConnectModal, RainbowKitProvider, darkTheme, - useModalState, } from '@rainbow-me/rainbowkit'; import '@rainbow-me/rainbowkit/styles.css'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import invariant from 'invariant'; import _merge from 'lodash/fp/merge.js'; import * as React from 'react'; import { useAccount, useWalletClient, WagmiProvider } from 'wagmi'; import ConnectedWalletInfo from 'lib/components/connected-wallet-info.react.js'; import { type SIWEWebViewMessage } from 'lib/types/siwe-types.js'; import { getSIWEStatementForPublicKey, userTextsForSIWEMessageTypes, createSIWEMessage, } from 'lib/utils/siwe-utils.js'; import { AlchemyENSCacheProvider, getWagmiConfig, } from 'lib/utils/wagmi-utils.js'; import { SIWEContext } from './siwe-context.js'; import css from './siwe.css'; import { useMonitorForWalletConnectModal, type WalletConnectModalUpdate, } from './walletconnect-hooks.js'; function postMessageToNativeWebView(message: SIWEWebViewMessage) { window.ReactNativeWebView?.postMessage?.(JSON.stringify(message)); } const wagmiConfig = getWagmiConfig(['rainbow', 'metamask', 'walletconnect']); type Signer = { +signMessage: ({ +message: string, ... }) => Promise, ... }; async function signInWithEthereum( address: string, signer: Signer, nonce: string, statement: string, ) { invariant(nonce, 'nonce must be present in signInWithEthereum'); const message = createSIWEMessage(address, statement, nonce); const signature = await signer.signMessage({ message }); postMessageToNativeWebView({ type: 'siwe_success', address, message, signature, }); } const queryClient = new QueryClient(); function SIWE(): React.Node { const { address } = useAccount(); const { data: signer } = useWalletClient(); const { siweNonce, siwePrimaryIdentityPublicKey, siweMessageType } = React.useContext(SIWEContext); const onClick = React.useCallback(() => { invariant(siweNonce, 'nonce must be present during SIWE attempt'); invariant(siweMessageType, 'message type must be set during SIWE attempt'); invariant( siwePrimaryIdentityPublicKey, 'primaryIdentityPublicKey must be present during SIWE attempt', ); const statement = getSIWEStatementForPublicKey( siwePrimaryIdentityPublicKey, siweMessageType, ); void signInWithEthereum(address, signer, siweNonce, statement); }, [ address, signer, siweNonce, siwePrimaryIdentityPublicKey, siweMessageType, ]); - const { openConnectModal } = useConnectModal(); + const { openConnectModal, connectModalOpen } = useConnectModal(); const hasNonce = siweNonce !== null && siweNonce !== undefined; React.useEffect(() => { if (hasNonce && openConnectModal) { openConnectModal(); } }, [hasNonce, openConnectModal]); const [wcModalOpen, setWCModalOpen] = React.useState(false); const prevModalOpen = React.useRef(false); - const modalState = useModalState(); - const closeTimeoutRef = React.useRef(); - const { connectModalOpen } = modalState; const modalOpen = connectModalOpen || wcModalOpen; React.useEffect(() => { if (!modalOpen && prevModalOpen.current && !signer) { - closeTimeoutRef.current = setTimeout( - () => postMessageToNativeWebView({ type: 'siwe_closed' }), - 500, - ); - } else if (closeTimeoutRef.current) { - clearTimeout(closeTimeoutRef.current); - closeTimeoutRef.current = undefined; + postMessageToNativeWebView({ type: 'siwe_closed' }); } prevModalOpen.current = modalOpen; }, [modalOpen, signer]); const onWalletConnectModalUpdate = React.useCallback( (update: WalletConnectModalUpdate) => { if (update.state === 'closed') { setWCModalOpen(false); postMessageToNativeWebView({ type: 'walletconnect_modal_update', ...update, }); } else { setWCModalOpen(true); postMessageToNativeWebView({ type: 'walletconnect_modal_update', ...update, }); } }, [], ); useMonitorForWalletConnectModal(onWalletConnectModalUpdate); if (!siweMessageType) { return (

Unable to proceed: message type not found

); } if (!hasNonce) { return (

Unable to proceed: nonce not found.

); } else if (!signer) { return null; } else { const { explanationStatement, buttonStatement, showTermsAgreement } = userTextsForSIWEMessageTypes[siweMessageType]; let termsOfUseAndPolicyInfo = null; if (showTermsAgreement) { termsOfUseAndPolicyInfo = (

By signing up, you agree to our{' '} Terms of Use &{' '} Privacy Policy.

); } return (

Wallet Connected

{explanationStatement}

{termsOfUseAndPolicyInfo}
{buttonStatement}
); } } function SIWEWrapper(): React.Node { const theme = React.useMemo(() => { return _merge(darkTheme())({ radii: { modal: 0, modalMobile: 0, }, colors: { modalBackdrop: '#242529', }, }); }, []); return ( ); } export default SIWEWrapper; diff --git a/patches/@rainbow-me+rainbowkit+2.0.4.patch b/patches/@rainbow-me+rainbowkit+2.0.4.patch index 41545f7af..10cac7876 100644 --- a/patches/@rainbow-me+rainbowkit+2.0.4.patch +++ b/patches/@rainbow-me+rainbowkit+2.0.4.patch @@ -1,24 +1,23 @@ diff --git a/node_modules/@rainbow-me/rainbowkit/dist/index.js b/node_modules/@rainbow-me/rainbowkit/dist/index.js -index 3d856c7..95d5a23 100644 +index 3d856c7..7653c4f 100644 --- a/node_modules/@rainbow-me/rainbowkit/dist/index.js +++ b/node_modules/@rainbow-me/rainbowkit/dist/index.js -@@ -6518,5 +6518,7 @@ export { +@@ -6518,5 +6518,6 @@ export { useAccountModal, useAddRecentTransaction, useChainModal, -+ useModalState, + emojiAvatarForAddress, useConnectModal }; diff --git a/node_modules/@rainbow-me/rainbowkit/dist/wallets/walletConnectors/chunk-62IPH7HD.js b/node_modules/@rainbow-me/rainbowkit/dist/wallets/walletConnectors/chunk-62IPH7HD.js index 892ac7c..008a7c7 100644 --- a/node_modules/@rainbow-me/rainbowkit/dist/wallets/walletConnectors/chunk-62IPH7HD.js +++ b/node_modules/@rainbow-me/rainbowkit/dist/wallets/walletConnectors/chunk-62IPH7HD.js @@ -86,6 +86,7 @@ var coinbaseWallet = ({ ...coinbaseWagmiWallet({ appName, appLogoUrl: appIcon, + enableMobileWalletLink: true, headlessMode: true })(config), ...walletDetails