Merge pull request #180 from application-research/feature-connect-wallet

Feature connect wallet

Author: LucRoy

common/utilities.ts

@@ -146,6 +146,32 @@ export const getViewerFromToken = async (token) => {
   }
 };
 
+export const getAuthAddress = async (headers) => {
+  try {
+    const token = Cookies.get(headers, C.auth);
+    const url = `${C.api.authSvcHost}/user/auth-address`;
+    const response = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    const json = await response.json();
+
+    if (!json) {
+      return null;
+    }
+
+    if (json.error) {
+      return null;
+    }
+
+    return json;
+  } catch (e) {
+    return null;
+  }
+}
+
 export const getViewerFromHeader = async (headers) => {
   try {
     const token = Cookies.get(headers, C.auth);

components/Button.module.scss

@@ -31,3 +31,8 @@
   cursor: wait;
   padding: 4px 48px 4px 48px;
 }
+
+.disabledButton {
+  background-color: var(--main-button-background-secondary);
+  cursor: not-allowed;
+}

components/Button.tsx

@@ -6,6 +6,12 @@ import styles from '@components/Button.module.scss';
 import LoaderSpinner from '@components/LoaderSpinner';
 
 const Button = (props: any) => {
+  if (props.disabled) {
+    return <button style={props.style}
+                   className={U.classNames(styles.button, styles.disabledButton)}
+                   children={props.children}
+                   disabled={props.disabled}/>;
+  }
   if (props.loading) {
     return (
       <button className={U.classNames(styles.button, styles.loading)} style={props.style}>

components/Wallet.tsx

@@ -1,11 +1,9 @@
 import style from '@components/Wallet.module.scss';
 
 import * as React from 'react';
-import * as R from '@common/requests';
 import * as C from '@common/constants';
 
 import Web3 from 'web3';
-import Cookies from 'js-cookie';
 import Button from '@components/Button';
 import Jazzicon from "@metamask/jazzicon";
 import styled from "@emotion/styled";
@@ -24,12 +22,6 @@ import {
   useId
 } from "@floating-ui/react";
 
-function logout(props) {
-  const token = Cookies.get(C.auth);
-  const response = R.del(`/user/api-keys/${token}`, props.api);
-  Cookies.remove(C.auth);
-  window.location.href = '/';
-}
 function Wallet(props) {
   const [open, setOpen] = React.useState(false);
   const { x, y, refs, strategy, context } = useFloating({
@@ -54,7 +46,7 @@ function Wallet(props) {
   ]);
 
   const headingId = useId();
-  const [state, setState] = React.useState({ account: null, fil: null, price: null, balance: null, loading: true});
+  const [state, setState] = React.useState({ account: null, fil: null, price: null, balance: null, loading: true });
 
   let web3: any;
 
@@ -64,14 +56,6 @@ function Wallet(props) {
     }
     web3 = new Web3(window.ethereum);
     const run = async () => {
-      window.ethereum.on('accountsChanged', function (accounts) {
-        logout(props)
-      })
-
-      window.ethereum.on('chainChanged', function (networkId) {
-        logout(props)
-      })
-
       // Check if User is already connected by retrieving the accounts
       const accounts = await web3.eth.getAccounts()
       if (accounts) {
@@ -174,7 +158,7 @@ function Wallet(props) {
         </FloatingFocusManager>
       )}
     </div>
-  ) : null;
+  ) : null
 }
 
 export default Wallet;

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "dev": "NEXT_PUBLIC_ESTUARY_API=${ESTUARY_API:-http://localhost:3004} next dev -p 4444",
     "dev-docker": "NEXT_PUBLIC_ESTUARY_API=${ESTUARY_API:-http://localhost:3004} next dev -p 4444",
-    "dev-production": "NEXT_PUBLIC_ESTUARY_API=${ESTUARY_API:-https://api.estuary.tech} NEXT_PUBLIC_ESTUARY_METRICS_API=https://metrics-api.estuary.tech next dev -p 4444",
+    "dev-production": "NEXT_PUBLIC_ESTUARY_API=${ESTUARY_API:-https://api.estuary.tech} NEXT_PUBLIC_ESTUARY_METRICS_API=https://metrics-api.estuary.tech NEXT_PUBLIC_ESTUARY_AUTH_API=https://auth-svc.onrender.com next dev -p 4444",
     "build": "next build",
     "check-types": "tsc --noemit",
     "start": "NODE_ENV=production next start",

pages/settings.tsx

@@ -1,5 +1,6 @@
 import styles from '@pages/app.module.scss';
 
+import * as C from '@common/constants';
 import * as Crypto from '@common/crypto';
 import * as R from '@common/requests';
 import * as U from '@common/utilities';
@@ -15,9 +16,11 @@ import Page from '@components/Page';
 import SingleColumnLayout from '@components/SingleColumnLayout';
 
 import { H2, H3, H4, P } from '@components/Typography';
+import Modal from '@components/Modal';
 
 export async function getServerSideProps(context) {
   const viewer = await U.getViewerFromHeader(context.req.headers);
+  const wallet = await U.getAuthAddress(context.req.headers);
   const host = context.req.headers.host;
   const protocol = host.split(':')[0] === 'localhost' ? 'http' : 'https';
 
@@ -30,6 +33,8 @@ export async function getServerSideProps(context) {
     };
   }
 
+  viewer.wallet = wallet;
+
   return {
     props: { host, protocol, viewer, api: process.env.NEXT_PUBLIC_ESTUARY_API, hostname: `https://${context.req.headers.host}` },
   };
@@ -80,12 +85,83 @@ const onSubmit = async (event, state, setState, host) => {
   return setState({ ...state, new: '', confirm: '', loading: false });
 };
 
+const connectWallet = async (e, metamask, setMetamask) =>  {
+  setMetamask({ ...metamask, loading: true});
+  if (!window.ethereum) {
+    alert("You must have MetaMask installed!");
+    return;
+  }
+
+  const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });
+
+  if (window.ethereum.networkVersion !== C.network.chainId) {
+    try {
+      await window.ethereum.request({
+        method: 'wallet_switchEthereumChain',
+        params: [{ chainId: C.network.chainId }]
+      });
+    } catch (err) {
+      // This error code indicates that the chain has not been added to MetaMask
+      if (err.code === 4902) {
+        await window.ethereum.request({
+          method: 'wallet_addEthereumChain',
+          params: [ C.network ]
+        });
+      }
+    }
+  }
+
+  return addAuthAddress(accounts[0], metamask, setMetamask)
+}
+
+async function addAuthAddress(address, metamask, setMetamask) {
+  setMetamask({ ...metamask, loading: true});
+  let response;
+  try {
+    response = await R.post('/user/auth-address', { address }, C.api.authSvcHost);
+    await U.delay(1000);
+
+    if (!response.success) {
+      alert(response.details);
+      return setMetamask({ ...metamask, loading: false});
+    }
+  } catch (e) {
+    console.log(e);
+    alert('Something went wrong');
+    return setMetamask({ ...metamask, loading: false});
+  }
+
+  return setMetamask({ ...metamask, address, loading: false});
+}
+
+async function removeAuthAddress(metamask, setMetamask) {
+  setMetamask({ ...metamask, loading: true});
+  let response;
+  try {
+    response = await R.del('/user/auth-address', { address: metamask.address }, C.api.authSvcHost);
+    await U.delay(1000);
+
+    if (!response.success) {
+      alert(response.details);
+      return setMetamask({ ...metamask, loading: false});
+    }
+  } catch (e) {
+    console.log(e);
+    alert('Something went wrong');
+    return setMetamask({ ...metamask, loading: false});
+  }
+
+  return setMetamask({ ...metamask, address: "", loading: false});
+}
+
 function SettingsPage(props: any) {
   const { viewer } = props;
   const [fissionUser, setFissionUser] = React.useState(null);
   const [state, setState] = React.useState({ loading: false, old: '', new: '', confirm: '' });
   const [address, setAddress] = React.useState('');
   const [balance, setBalance] = React.useState(0);
+  const [metamask, setMetamask] = React.useState({ address: viewer.wallet ? viewer.wallet.address : null, loading: false });
+  const [showUnlinkAddressModal, setShowUnlinkAddressModal] = React.useState(false);
 
   const sidebarElement = <AuthenticatedSidebar active="SETTINGS" viewer={viewer} />;
 
@@ -141,6 +217,45 @@ function SettingsPage(props: any) {
             </Button>
           </div>
 
+          <H3 style={{ marginTop: 64 }}>Link Metamask</H3>
+          <P style={{ marginTop: 16 }}>Enable authenticating with your Metamask account.</P>
+
+          { metamask.address ? (
+            <div>
+              <Input style={{ marginTop: 8 }} readOnly value={metamask.address} />
+              <Button style={{ marginTop: 14, width: 175}}
+                      loading={metamask.loading}
+                      disabled={metamask.address == viewer.username}
+                      onClick={() => setShowUnlinkAddressModal(true) }>Unlink Account</Button>
+              {showUnlinkAddressModal && (
+                <Modal
+                  title="Unlink Account"
+                  onClose={() => {
+                    setShowUnlinkAddressModal(false);
+                  }}
+                  show={showUnlinkAddressModal}
+                >
+                  <div className={styles.group} style={{ paddingTop: '16px' }}>
+                    <P style={{ maxWidth: '620px' }}>
+                      By unlinking your metamask account, you will no longer be able to log into your account using this authentication method. Are you sure you want to unlink?
+                    </P>
+                    <H4 style={{ marginTop: '16px', width: '488px', display: 'inline-block' }}></H4>
+                    <Button style={{ marginTop: 14, width: 175}}
+                            loading={metamask.loading}
+                            disabled={metamask.address == viewer.username}
+                            onClick={async () => {
+                              setShowUnlinkAddressModal(false);
+                              await removeAuthAddress(metamask, setMetamask)
+                            }}>Unlink Account</Button>
+                  </div>
+                </Modal>
+              )}
+              </div>
+            ) : (
+              <Button style={{ marginTop: 14, width: 175 }}
+                      loading={metamask.loading}
+                      onClick={(e) => connectWallet(e, metamask, setMetamask)}>Connect Wallet</Button>
+          )}
           <H3 style={{ marginTop: 64 }}>Default settings (read only)</H3>
           <P style={{ marginTop: 16 }}>Estuary is configured to default settings for deals. You can not change these values, yet.</P>
 

pages/sign-in.tsx

@@ -71,11 +71,12 @@ async function handleSignInWithMetaMask(state: any, host) {
     },
   });
 
+  const respJson = await response.json();
+
   if (response.status !== 200) {
-    return { error: 'Failed to Generate Nonce Message' };
+    return { error: respJson.details };
   }
 
-  const respJson = await response.json();
   if (respJson.error) {
     return respJson;
   }

pages/sign-up.tsx

@@ -76,7 +76,11 @@ async function handleRegisterWithMetaMask(state: any, host) {
   });
 
   if (userCreationResp.status !== 200) {
-    return { error: 'Failed to Create User' };
+    const userCreationRespJson = await userCreationResp.json();
+    if (!userCreationRespJson.details) {
+      return { error: 'Our server failed to register your account. Please contact us.' };
+    }
+    return { error: userCreationRespJson.details };
   }
 
   let from = accounts[0];
@@ -90,11 +94,11 @@ async function handleRegisterWithMetaMask(state: any, host) {
     },
   });
 
+  const respJson = await response.json();
   if (response.status !== 200) {
-    return { error: 'Failed to Generate Nonce Message' };
+    return { error: respJson.details };
   }
 
-  const respJson = await response.json();
   if (respJson.error) {
     return respJson;
   }