bring back unlock account action

client/src/components/organisms/Web3message.tsx

@@ -1,12 +1,17 @@
 import React, { PureComponent } from 'react'
 import Dotdotdot from 'react-dotdotdot'
+import Button from '../atoms/Button'
 import AccountStatus from '../molecules/AccountStatus'
 import styles from './Web3message.module.scss'
 import { User } from '../../context'
 import content from '../../data/web3message.json'
 
 export default class Web3message extends PureComponent {
-    private message = (message: string, account?: string) => (
+    private message = (
+        message: string,
+        account?: string,
+        unlockAccounts?: () => Promise<any>
+    ) => (
         <div className={styles.message}>
             <AccountStatus className={styles.status} />{' '}
             {account ? (
@@ -15,20 +20,33 @@ export default class Web3message extends PureComponent {
                     <code className={styles.account}>{account}</code>
                 </Dotdotdot>
             ) : (
-                <span dangerouslySetInnerHTML={{ __html: message }} />
+                <>
+                    <span dangerouslySetInnerHTML={{ __html: message }} />{' '}
+                    {unlockAccounts && (
+                        <Button onClick={() => unlockAccounts()} link>
+                            Unlock Account
+                        </Button>
+                    )}
+                </>
             )}
         </div>
     )
 
     public render() {
-        const { isWeb3, isNile, isLogged, account } = this.context
+        const {
+            isWeb3,
+            isNile,
+            isLogged,
+            account,
+            unlockAccounts
+        } = this.context
 
         return !isWeb3
             ? this.message(content.noweb3)
             : !isNile
             ? this.message(content.wrongNetwork)
             : !isLogged
-            ? this.message(content.noAccount)
+            ? this.message(content.noAccount, '', unlockAccounts)
             : isLogged
             ? this.message(content.hasAccount, account)
             : null

client/src/context/UserProvider.tsx

@@ -35,10 +35,20 @@ interface UserProviderState {
     web3: Web3
     ocean: any
     requestFromFaucet(account: string): Promise<FaucetResponse>
+    unlockAccounts(): Promise<any>
     message: string
 }
 
 export default class UserProvider extends PureComponent<{}, UserProviderState> {
+    private unlockAccounts = async () => {
+        try {
+            await window.ethereum.enable()
+        } catch (error) {
+            // User denied account access...
+            return null
+        }
+    }
+
     public state = {
         isLogged: false,
         isLoading: true,
@@ -57,6 +67,7 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
         account: '',
         ocean: {} as any,
         requestFromFaucet: () => requestFromFaucet(''),
+        unlockAccounts: () => this.unlockAccounts(),
         message: 'Connecting to Ocean...'
     }
 
@@ -70,6 +81,21 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
         this.initNetworkPoll()
     }
 
+    private initAccountsPoll() {
+        if (!this.accountsInterval) {
+            this.accountsInterval = setInterval(
+                this.fetchAccounts,
+                POLL_ACCOUNTS
+            )
+        }
+    }
+
+    private initNetworkPoll() {
+        if (!this.networkInterval) {
+            this.networkInterval = setInterval(this.fetchNetwork, POLL_NETWORK)
+        }
+    }
+
     private getWeb3 = async () => {
         // Modern dapp browsers
         if (window.ethereum) {
@@ -156,39 +182,25 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
         }
     }
 
-    private initAccountsPoll() {
-        if (!this.accountsInterval) {
-            this.accountsInterval = setInterval(
-                this.fetchAccounts,
-                POLL_ACCOUNTS
-            )
-        }
-    }
-
-    private initNetworkPoll() {
-        if (!this.networkInterval) {
-            this.networkInterval = setInterval(this.fetchNetwork, POLL_NETWORK)
-        }
-    }
-
     private fetchAccounts = async () => {
         const { ocean, isWeb3, isLogged, isNile } = this.state
 
         if (isWeb3) {
+            let accounts
+
             // Modern dapp browsers
             if (window.ethereum) {
                 if (!isLogged && isNile) {
-                    try {
-                        await window.ethereum.enable()
-                    } catch (error) {
-                        // User denied account access...
-                        this.accountsInterval = null
-                        return
-                    }
+                    // simply set to empty, and have user click a button somewhere
+                    // to initiate account unlocking
+                    accounts = []
+
+                    // alternatively, automatically prompt for account unlocking
+                    // await this.unlockAccounts()
                 }
             }
 
-            const accounts = await ocean.accounts.list()
+            accounts = await ocean.accounts.list()
 
             if (accounts.length > 0) {
                 const account = await accounts[0].getId()

client/src/context/index.tsx

@@ -16,5 +16,8 @@ export const User = React.createContext({
     requestFromFaucet: () => {
         /* empty */
     },
+    unlockAccounts: () => {
+        /* empty */
+    },
     message: ''
 })

client/src/hoc/withTracker.tsx

@@ -9,7 +9,7 @@ const withTracker = <P extends RouteComponentProps>(
 ) => {
     ReactGA.initialize(analyticsId, {
         testMode: process.env.NODE_ENV === 'development',
-        debug: process.env.NODE_ENV === 'development'
+        debug: false
     })
 
     const trackPage = (page: string) => {