burner as default, web3 message

client/src/components/organisms/Web3message.tsx

@@ -1,16 +1,15 @@
 import React, { PureComponent } from 'react'
 import Account from '../atoms/Account'
-import Button from '../atoms/Button'
 import AccountStatus from '../molecules/AccountStatus'
 import styles from './Web3message.module.scss'
 import { User } from '../../context'
+import WalletSelector from './WalletSelector'
 import content from '../../data/web3message.json'
 
 export default class Web3message extends PureComponent {
     private message = (
         message: string,
         account?: string,
-        unlockAccounts?: () => any
     ) => (
         <div className={styles.message}>
             {account ? (
@@ -19,11 +18,7 @@ export default class Web3message extends PureComponent {
                 <div className={styles.warnings}>
                     <AccountStatus className={styles.status} />
                     <span dangerouslySetInnerHTML={{ __html: message }} />{' '}
-                    {unlockAccounts && (
-                        <Button onClick={() => unlockAccounts()} link>
-                            Unlock Account
-                        </Button>
-                    )}
+                    <WalletSelector/>
                 </div>
             )}
         </div>
@@ -33,14 +28,16 @@ export default class Web3message extends PureComponent {
         const {
             isOceanNetwork,
             isLogged,
+            isBurner,
             account,
-            unlockAccounts
         } = this.context
 
         return !isOceanNetwork
             ? this.message(content.wrongNetwork)
             : !isLogged
-            ? this.message(content.noAccount, '', unlockAccounts)
+            ? this.message(content.noAccount)
+            : isBurner
+            ? this.message(content.burnerWallet)
             : isLogged
             ? this.message(content.hasAccount, account)
             : null

client/src/context/UserProvider.tsx

@@ -10,6 +10,7 @@ import { BurnerWalletProvider } from './BurnerWalletProvider'
 
 const POLL_ACCOUNTS = 1000 // every 1s
 const POLL_NETWORK = POLL_ACCOUNTS * 60 // every 1 min
+const DEFAULT_WEB3 = new Web3(new Web3.providers.HttpProvider(nodeUri)) // default web3
 
 // taken from
 // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/web3/providers.d.ts
@@ -47,6 +48,7 @@ declare global {
 
 interface UserProviderState {
     isLogged: boolean
+    isBurner: boolean
     isLoading: boolean
     isOceanNetwork: boolean
     account: string
@@ -71,6 +73,7 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
         this.setState(
             {
                 isLogged: true,
+                isBurner: false,
                 web3
             },
             () => {
@@ -86,6 +89,7 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
         this.setState(
             {
                 isLogged: true,
+                isBurner: true,
                 web3
             },
             () => {
@@ -96,6 +100,7 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
 
     public state = {
         isLogged: false,
+        isBurner: false,
         isLoading: true,
         isOceanNetwork: false,
         balance: {
@@ -103,7 +108,7 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
             ocn: 0
         },
         network: '',
-        web3: new Web3(new Web3.providers.HttpProvider(nodeUri)),
+        web3: DEFAULT_WEB3,
         account: '',
         ocean: {} as any,
         requestFromFaucet: () => requestFromFaucet(''),
@@ -168,24 +173,25 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
                 }
                 break
             case 'BurnerWallet':
-                const zerowalletProvider = new BurnerWalletProvider()
-                if (await zerowalletProvider.isLogged()) {
-                    await zerowalletProvider.startLogin()
+                const burnerWalletProvider = new BurnerWalletProvider()
+                if (await burnerWalletProvider.isLogged()) {
+                    await burnerWalletProvider.startLogin()
                     this.setState(
                         {
                             isLogged: true,
-                            web3: zerowalletProvider.getProvider()
+                            isBurner: true,
+                            web3: burnerWalletProvider.getProvider()
                         },
                         () => {
                             this.loadOcean()
                         }
                     )
                 } else {
-                    this.loadOcean()
+                    this.loginBurnerWallet()
                 }
                 break
             default:
-                this.loadOcean()
+                this.loginBurnerWallet()
                 break
         }
     }

client/src/data/web3message.json

@@ -1,6 +1,6 @@
 {
-  "noweb3": "Not a Web3 Browser. For publishing and downloading an asset you need to <a href='https://docs.oceanprotocol.com/tutorials/metamask-setup/' target='_blank' rel='noopener noreferrer'>setup MetaMask</a> or use any other Web3-capable plugin or browser.",
-  "noAccount": "No accounts detected. For publishing and downloading an asset you need to unlock your Web3 account.",
+  "noAccount": "No wallet selected. For publishing and downloading an asset you need to use one.",
+  "burnerWallet": "You are using temporary burner wallet. Improve your security by migrating to Metamask",
   "hasAccount": "",
   "wrongNetwork": "Not connected to Pacific network.<br />Please connect in MetaMask with Custom RPC <code>https://pacific.oceanprotocol.com</code>"
 }