diff --git a/keyserver/images/ethereum_icon.svg b/keyserver/images/ethereum_icon.svg
new file mode 100644
--- /dev/null
+++ b/keyserver/images/ethereum_icon.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/landing/landing.react.js b/landing/landing.react.js
--- a/landing/landing.react.js
+++ b/landing/landing.react.js
@@ -9,6 +9,7 @@
import Keyservers from './keyservers.react';
import Privacy from './privacy.react';
import QR from './qr.react';
+import SIWE from './siwe.react';
import Support from './support.react';
import Team from './team.react';
import Terms from './terms.react';
@@ -24,6 +25,7 @@
const onKeyservers = useRouteMatch({ path: '/keyservers' });
const onQR = useRouteMatch({ path: '/qr' });
const onTeam = useRouteMatch({ path: '/team' });
+ const onSIWE = useRouteMatch({ path: '/siwe' });
const activePage = React.useMemo(() => {
if (onPrivacy) {
@@ -36,21 +38,23 @@
return ;
} else if (onQR) {
return ;
+ } else if (onSIWE) {
+ return ;
} else if (onTeam) {
return ;
} else {
return ;
}
- }, [onKeyservers, onPrivacy, onSupport, onTerms, onTeam, onQR]);
+ }, [onKeyservers, onPrivacy, onSupport, onTerms, onTeam, onQR, onSIWE]);
- let header;
- if (!onQR) {
- header = ;
+ let header = ;
+ if (onQR || onSIWE) {
+ header = null;
}
- let footer;
- if (!onQR) {
- footer = ;
+ let footer = ;
+ if (onQR || onSIWE) {
+ footer = null;
}
return (
diff --git a/landing/package.json b/landing/package.json
--- a/landing/package.json
+++ b/landing/package.json
@@ -47,7 +47,9 @@
"@fortawesome/react-fontawesome": "0.1.5",
"@lottiefiles/lottie-interactivity": "^0.1.4",
"@lottiefiles/lottie-player": "^1.0.3",
+ "@rainbow-me/rainbowkit": "^0.5.0",
"core-js": "^3.6.5",
+ "ethers": "^5.7.0",
"invariant": "^2.2.4",
"isomorphic-fetch": "^3.0.0",
"lib": "0.0.1",
@@ -56,6 +58,8 @@
"react-hot-loader": "^4.12.14",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
- "react-text-loop": "^2.3.0"
+ "react-text-loop": "^2.3.0",
+ "siwe": "^1.1.6",
+ "wagmi": "^0.6.0"
}
}
diff --git a/landing/siwe.css b/landing/siwe.css
new file mode 100644
--- /dev/null
+++ b/landing/siwe.css
@@ -0,0 +1,41 @@
+.wrapper {
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+ padding-top: 20px;
+ padding-bottom: 50px;
+}
+
+.spacer {
+ height: 10px;
+ width: 10px;
+}
+
+.button {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+ 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;
+ padding: 10px;
+ width: 241px;
+}
+@media screen and (max-width: 400px) {
+ .button {
+ width: 140px;
+ }
+}
+
+.h1 {
+ text-align: center;
+ margin-bottom: 20px;
+}
diff --git a/landing/siwe.react.js b/landing/siwe.react.js
new file mode 100644
--- /dev/null
+++ b/landing/siwe.react.js
@@ -0,0 +1,97 @@
+// @flow
+
+import {
+ ConnectButton,
+ getDefaultWallets,
+ RainbowKitProvider,
+} from '@rainbow-me/rainbowkit';
+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 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, statement) {
+ const domain = window.location.host;
+ const origin = window.location.origin;
+ const message = new SiweMessage({
+ domain,
+ address,
+ statement,
+ uri: origin,
+ version: '1',
+ chainId: '1',
+ });
+ return message.prepareMessage();
+}
+
+async function signInWithEthereum(address, signer) {
+ const message = createSiweMessage(address, 'Sign in to Comm with Ethereum');
+ const signedMessage = await signer.signMessage(message);
+ const messageToPost = JSON.stringify({ address, signer });
+ window.ReactNativeWebView?.postMessage?.(messageToPost);
+ return signedMessage;
+}
+
+function SIWE(): React.Node {
+ const { data } = useAccount();
+ const { address } = data || {};
+ const { data: signer } = useSigner();
+ const onClick = React.useCallback(() => signInWithEthereum(address, signer), [
+ address,
+ signer,
+ ]);
+ const SignInButton = !signer ? null : (
+
+
+ sign in
+
+
SIWE
+
+
+ {SignInButton}
+