select wallet modal

2023-03-15 18:03:00 +01:00 · 2019-07-09 12:22:40 +02:00 · 2019-07-09 12:22:40 +02:00 · cce2a7fad3
commit cce2a7fad3
parent adf52ceb77
12 changed files with 190 additions and 67 deletions
--- a/client/package-lock.json
+++ b/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==",
-      "dev": true
+      "integrity": "sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg=="
    },
    "@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==",
-      "dev": true
+      "integrity": "sha512-JsTaiksRsel5n7XwqPAfB0l3TFKdpjW/kgAELf9vrb5adGA7UCPLajKK5s3nFrcFm3Rkyp/Qkgl73ENc1UY3cA=="
    },
    "currently-unhandled": {
      "version": "0.4.1",
--- a/client/package.json
+++ b/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",
--- a/client/src/components/molecules/AccountStatus/Indicator.tsx
+++ b/client/src/components/molecules/AccountStatus/Indicator.tsx
@ -20,9 +20,7 @@ const Indicator = ({
    >
        <User.Consumer>
            {states =>
-                !states.isWeb3 ? (
-                    <span className={styles.statusIndicator} />
-                ) : !states.isLogged || !states.isOceanNetwork ? (
+                !states.isLogged || !states.isOceanNetwork ? (
                    <span className={styles.statusIndicatorCloseEnough} />
                ) : states.isLogged ? (
                    <span className={styles.statusIndicatorActive} />
--- a/client/src/components/molecules/AccountStatus/Popover.tsx
+++ b/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>
        )
    }
--- a/client/src/components/organisms/Header.tsx
+++ b/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>
-                        <button onClick={this.context.loginZeroWallet}>login ZWallet</button>
+                        <WalletSelector/>
                        <AccountStatus className={styles.accountStatus} />
                    </nav>
                </div>
@ -42,5 +41,3 @@ export default class Header extends PureComponent {
        )
    }
 }
-
-Header.contextType = User
--- a/client/src/components/organisms/WalletSelector.module.scss
+++ b/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;
+}
--- a/client/src/components/organisms/WalletSelector.tsx
+++ b/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
--- a/client/src/components/organisms/Web3message.tsx
+++ b/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
-            ? this.message(content.noweb3)
-            : !isOceanNetwork
+        return !isOceanNetwork
            ? this.message(content.wrongNetwork)
            : !isLogged
            ? this.message(content.noAccount, '', unlockAccounts)
--- a/client/src/context/BurnerWalletProvider.ts
+++ b/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
+    }
+ }
--- a/client/src/context/MetamaskProvider.ts
+++ b/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
    }
--- a/client/src/context/UserProvider.tsx
+++ b/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 () => {
-        const zerowalletProvider = new ZeroWalletProvider()
-        await zerowalletProvider.createLogin()
-        localStorage.setItem('logType', 'ZeroWallet')
-        const web3 = zerowalletProvider.getProvider()
+    private loginBurnerWallet = async () => {
+        const burnerwalletProvider = new BurnerWalletProvider()
+        await burnerwalletProvider.startLogin()
+        const web3 = burnerwalletProvider.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':
-                const zerowalletProvider = new ZeroWalletProvider()
+            case 'BurnerWallet':
+                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 isPacific = network === 'Pacific'
-            const isNile = network === 'Nile'
-            const isDuero = network === 'Duero'
-            const isSpree = network === 'Spree'
-            const isOceanNetwork = isPacific || isNile || isDuero || isSpree
+        const network = await ocean.keeper.getNetworkName()
+        const isPacific = network === 'Pacific'
+        const isNile = network === 'Nile'
+        const isDuero = network === 'Duero'
+        const isSpree = network === 'Spree'
+        const isOceanNetwork = isPacific || isNile || isDuero || isSpree

-            network !== this.state.network &&
+        network !== this.state.network &&
                this.setState({ isOceanNetwork, network })
-        }
    }

    public render() {
--- a/client/src/context/index.tsx
+++ b/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: ''