diff --git a/landing/siwe.css b/landing/siwe.css index 22292f9ee..a89fcda69 100644 --- a/landing/siwe.css +++ b/landing/siwe.css @@ -1,68 +1,79 @@ html, body { background: #242529 !important; } .wrapper { display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; align-content: center; color: white; font-family: sans-serif; padding: 20px; } div.connectedWalletInfo { width: 100%; display: flex; flex-direction: row; } div.connectedWalletInfo > div { width: 100%; } .walletDisplayText { - font-size: 24px; - padding: 5px; + display: flex; + width: 100%; + padding-bottom: 6px; } + +.walletDisplayText p { + font-size: 16px; + font-weight: bold; +} + .wrapper > p { - text-align: center; - padding: 5px; + padding-top: 16px; font-size: 15px; } + +.wrapper a { + color: #2a5db0; +} + .button { margin-top: 20px; - background: #7e57c2; + background: #6a20e3; border-radius: 4px; text-align: center; padding: 10px; width: 100%; } /* Classes from node_modules/@rainbow-me/rainbowkit/dist/components/index.css */ body > div > :global(div.iekbcc0) { word-break: initial; } [data-rk] :global(._9pm4ki5) { animation: initial !important; -webkit-animation: initial !important; } body > div > :global(div.iekbcc0) > div { bottom: initial !important; } body > div > :global(div.iekbcc0) > div > div > div > div { border: 0 !important; } :global(div#walletconnect-wrapper) { word-break: initial; color: initial; } :global(div.walletconnect-modal__footer) { overflow: hidden; justify-content: flex-start; } diff --git a/landing/siwe.react.js b/landing/siwe.react.js index eb4e57d5f..0bc2ed01c 100644 --- a/landing/siwe.react.js +++ b/landing/siwe.react.js @@ -1,201 +1,203 @@ // @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, siweStatementWithoutPublicKey, 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'; const { chains, provider } = configureWagmiChains(process.env.COMM_ALCHEMY_KEY); const connectors = connectorsForWallets([ { groupName: 'Recommended', wallets: [ injectedWallet({ chains }), rainbowWallet({ chains }), metaMaskWallet({ chains }), walletConnectWallet({ chains }), ], }, ]); 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'); const statement = siwePrimaryIdentityPublicKey ? getSIWEStatementForPublicKey(siwePrimaryIdentityPublicKey) : siweStatementWithoutPublicKey; 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 prevConnectModalOpen = React.useRef(false); const modalState = useModalState(); const closeTimeoutRef = React.useRef(); const { connectModalOpen } = modalState; React.useEffect(() => { if (!connectModalOpen && prevConnectModalOpen.current && !signer) { closeTimeoutRef.current = setTimeout( () => postMessageToNativeWebView({ type: 'siwe_closed' }), 50, ); } else if (closeTimeoutRef.current) { clearTimeout(closeTimeoutRef.current); closeTimeoutRef.current = undefined; } prevConnectModalOpen.current = connectModalOpen; }, [connectModalOpen, signer]); 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 (

Unable to proceed: nonce not found.

); } else if (!signer) { return null; } else { return (
- Wallet Connected: + +

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;