diff --git a/keyserver/images/ethereum_icon.svg b/keyserver/images/ethereum_icon.svg deleted file mode 100644 index 8a2f20e00..000000000 --- a/keyserver/images/ethereum_icon.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/landing/siwe.css b/landing/siwe.css index 7d70b3e9f..1752bd8d3 100644 --- a/landing/siwe.css +++ b/landing/siwe.css @@ -1,49 +1,65 @@ html, body { background: #242529 !important; } -.button { +.wrapper { display: flex; - flex-direction: row; + flex-wrap: wrap; + flex-direction: column; justify-content: center; align-items: center; align-content: center; + padding-top: 20px; + padding-bottom: 50px; + color: white; + font-family: sans-serif; + padding: 20px; +} +.walletDisplay { + display: flex; + flex-direction: column; + align-items: center; + padding: 60px; +} +.walletDisplayText { + font-size: 24px; + padding: 5px; +} +.wrapper > p { + text-align: center; + padding: 5px; + font-size: 15px; +} +.button { + margin-top: 20px; background: #7e57c2; - box-shadow: -12px 20px 50px rgba(126, 87, 194, 0.5); - border-color: white; - border-width: 2px; - border-radius: 15px; - text-transform: uppercase; + border-radius: 4px; + text-align: center; padding: 10px; - width: 241px; -} -@media screen and (max-width: 400px) { - .button { - width: 140px; - } + 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 826e62d1f..e22d6de63 100644 --- a/landing/siwe.react.js +++ b/landing/siwe.react.js @@ -1,184 +1,196 @@ // @flow import { useConnectModal, getDefaultWallets, RainbowKitProvider, darkTheme, useModalState, + ConnectButton, } from '@rainbow-me/rainbowkit'; import invariant from 'invariant'; import _merge from 'lodash/fp/merge'; import * as React from 'react'; import { SiweMessage } from 'siwe'; import '@rainbow-me/rainbowkit/dist/index.css'; import { useAccount, useSigner, chain, configureChains, createClient, WagmiConfig, } from 'wagmi'; import { publicProvider } from 'wagmi/providers/public'; import type { SIWEWebViewMessage } from 'lib/types/siwe-types'; import { siweStatement } from 'lib/utils/siwe-utils.js'; import { SIWENonceContext } from './siwe-nonce-context.js'; import css from './siwe.css'; // details can be found https://wagmi.sh/docs/providers/configuring-chains const { chains, provider } = configureChains( [chain.mainnet], [publicProvider()], ); const { connectors } = getDefaultWallets({ appName: 'comm', chains, }); const wagmiClient = createClient({ autoConnect: true, connectors, provider, }); function createSiweMessage(address: string, statement: string, nonce: string) { invariant(nonce, 'nonce must be present in createSiweMessage'); const domain = window.location.host; const origin = window.location.origin; const message = new SiweMessage({ domain, address, statement, uri: origin, version: '1', chainId: '1', nonce, }); 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(address, siweStatement, 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 } = React.useContext(SIWENonceContext); const onClick = React.useCallback(() => { invariant(siweNonce, 'nonce must be present during SIWE attempt'); signInWithEthereum(address, signer, siweNonce); }, [address, signer, siweNonce]); 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 { connectModalOpen } = modalState; React.useEffect(() => { if (!connectModalOpen && prevConnectModalOpen.current && !signer) { postMessageToNativeWebView({ type: 'siwe_closed' }); } 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 ( -
- - sign in +
+
+ Wallet Connected: + +
+

+ To complete the login process, you'll now be asked to sign a + message using your wallet. +

+

+ This signature will attest that your Ethereum identity is represented + by your new Comm identity. +

+
+ Sign in +
); } } function SIWEWrapper(): React.Node { const theme = React.useMemo(() => { return _merge(darkTheme())({ radii: { modal: 0, modalMobile: 0, }, colors: { modalBackdrop: '#242529', }, }); }, []); return ( ); } -const ethIconStyle = { height: 25, paddingRight: 10 }; - export default SIWEWrapper;