Added connect wallet when not connected yet. (need to connect before …

…you can add to your metamask) Signed-off-by: antonnell <antonnell.crpto@gmail.com>
Web3Camp-Labs · Mar 31, 2021 · 6e5aecd · 6e5aecd
1 parent e2035f4
commit 6e5aecd
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 18 deletions.
diff --git a/components/chain/chain.js b/components/chain/chain.js
@@ -1,3 +1,4 @@
+import React, { useState, useEffect } from 'react';
 import { Typography, Paper, Grid, Button } from '@material-ui/core'
 import Skeleton from '@material-ui/lab/Skeleton';
 import { useRouter } from 'next/router'
@@ -10,16 +11,41 @@ import { getProvider } from '../../utils'
 
 import {
   ERROR,
+  CONNECT_WALLET,
+  TRY_CONNECT_WALLET,
+  ACCOUNT_CONFIGURED
 } from '../../stores/constants'
 
 export default function Chain({ chain }) {
   const router = useRouter()
 
+  const [ account, setAccount ] = useState(null)
+
+  useEffect(() => {
+    const accountConfigure = () => {
+      const accountStore = stores.accountStore.getStore('account')
+      setAccount(accountStore)
+    }
+
+    stores.emitter.on(ACCOUNT_CONFIGURED, accountConfigure)
+
+    const accountStore = stores.accountStore.getStore('account')
+    setAccount(accountStore)
+
+    return () => {
+      stores.emitter.removeListener(ACCOUNT_CONFIGURED, accountConfigure)
+    }
+  }, [])
+
   const toHex = (num) => {
     return '0x'+num.toString(16)
   }
 
   const addToNetwork = () => {
+    if(!(account && account.address)) {
+      stores.dispatcher.dispatch({ type: TRY_CONNECT_WALLET })
+      return
+    }
 
     const params = {
       chainId: toHex(chain.chainId), // A 0x-prefixed hexadecimal string
@@ -48,12 +74,18 @@ export default function Chain({ chain }) {
   }
 
   const renderProviderText = () => {
-    const providerTextList = {
-      Metamask: 'Add to Metamask',
-      imToken: 'Add to imToken',
-      Wallet: 'Add to Wallet'
+
+    if(account && account.address) {
+      const providerTextList = {
+        Metamask: 'Add to Metamask',
+        imToken: 'Add to imToken',
+        Wallet: 'Add to Wallet'
+      }
+      return providerTextList[getProvider()]
+    } else {
+      return 'Connect wallet'
     }
-    return providerTextList[getProvider()]
+
   }
 
   if(!chain) {

diff --git a/components/header/header.js b/components/header/header.js
@@ -81,9 +81,7 @@ function Header(props) {
 
   useEffect(() => {
     const accountConfigure = () => {
-      console.log('accountConfigure')
       const accountStore = stores.accountStore.getStore('account')
-      console.log(accountStore)
       setAccount(accountStore)
     }
     const connectWallet = () => {
@@ -127,8 +125,6 @@ function Header(props) {
     setDarkMode(localStorageDarkMode ? localStorageDarkMode === 'dark' : false)
   },[]);
 
-  console.log(account)
-
   return (
     <div className={ classes.headerContainer }>
       { props.backClicked && (

diff --git a/pages/index.js b/pages/index.js
@@ -142,7 +142,7 @@ function Home({ chains, changeTheme, theme }) {
                 </svg>
                 <Typography variant='body1' className={ classes.sourceCode }>View Source Code</Typography>
               </a>
-              <Typography variant='subtitle1' className={ classes.version }>Version 1.0.2</Typography>
+              <Typography variant='subtitle1' className={ classes.version }>Version 1.0.3</Typography>
             </div>
           </div>
           <div className={ theme.palette.type === 'dark' ? classes.listContainerDark : classes.listContainer }>

diff --git a/stores/accountStore.js b/stores/accountStore.js
@@ -24,7 +24,6 @@ class Store {
 
     dispatcher.register(
       function (payload) {
-        console.log(payload)
         switch (payload.type) {
           case CONFIGURE:
             this.configure(payload);
@@ -103,20 +102,20 @@ class Store {
     if (window.ethereum) {
       window.web3 = new Web3(ethereum);
       try {
-          await ethereum.enable();
-          var accounts= await web3.eth.getAccounts();
-          console.log(accounts)
-          this.setStore({ account: { address: accounts[0] }, web3: window.web3 })
-          this.emitter.emit(ACCOUNT_CONFIGURED)
+        await ethereum.enable();
+        var accounts= await web3.eth.getAccounts();
+        this.setStore({ account: { address: accounts[0] }, web3: window.web3 })
+        this.emitter.emit(ACCOUNT_CONFIGURED)
       } catch (error) {
           // User denied account access...
       }
     }
     // Legacy dapp browsers...
     else if (window.web3) {
       window.web3 = new Web3(web3.currentProvider);
-      // Acccounts always exposed
-      web3.eth.sendTransaction({/* ... */});
+      var accounts= await web3.eth.getAccounts();
+      this.setStore({ account: { address: accounts[0] }, web3: window.web3 })
+      this.emitter.emit(ACCOUNT_CONFIGURED)
     }
     // Non-dapp browsers...
     else {