MetaMask + Discord integration - with Weba-Wallet

constants.js

@@ -43,6 +43,8 @@ export const aiHost = `https://ai.webaverse.com`;
 export const web3MainnetSidechainEndpoint = 'https://mainnetsidechain.exokit.org';
 export const web3TestnetSidechainEndpoint = 'https://testnetsidechain.exokit.org';
 export const worldUrl = 'worlds.webaverse.com';
+export const discordClientId = '684141574808272937';
+export const walletHost = 'https://webaverse.github.io/weba-wallet';
 
 export const worldMapName = 'world';
 export const actionsMapName = 'actions';

src/Header.jsx

@@ -15,7 +15,7 @@ import cameraManager from '../camera-manager.js'
 import metaversefile from '../metaversefile-api.js'
 import ioManager from '../io-manager.js'
 import {parseQuery} from '../util.js'
-import * as ceramicApi from '../ceramic.js';
+import User from './User';
 // import * as ceramicAdmin from '../ceramic-admin.js';
 import sceneNames from '../scenes/scenes.json';
 
@@ -190,57 +190,6 @@ const Location = ({sceneName, setSceneName, roomName, setRoomName, open, setOpen
     </div>
   );
 };
-const User = ({address, setAddress, open, setOpen, toggleOpen}) => {
-  const userOpen = open === 'user';
-
-  const [loggingIn, setLoggingIn] = useState(false);
-
-  /* (async () => {
-    const {createSchema} = await ceramicAdmin.waitForLoad();
-    const schema = await createSchema();
-    console.log('create', schema);
-  })(); */
-
-  /* const login = async () => {
-    if (typeof window.ethereum !== 'undefined') {
-      const addresses = await window.ethereum.request({
-        method: 'eth_requestAccounts',
-      });
-      const [address] = addresses;
-      // console.log('address', {address});
-      setAddress(address);
-    } else {
-      console.warn('no ethereum');
-    }
-  }; */
-
-  return (
-    <div className={classnames(styles.user, loggingIn ? styles.loggingIn : null)} onClick={async e => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (address) {
-        toggleOpen('user');
-      } else {
-        if (!loggingIn) {
-          setLoggingIn(true);
-          try {
-            const {address, profile} = await ceramicApi.login();
-            // console.log('login', {address, profile});
-            setAddress(address);
-          } catch(err) {
-            console.warn(err);
-          } finally {
-            setLoggingIn(false);
-          }
-        }
-      }
-    }}>
-      <img src="images/soul.png" className={styles.icon} />
-      <div className={styles.name}>{loggingIn ? 'Logging in... ' : (address || 'Log in')}</div>
-    </div>
-  );
-};
 
 const Tab = ({className, type, left, right, top, bottom, disabled, label, panels, before, after, open, toggleOpen, onclick, panelsRef}) => {
   if (!onclick) {

src/Header.module.css

@@ -1,3 +1,44 @@
+.loginDiv {
+  width: 100%;
+  margin: 10px 0;
+  text-align: -webkit-center;
+}
+
+.loginBtnText {
+  display: inline-block;
+  transform: skewX(20deg);
+}
+
+.loginBtnImg {
+  vertical-align: middle;
+  margin: 0 10px;
+}
+
+.loginBtn {
+  transform: skewX(-20deg);
+  background: rgb(0, 168, 252);
+  color: rgb(0, 0, 0);
+  padding: 0.5em;
+  width: 10em;
+  text-align: left;
+  cursor: pointer;
+}
+
+.logoutBtn {
+  position: absolute;
+  right: 0;
+  background: black;
+  color: white;
+  padding: 6px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.logoutBtn:hover {
+  background: #ef5350;
+  color: white;
+}
+
 body {
   --header-height: 50px;
 }
@@ -73,6 +114,13 @@ body {
   height: 100vh;
   overflow: hidden;
 }
+.header .tab .panelsLogin {
+  position: fixed;
+  display: flex;
+  /* width: 400px;
+  height: 100vh; */
+  overflow: hidden;
+}
 .header .tab .panels .panel {
   display: flex;
   width: 100%;
@@ -688,4 +736,34 @@ body {
 .equipment .button:active + .background2 {
   background-color: #b71c1c;
   transition: none;
+}
+
+.login_options {
+  background: black;
+  color: white;
+  font-size: initial;
+  text-align: left;
+  cursor: pointer;
+}
+
+.metamask {
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+}
+
+.discord {
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+}
+
+.metamask_text {
+  margin-left: 10px;
+
+}
+
+.discord_text {
+  margin-left: 10px;
+
 }