select wallet modal

client/package-lock.json

@@ -1684,8 +1684,7 @@
     "@types/prop-types": {
       "version": "15.7.1",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.1.tgz",
-      "integrity": "sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg==",
+      "integrity": "sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg=="
-      "dev": true
     },
     "@types/q": {
       "version": "1.5.2",
@@ -1697,7 +1696,6 @@
       "version": "16.8.22",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.22.tgz",
       "integrity": "sha512-C3O1yVqk4sUXqWyx0wlys76eQfhrQhiDhDlHBrjER76lR2S2Agiid/KpOU9oCqj1dISStscz7xXz1Cg8+sCQeA==",
-      "dev": true,
       "requires": {
         "@types/prop-types": "*",
         "csstype": "^2.2.0"
@@ -1744,7 +1742,6 @@
       "version": "3.8.2",
       "resolved": "https://registry.npmjs.org/@types/react-modal/-/react-modal-3.8.2.tgz",
       "integrity": "sha512-/Drs+XfHg9M60fy2Q63UUlhECXSNknDu3tnwFnbOhcdDjq03VD3hLCfv3X+BBzRqgu4TOu+TwEwBhgI8qdVAAQ==",
-      "dev": true,
       "requires": {
         "@types/react": "*"
       }
@@ -4886,8 +4883,7 @@
     "csstype": {
       "version": "2.6.5",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.5.tgz",
-      "integrity": "sha512-JsTaiksRsel5n7XwqPAfB0l3TFKdpjW/kgAELf9vrb5adGA7UCPLajKK5s3nFrcFm3Rkyp/Qkgl73ENc1UY3cA==",
+      "integrity": "sha512-JsTaiksRsel5n7XwqPAfB0l3TFKdpjW/kgAELf9vrb5adGA7UCPLajKK5s3nFrcFm3Rkyp/Qkgl73ENc1UY3cA=="
-      "dev": true
     },
     "currently-unhandled": {
       "version": "0.4.1",

client/package.json

@@ -16,8 +16,9 @@
     "@oceanprotocol/squid": "0.6.2",
     "@oceanprotocol/typographies": "^0.1.0",
     "@sindresorhus/slugify": "^0.9.1",
-    "bip39": "^3.0.2",
+    "@types/react-modal": "^3.8.2",
     "axios": "^0.19.0",
+    "bip39": "^3.0.2",
     "classnames": "^2.2.6",
     "ethereum-blockies": "github:MyEtherWallet/blockies",
     "filesize": "^4.1.2",

client/src/components/molecules/AccountStatus/Indicator.tsx

@@ -20,9 +20,7 @@ const Indicator = ({
     >
         <User.Consumer>
             {states =>
-                !states.isWeb3 ? (
+                !states.isLogged || !states.isOceanNetwork ? (
-                    <span className={styles.statusIndicator} />
-                ) : !states.isLogged || !states.isOceanNetwork ? (
                     <span className={styles.statusIndicatorCloseEnough} />
                 ) : states.isLogged ? (
                     <span className={styles.statusIndicatorActive} />

client/src/components/molecules/AccountStatus/Popover.tsx

@@ -12,7 +12,6 @@ export default class Popover extends PureComponent<{
             account,
             balance,
             network,
-            isWeb3,
             isOceanNetwork
         } = this.context
 
@@ -22,12 +21,7 @@ export default class Popover extends PureComponent<{
                 ref={this.props.forwardedRef}
                 style={this.props.style}
             >
-                {!isWeb3 ? (
+                {
-                    <div className={styles.popoverInfoline}>
-                        No Web3 detected. Use a browser with MetaMask installed
-                        to publish assets.
-                    </div>
-                ) : (
                     <>
                         <div className={styles.popoverInfoline}>
                             <Account account={account} />
@@ -58,7 +52,7 @@ export default class Popover extends PureComponent<{
                                 : network && `Connected to ${network} network`}
                         </div>
                     </>
-                )}
+                }
             </div>
         )
     }

client/src/components/organisms/Header.tsx

@@ -1,8 +1,8 @@
 import React, { PureComponent } from 'react'
 import { NavLink } from 'react-router-dom'
 import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
-import { User } from '../../context'
 import AccountStatus from '../molecules/AccountStatus'
+import WalletSelector from './WalletSelector'
 import styles from './Header.module.scss'
 
 import menu from '../../data/menu.json'
@@ -33,8 +33,7 @@ export default class Header extends PureComponent {
                         {menu.map(item => (
                             <MenuItem key={item.title} item={item} />
                         ))}
-                        <button onClick={this.context.loginMetamask}>login Metamask</button>
+                        <WalletSelector/>
-                        <button onClick={this.context.loginZeroWallet}>login ZWallet</button>
                         <AccountStatus className={styles.accountStatus} />
                     </nav>
                 </div>
@@ -42,5 +41,3 @@ export default class Header extends PureComponent {
         )
     }
 }
-
-Header.contextType = User

client/src/components/organisms/WalletSelector.module.scss

@@ -0,0 +1,49 @@
+@import '../../styles/variables';
+
+.actions {
+    text-align: right;
+    margin-top: $spacer;
+}
+
+.openLink {
+    margin: 0;
+    font-size: $font-size-small;
+}
+
+.info {
+    background: $brand-white;
+    padding: $spacer;
+    border: 1px solid $brand-grey-lighter;
+    border-radius: $border-radius;
+
+    h3 {
+        font-size: $font-size-base;
+        margin-top: 0;
+        margin-bottom: $spacer / 8;
+    }
+
+    p {
+        border-bottom: 1px solid $brand-grey-lighter;
+        padding-bottom: $spacer / 2;
+    }
+
+    code {
+        padding: 0;
+        color: $brand-grey-light;
+    }
+}
+
+.error {
+    background: $red;
+    padding: $spacer / 2;
+    text-align: center;
+    color: $brand-white;
+    border-radius: $border-radius;
+    font-weight: $font-weight-bold;
+    font-size: $font-size-small;
+}
+
+.success {
+    composes: error;
+    background: $green;
+}

client/src/components/organisms/WalletSelector.tsx

@@ -0,0 +1,58 @@
+import React, { PureComponent } from 'react'
+import Modal from '../atoms/Modal'
+import { User } from '../../context'
+import styles from './WalletSelector.module.scss'
+import Button from '../atoms/Button'
+
+export default class WalletSelector extends PureComponent<
+    {},
+    {
+        isModalOpen: boolean
+    }
+> {
+    public state = {
+        isModalOpen: false
+    }
+
+    private toggleModal = () => {
+        this.setState({ isModalOpen: !this.state.isModalOpen })
+    }
+
+    private loginBurnerWallet = () => {
+        this.context.loginBurnerWallet()
+        this.toggleModal()
+    }
+
+    private loginMetamask = () => {
+        this.context.loginMetamask()
+        this.toggleModal()
+    }
+
+
+    public render() {
+        return (
+            <div className={styles.actions}>
+                <Button
+                    link
+                    className={styles.openLink}
+                    onClick={this.toggleModal}
+                >
+                    Select wallet
+                </Button>
+                <Modal
+                    title="Select wallet"
+                    description="Select wallet."
+                    isOpen={this.state.isModalOpen}
+                    toggleModal={this.toggleModal}
+                >
+                    <div className={styles.info}>
+                        <button onClick={this.loginBurnerWallet}>login BurnerWallet</button>
+                        <button onClick={this.loginMetamask}>login Metamask</button>
+                    </div>
+                </Modal>
+            </div>
+        )
+    }
+}
+
+WalletSelector.contextType = User

client/src/components/organisms/Web3message.tsx

@@ -31,16 +31,13 @@ export default class Web3message extends PureComponent {
 
     public render() {
         const {
-            isWeb3,
             isOceanNetwork,
             isLogged,
             account,
             unlockAccounts
         } = this.context
 
-        return !isWeb3
+        return !isOceanNetwork
-            ? this.message(content.noweb3)
-            : !isOceanNetwork
             ? this.message(content.wrongNetwork)
             : !isLogged
             ? this.message(content.noAccount, '', unlockAccounts)

client/src/context/BurnerWalletProvider.ts

@@ -0,0 +1,48 @@
+import Web3 from 'web3'
+import { nodeUri } from '../config'
+const bip39 = require('bip39')
+const HDWalletProvider = require('truffle-hdwallet-provider')
+
+export class BurnerWalletProvider {
+    web3: Web3
+
+    constructor() {
+        // Default
+        this.web3 = null as any
+    }
+
+    async isAvaliable() {
+        return true
+    }
+
+    async isLogged() {
+        if (localStorage.getItem('seedphrase') !== null) {
+            return true
+        }
+        return false
+    }
+
+    async startLogin() {
+        if (await this.isLogged()) {
+            const mnemonic = localStorage.getItem('seedphrase') as string
+            localStorage.setItem('logType', 'BurnerWallet')
+            const provider = new HDWalletProvider(mnemonic, `${nodeUri}`, 0, 1);
+            this.web3 = new Web3(provider)
+        } else {
+            const mnemonic = bip39.generateMnemonic()
+            localStorage.setItem('seedphrase', mnemonic)
+            localStorage.setItem('logType', 'BurnerWallet')
+            const provider = new HDWalletProvider(mnemonic, `${nodeUri}`, 0, 1);
+            this.web3 = new Web3(provider)
+        }
+    }
+
+    async logout() {
+        localStorage.removeItem('seedphrase')
+        localStorage.removeItem('logType')
+    }
+
+    getProvider() {
+        return this.web3
+    }
+ }

client/src/context/MetamaskProvider.ts

@@ -31,11 +31,17 @@ export class MetamaskProvider {
     async startLogin() {
         try {
             await window.ethereum.enable()
+            localStorage.setItem('logType', 'Metamask')
         } catch (error) {
             return false
         }
     }
 
+    async logout() {
+        localStorage.removeItem('logType')
+        // reload page?
+    }
+
     getProvider() {
         return this.web3
     }

client/src/context/UserProvider.tsx

@@ -6,7 +6,7 @@ import { provideOcean, requestFromFaucet, FaucetResponse } from '../ocean'
 import { nodeUri } from '../config'
 import MarketProvider from './MarketProvider'
 import { MetamaskProvider } from './MetamaskProvider'
-import { ZeroWalletProvider } from './ZeroWalletProvider'
+import { BurnerWalletProvider } from './BurnerWalletProvider'
 
 const POLL_ACCOUNTS = 1000 // every 1s
 const POLL_NETWORK = POLL_ACCOUNTS * 60 // every 1 min
@@ -48,7 +48,6 @@ declare global {
 interface UserProviderState {
     isLogged: boolean
     isLoading: boolean
-    isWeb3: boolean
     isOceanNetwork: boolean
     account: string
     balance: {
@@ -59,26 +58,15 @@ interface UserProviderState {
     web3: Web3
     ocean: Ocean
     requestFromFaucet(account: string): Promise<FaucetResponse>
-    unlockAccounts(): Promise<any>
     loginMetamask(): Promise<any>
-    loginZeroWallet(): Promise<any>
+    loginBurnerWallet(): Promise<any>
     message: string
 }
 
 export default class UserProvider extends PureComponent<{}, UserProviderState> {
-    private unlockAccounts = async () => {
-        try {
-            window.ethereum.enable()
-        } catch (error) {
-            // User denied account access...
-            return null
-        }
-    }
-
     private loginMetamask = async () => {
         const metamaskProvider = new MetamaskProvider()
         await metamaskProvider.startLogin()
-        localStorage.setItem('logType', 'Metamask')
         const web3 = metamaskProvider.getProvider()
         this.setState(
             {
@@ -91,11 +79,10 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
         )
     }
 
-    private loginZeroWallet = async () => {
+    private loginBurnerWallet = async () => {
-        const zerowalletProvider = new ZeroWalletProvider()
+        const burnerwalletProvider = new BurnerWalletProvider()
-        await zerowalletProvider.createLogin()
+        await burnerwalletProvider.startLogin()
-        localStorage.setItem('logType', 'ZeroWallet')
+        const web3 = burnerwalletProvider.getProvider()
-        const web3 = zerowalletProvider.getProvider()
         this.setState(
             {
                 isLogged: true,
@@ -110,7 +97,6 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
     public state = {
         isLogged: false,
         isLoading: true,
-        isWeb3: true,
         isOceanNetwork: false,
         balance: {
             eth: 0,
@@ -121,9 +107,8 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
         account: '',
         ocean: {} as any,
         requestFromFaucet: () => requestFromFaucet(''),
-        unlockAccounts: () => this.unlockAccounts(),
         loginMetamask: () => this.loginMetamask(),
-        loginZeroWallet: () => this.loginZeroWallet(),
+        loginBurnerWallet: () => this.loginBurnerWallet(),
         message: 'Connecting to Ocean...'
     }
 
@@ -182,10 +167,10 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
                     this.loadOcean()
                 }
                 break
-            case 'ZeroWallet':
+            case 'BurnerWallet':
-                const zerowalletProvider = new ZeroWalletProvider()
+                const zerowalletProvider = new BurnerWalletProvider()
                 if (await zerowalletProvider.isLogged()) {
-                    await zerowalletProvider.restoreStoredLogin()
+                    await zerowalletProvider.startLogin()
                     this.setState(
                         {
                             isLogged: true,
@@ -250,19 +235,17 @@ export default class UserProvider extends PureComponent<{}, UserProviderState> {
     }
 
     private fetchNetwork = async () => {
-        const { ocean, isWeb3 } = this.state
+        const { ocean } = this.state
 
-        if (isWeb3) {
+        const network = await ocean.keeper.getNetworkName()
-            const network = await ocean.keeper.getNetworkName()
+        const isPacific = network === 'Pacific'
-            const isPacific = network === 'Pacific'
+        const isNile = network === 'Nile'
-            const isNile = network === 'Nile'
+        const isDuero = network === 'Duero'
-            const isDuero = network === 'Duero'
+        const isSpree = network === 'Spree'
-            const isSpree = network === 'Spree'
+        const isOceanNetwork = isPacific || isNile || isDuero || isSpree
-            const isOceanNetwork = isPacific || isNile || isDuero || isSpree
 
-            network !== this.state.network &&
+        network !== this.state.network &&
                 this.setState({ isOceanNetwork, network })
-        }
     }
 
     public render() {

client/src/context/index.tsx

@@ -3,7 +3,6 @@ import React from 'react'
 export const User = React.createContext({
     isLogged: false,
     isLoading: false,
-    isWeb3: false,
     isOceanNetwork: false,
     account: '',
     web3: {},
@@ -16,13 +15,10 @@ export const User = React.createContext({
     requestFromFaucet: () => {
         /* empty */
     },
-    unlockAccounts: () => {
-        /* empty */
-    },
     loginMetamask: () => {
         /* empty */
     },
-    loginZeroWallet: () => {
+    loginBurnerWallet: () => {
         /* empty */
     },
     message: ''