diff --git a/landing/siwe.react.js b/landing/siwe.react.js index 987421d2d..678cc6506 100644 --- a/landing/siwe.react.js +++ b/landing/siwe.react.js @@ -1,196 +1,199 @@ // @flow import { useConnectModal, RainbowKitProvider, darkTheme, useModalState, connectorsForWallets, } from '@rainbow-me/rainbowkit'; import '@rainbow-me/rainbowkit/styles.css'; import { injectedWallet, rainbowWallet, metaMaskWallet, walletConnectWallet, // eslint-disable-next-line import/extensions } from '@rainbow-me/rainbowkit/wallets'; import invariant from 'invariant'; import _merge from 'lodash/fp/merge.js'; import * as React from 'react'; import { useAccount, useSigner, WagmiConfig } from 'wagmi'; import ConnectedWalletInfo from 'lib/components/connected-wallet-info.react.js'; import type { SIWEWebViewMessage } from 'lib/types/siwe-types.js'; import { getSIWEStatementForPublicKey, siweMessageSigningExplanationStatements, createSIWEMessage, } from 'lib/utils/siwe-utils.js'; import { WagmiENSCacheProvider, configureWagmiChains, createWagmiClient, } from 'lib/utils/wagmi-utils.js'; 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); + +const wallets = [injectedWallet({ chains })]; +const projectId = process.env.COMM_WALLETCONNECT_KEY; +if (projectId) { + wallets.push( + rainbowWallet({ chains, projectId }), + metaMaskWallet({ chains, projectId }), + walletConnectWallet({ chains, projectId }), + ); +} + const connectors = connectorsForWallets([ - { - groupName: 'Recommended', - wallets: [ - injectedWallet({ chains }), - rainbowWallet({ chains, projectId }), - metaMaskWallet({ chains, projectId }), - walletConnectWallet({ chains, projectId }), - ], - }, + { groupName: 'Recommended', wallets }, ]); + const wagmiClient = createWagmiClient({ connectors, provider }); function postMessageToNativeWebView(message: SIWEWebViewMessage) { window.ReactNativeWebView?.postMessage?.(JSON.stringify(message)); } async function signInWithEthereum( address: string, 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, }); } function SIWE(): React.Node { const { address } = useAccount(); const { data: signer } = useSigner(); const { siweNonce, siwePrimaryIdentityPublicKey } = React.useContext(SIWEContext); const onClick = React.useCallback(() => { invariant(siweNonce, 'nonce must be present during SIWE attempt'); invariant( siwePrimaryIdentityPublicKey, 'primaryIdentityPublicKey must be present during SIWE attempt', ); const statement = getSIWEStatementForPublicKey( siwePrimaryIdentityPublicKey, ); signInWithEthereum(address, signer, siweNonce, statement); }, [address, signer, siweNonce, siwePrimaryIdentityPublicKey]); const { openConnectModal } = useConnectModal(); const hasNonce = siweNonce !== null && siweNonce !== undefined; React.useEffect(() => { if (hasNonce && openConnectModal) { openConnectModal(); } }, [hasNonce, openConnectModal]); const [wcModalOpen, setWCModalOpen] = React.useState(false); const prevConnectModalOpen = React.useRef(false); const modalState = useModalState(); const closeTimeoutRef = React.useRef(); const { connectModalOpen } = modalState; React.useEffect(() => { if ( !connectModalOpen && !wcModalOpen && prevConnectModalOpen.current && !signer ) { closeTimeoutRef.current = setTimeout( () => postMessageToNativeWebView({ type: 'siwe_closed' }), 250, ); } else if (closeTimeoutRef.current) { clearTimeout(closeTimeoutRef.current); closeTimeoutRef.current = undefined; } prevConnectModalOpen.current = connectModalOpen; }, [connectModalOpen, wcModalOpen, signer]); const onWalletConnectModalUpdate = React.useCallback(update => { if (update.state === 'closed') { setWCModalOpen(false); postMessageToNativeWebView({ type: 'walletconnect_modal_update', ...update, }); } else { setWCModalOpen(true); postMessageToNativeWebView({ type: 'walletconnect_modal_update', ...update, }); } }, []); useMonitorForWalletConnectModal(onWalletConnectModalUpdate); if (!hasNonce) { return (

Unable to proceed: nonce not found.

); } else if (!signer) { return null; } else { return (

Wallet Connected

{siweMessageSigningExplanationStatements}

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

Sign in using this wallet
); } } 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/lib/utils/wagmi-utils.js b/lib/utils/wagmi-utils.js index f327006a7..bf6788dac 100644 --- a/lib/utils/wagmi-utils.js +++ b/lib/utils/wagmi-utils.js @@ -1,82 +1,85 @@ // @flow import { connectorsForWallets } from '@rainbow-me/rainbowkit'; import { injectedWallet, metaMaskWallet, rainbowWallet, walletConnectWallet, // eslint-disable-next-line import/extensions } from '@rainbow-me/rainbowkit/wallets'; import * as React from 'react'; import { configureChains, createClient, useProvider } from 'wagmi'; // eslint-disable-next-line import/extensions import { mainnet } from 'wagmi/chains'; // eslint-disable-next-line import/extensions import { alchemyProvider } from 'wagmi/providers/alchemy'; // eslint-disable-next-line import/extensions import { publicProvider } from 'wagmi/providers/public'; import { ENSCacheProvider } from '../components/ens-cache-provider.react.js'; // details can be found at https://wagmi.sh/core/providers/configuring-chains type WagmiChainConfiguration = { +chains: mixed, +provider: mixed, }; function configureWagmiChains(alchemyKey: ?string): WagmiChainConfiguration { const availableProviders = alchemyKey ? [alchemyProvider({ apiKey: alchemyKey })] : [publicProvider()]; const { chains, provider } = configureChains([mainnet], availableProviders); return { chains, provider }; } type WagmiClientInput = { +provider: mixed, +connectors?: mixed, }; function createWagmiClient(input: WagmiClientInput): mixed { const { provider, connectors } = input; return createClient({ autoConnect: true, connectors, provider, }); } -const projectId = process.env.COMM_WALLETCONNECT_KEY; const { chains, provider } = configureWagmiChains(process.env.COMM_ALCHEMY_KEY); + +const wallets = [injectedWallet({ chains })]; +const projectId = process.env.COMM_WALLETCONNECT_KEY; +if (projectId) { + wallets.push( + rainbowWallet({ chains, projectId }), + metaMaskWallet({ chains, projectId }), + walletConnectWallet({ chains, projectId }), + ); +} + const connectors = connectorsForWallets([ - { - groupName: 'Recommended', - wallets: [ - injectedWallet({ chains }), - rainbowWallet({ chains, projectId }), - metaMaskWallet({ chains, projectId }), - walletConnectWallet({ chains, projectId }), - ], - }, + { groupName: 'Recommended', wallets }, ]); + const wagmiClient: mixed = createWagmiClient({ connectors, provider }); const wagmiChains: mixed = chains; type Props = { +children: React.Node, }; function WagmiENSCacheProvider(props: Props): React.Node { const { children } = props; const wagmiProvider = useProvider(); return ( {children} ); } export { configureWagmiChains, createWagmiClient, wagmiClient, wagmiChains, WagmiENSCacheProvider, };