diff --git a/keyserver/images/ethereum_icon.svg b/keyserver/images/ethereum_icon.svg
new file mode 100644
index 000000000..8a2f20e00
--- /dev/null
+++ b/keyserver/images/ethereum_icon.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/landing/landing.react.js b/landing/landing.react.js
index a13331038..3541347b8 100644
--- a/landing/landing.react.js
+++ b/landing/landing.react.js
@@ -1,65 +1,69 @@
// @flow
import * as React from 'react';
import { useRouteMatch } from 'react-router-dom';
import AppLanding from './app-landing.react';
import Footer from './footer.react';
import Header from './header.react';
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';
import useScrollToTopOnNavigate from './use-scroll-to-top-on-navigate.react';
import './reset.css';
import './global.css';
function Landing(): React.Node {
useScrollToTopOnNavigate();
const onPrivacy = useRouteMatch({ path: '/privacy' });
const onTerms = useRouteMatch({ path: '/terms' });
const onSupport = useRouteMatch({ path: '/support' });
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) {
return ;
} else if (onTerms) {
return ;
} else if (onSupport) {
return ;
} else if (onKeyservers) {
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 (
<>
{header}
{activePage}
{footer}
);
}
export default Landing;
diff --git a/landing/package.json b/landing/package.json
index 44689ede0..6dda53016 100644
--- a/landing/package.json
+++ b/landing/package.json
@@ -1,61 +1,65 @@
{
"name": "landing",
"version": "0.0.1",
"type": "module",
"private": true,
"license": "BSD-3-Clause",
"scripts": {
"clean": "rm -rf dist/ && rm -rf node_modules/",
"dev": "yarn concurrently --names=\"NODESSR,BROWSER\" -c \"bgBlue.bold,bgMagenta.bold\" \"yarn webpack --config webpack.config.cjs --config-name=server --watch\" \"yarn webpack-dev-server --hot --config webpack.config.cjs --config-name=browser\"",
"prod": "yarn webpack --config webpack.config.cjs --env prod --progress"
},
"devDependencies": {
"@babel/core": "^7.13.14",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
"@babel/plugin-proposal-object-rest-spread": "^7.13.8",
"@babel/plugin-proposal-optional-chaining": "^7.13.12",
"@babel/plugin-transform-react-constant-elements": "^7.13.13",
"@babel/plugin-transform-runtime": "^7.13.10",
"@babel/preset-env": "^7.13.12",
"@babel/preset-flow": "^7.13.13",
"@babel/preset-react": "^7.13.13",
"@hot-loader/react-dom": "16.13.0",
"assets-webpack-plugin": "^3.9.7",
"babel-loader": "^8.1.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"clean-webpack-plugin": "^3.0.0",
"concurrently": "^5.3.0",
"css-loader": "^4.3.0",
"flow-bin": "^0.158.0",
"flow-typed": "^3.2.1",
"mini-css-extract-plugin": "^0.11.2",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"style-loader": "^1.2.1",
"terser-webpack-plugin": "^2.1.2",
"url-loader": "^2.2.0",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"@babel/runtime": "^7.13.10",
"@fortawesome/fontawesome-svg-core": "1.2.25",
"@fortawesome/free-brands-svg-icons": "5.15.4",
"@fortawesome/free-regular-svg-icons": "5.11.2",
"@fortawesome/free-solid-svg-icons": "5.11.2",
"@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",
"react": "17.0.2",
"react-dom": "17.0.2",
"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
index 000000000..4941af8c4
--- /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
index 000000000..93f9d00ba
--- /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}
+