initial prototype
This commit is contained in:
Max Berman
parent
a2c94b879f
commit
11a7fdd7a6
|
|
@ -1,6 +1,5 @@
|
|||
{
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"tabWidth": 2
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ const AssetTeaser = ({
|
|||
/>
|
||||
)}
|
||||
<h1>{main.name}</h1>
|
||||
|
||||
<h2>test</h2>
|
||||
{!minimal && (
|
||||
<div className={styles.description}>
|
||||
<Dotdotdot clamp={3}>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,30 @@
|
|||
import React, { useState } from 'react'
|
||||
import React, { useState, useContext } from 'react'
|
||||
import { CONNECTIONS } from '../../config'
|
||||
import { User } from '../../context'
|
||||
|
||||
/* NETWORK SWITCHER */
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search)
|
||||
const networkFromParam = urlParams.get('network') || 'pacific'
|
||||
const idx = Object.keys(CONNECTIONS).indexOf(networkFromParam)
|
||||
const commonsNetwork = Object.values(CONNECTIONS)[idx] // TypeScript won't let me access CONNECTIONS[networkFromParam] directly
|
||||
|
||||
console.log(commonsNetwork)
|
||||
// console.log(Object.keys(CONNECTIONS))
|
||||
|
||||
export function NetworkSwitcher() {
|
||||
return null
|
||||
const userContext = useContext(User)
|
||||
const switchNetwork = (networkName: string): any => {
|
||||
const idx = Object.keys(CONNECTIONS).indexOf(networkName)
|
||||
userContext.switchNetwork(networkName, Object.values(CONNECTIONS)[idx]) // TypeScript won't let me access CONNECTIONS[networkName] directly
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<ul>
|
||||
{Object.keys(CONNECTIONS).map((networkName, i) => (
|
||||
<li key={i} onClick={() => switchNetwork(networkName)}>
|
||||
{networkName}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<em>{userContext.network}</em>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,26 +2,7 @@
|
|||
// commons-server connection
|
||||
//
|
||||
export const serviceUri =
|
||||
process.env.REACT_APP_SERVICE_URI || 'http://localhost:4000'
|
||||
|
||||
//
|
||||
// OCEAN REMOTE CONNECTIONS
|
||||
//
|
||||
export const nodeUri =
|
||||
process.env.REACT_APP_NODE_URI || 'https://pacific.oceanprotocol.com'
|
||||
export const aquariusUri =
|
||||
process.env.REACT_APP_AQUARIUS_URI ||
|
||||
'https://aquarius.commons.oceanprotocol.com'
|
||||
export const brizoUri =
|
||||
process.env.REACT_APP_BRIZO_URI || 'https://brizo.commons.oceanprotocol.com'
|
||||
export const brizoAddress =
|
||||
process.env.REACT_APP_BRIZO_ADDRESS ||
|
||||
'0x008c25ed3594e094db4592f4115d5fa74c4f41ea'
|
||||
export const secretStoreUri =
|
||||
process.env.REACT_APP_SECRET_STORE_URI ||
|
||||
'https://secret-store.oceanprotocol.com'
|
||||
export const faucetUri =
|
||||
process.env.REACT_APP_FAUCET_URI || 'https://faucet.oceanprotocol.com'
|
||||
process.env.REACT_APP_SERVICE_URI || 'http://localhost:4000'
|
||||
|
||||
//
|
||||
// APP CONFIG
|
||||
|
|
@ -30,40 +11,62 @@ export const verbose = true
|
|||
export const analyticsId = 'UA-60614729-11'
|
||||
|
||||
export const showChannels =
|
||||
process.env.REACT_APP_SHOW_CHANNELS === 'true' || false
|
||||
process.env.REACT_APP_SHOW_CHANNELS === 'true' || false
|
||||
export const allowPricing =
|
||||
process.env.REACT_APP_ALLOW_PRICING === 'true' || false
|
||||
process.env.REACT_APP_ALLOW_PRICING === 'true' || false
|
||||
export const showRequestTokens =
|
||||
process.env.REACT_APP_SHOW_REQUEST_TOKENS_BUTTON === 'true' || false
|
||||
process.env.REACT_APP_SHOW_REQUEST_TOKENS_BUTTON === 'true' || false
|
||||
// https://ipfs.github.io/public-gateway-checker/
|
||||
export const ipfsGatewayUri =
|
||||
process.env.REACT_APP_IPFS_GATEWAY_URI || 'https://gateway.ipfs.io'
|
||||
process.env.REACT_APP_IPFS_GATEWAY_URI || 'https://gateway.ipfs.io'
|
||||
export const ipfsNodeUri =
|
||||
process.env.REACT_APP_IPFS_NODE_URI || 'https://ipfs.infura.io:5001'
|
||||
process.env.REACT_APP_IPFS_NODE_URI || 'https://ipfs.infura.io:5001'
|
||||
|
||||
//
|
||||
// OCEAN REMOTE CONNECTIONS
|
||||
//
|
||||
export const nodeUri =
|
||||
process.env.REACT_APP_NODE_URI || 'https://pacific.oceanprotocol.com'
|
||||
export const aquariusUri =
|
||||
process.env.REACT_APP_AQUARIUS_URI ||
|
||||
'https://aquarius.commons.oceanprotocol.com'
|
||||
export const brizoUri =
|
||||
process.env.REACT_APP_BRIZO_URI || 'https://brizo.commons.oceanprotocol.com'
|
||||
export const brizoAddress =
|
||||
process.env.REACT_APP_BRIZO_ADDRESS ||
|
||||
'0x008c25ed3594e094db4592f4115d5fa74c4f41ea'
|
||||
export const secretStoreUri =
|
||||
process.env.REACT_APP_SECRET_STORE_URI ||
|
||||
'https://secret-store.oceanprotocol.com'
|
||||
export const faucetUri =
|
||||
process.env.REACT_APP_FAUCET_URI || 'https://faucet.oceanprotocol.com'
|
||||
|
||||
export const CONNECTIONS = {
|
||||
pacific: {
|
||||
nodeUri: 'https://pacific.oceanprotocol.com',
|
||||
aquariusUri: 'https://aquarius.commons.oceanprotocol.com',
|
||||
brizoUri: 'https://brizo.commons.oceanprotocol.com',
|
||||
brizoAddress: '0x008c25ed3594e094db4592f4115d5fa74c4f41ea',
|
||||
secretStoreUri: 'https://secret-store.oceanprotocol.com',
|
||||
faucetUri: 'https://faucet.oceanprotocol.com'
|
||||
},
|
||||
nile: {
|
||||
nodeUri: 'https://nile.dev-ocean.com',
|
||||
aquariusUri: 'https://aquarius.nile.dev-ocean.com',
|
||||
brizoUri: 'https://brizo.nile.dev-ocean.com',
|
||||
brizoAddress: '0x4aaab179035dc57b35e2ce066919048686f82972',
|
||||
secretStoreUri: 'https://secret-store.nile.dev-ocean.com',
|
||||
faucetUri: 'https://faucet.nile.dev-ocean.com'
|
||||
},
|
||||
duero: {
|
||||
nodeUri: 'https://duero.dev-ocean.com',
|
||||
aquariusUri: 'https://aquarius.duero.dev-ocean.com',
|
||||
brizoUri: 'https://brizo.duero.dev-ocean.com',
|
||||
brizoAddress: '0x9d4ed58293f71122ad6a733c1603927a150735d0',
|
||||
secretStoreUri: 'https://secret-store.duero.dev-ocean.com',
|
||||
faucetUri: 'https://faucet.duero.dev-ocean.com'
|
||||
}
|
||||
Pacific: {
|
||||
nodeUri: 'https://pacific.oceanprotocol.com',
|
||||
aquariusUri: 'https://aquarius.commons.oceanprotocol.com',
|
||||
brizoUri: 'https://brizo.commons.oceanprotocol.com',
|
||||
brizoAddress: '0x008c25ed3594e094db4592f4115d5fa74c4f41ea',
|
||||
secretStoreUri: 'https://secret-store.oceanprotocol.com',
|
||||
//faucetUri: 'https://faucet.oceanprotocol.com',
|
||||
verbose: true
|
||||
},
|
||||
Nile: {
|
||||
nodeUri: 'https://nile.dev-ocean.com',
|
||||
aquariusUri: 'https://aquarius.nile.dev-ocean.com',
|
||||
brizoUri: 'https://brizo.nile.dev-ocean.com',
|
||||
brizoAddress: '0x4aaab179035dc57b35e2ce066919048686f82972',
|
||||
secretStoreUri: 'https://secret-store.nile.dev-ocean.com',
|
||||
//faucetUri: 'https://faucet.nile.dev-ocean.com',
|
||||
verbose: true
|
||||
},
|
||||
Duero: {
|
||||
nodeUri: 'https://duero.dev-ocean.com',
|
||||
aquariusUri: 'https://aquarius.duero.dev-ocean.com',
|
||||
brizoUri: 'https://brizo.duero.dev-ocean.com',
|
||||
brizoAddress: '0x9d4ed58293f71122ad6a733c1603927a150735d0',
|
||||
secretStoreUri: 'https://secret-store.duero.dev-ocean.com',
|
||||
//faucetUri: 'https://faucet.duero.dev-ocean.com',
|
||||
verbose: true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,47 +7,47 @@ import { requestFromFaucet } from '../ocean'
|
|||
const bip39 = require('bip39')
|
||||
|
||||
export class BurnerWalletProvider {
|
||||
private web3: Web3
|
||||
private web3: Web3
|
||||
|
||||
public constructor() {
|
||||
// Default
|
||||
this.web3 = null as any
|
||||
}
|
||||
|
||||
public async isLogged() {
|
||||
if (localStorage.getItem('seedphrase') !== null) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
public async startLogin() {
|
||||
let mnemonic
|
||||
const isLogged = await this.isLogged()
|
||||
|
||||
if (isLogged) {
|
||||
mnemonic = localStorage.getItem('seedphrase')
|
||||
} else {
|
||||
mnemonic = bip39.generateMnemonic()
|
||||
localStorage.setItem('seedphrase', mnemonic)
|
||||
public constructor() {
|
||||
// Default
|
||||
this.web3 = null as any
|
||||
}
|
||||
|
||||
localStorage.setItem('logType', 'BurnerWallet')
|
||||
const provider = new HDWalletProvider(mnemonic, nodeUri, 0, 1)
|
||||
this.web3 = new Web3(provider as any)
|
||||
const accounts = await this.web3.eth.getAccounts()
|
||||
const balance = await this.web3.eth.getBalance(accounts[0])
|
||||
public async isLogged() {
|
||||
if (localStorage.getItem('seedphrase') !== null) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
// fill with Ether if account balance is empty
|
||||
balance === '0' && (await requestFromFaucet(provider.getAddress(0)))
|
||||
}
|
||||
public async startLogin() {
|
||||
let mnemonic
|
||||
const isLogged = await this.isLogged()
|
||||
|
||||
public async logout() {
|
||||
// localStorage.removeItem('seedphrase')
|
||||
localStorage.removeItem('logType')
|
||||
}
|
||||
if (isLogged) {
|
||||
mnemonic = localStorage.getItem('seedphrase')
|
||||
} else {
|
||||
mnemonic = bip39.generateMnemonic()
|
||||
localStorage.setItem('seedphrase', mnemonic)
|
||||
}
|
||||
|
||||
public getProvider() {
|
||||
return this.web3
|
||||
}
|
||||
localStorage.setItem('logType', 'BurnerWallet')
|
||||
const provider = new HDWalletProvider(mnemonic, nodeUri, 0, 1)
|
||||
this.web3 = new Web3(provider as any)
|
||||
const accounts = await this.web3.eth.getAccounts()
|
||||
const balance = await this.web3.eth.getBalance(accounts[0])
|
||||
|
||||
// fill with Ether if account balance is empty
|
||||
balance === '0' && (await requestFromFaucet(provider.getAddress(0)))
|
||||
}
|
||||
|
||||
public async logout() {
|
||||
// localStorage.removeItem('seedphrase')
|
||||
localStorage.removeItem('logType')
|
||||
}
|
||||
|
||||
public getProvider() {
|
||||
return this.web3
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,263 +6,298 @@ import { provideOcean, requestFromFaucet, FaucetResponse } from '../ocean'
|
|||
import MarketProvider from './MarketProvider'
|
||||
import { MetamaskProvider } from './MetamaskProvider'
|
||||
import { BurnerWalletProvider } from './BurnerWalletProvider'
|
||||
|
||||
import { NetworkSwitcher } from '../components/molecules/NetworkSwitcher'
|
||||
|
||||
import {
|
||||
aquariusUri,
|
||||
brizoUri,
|
||||
brizoAddress,
|
||||
nodeUri,
|
||||
secretStoreUri,
|
||||
verbose
|
||||
aquariusUri,
|
||||
brizoUri,
|
||||
brizoAddress,
|
||||
nodeUri,
|
||||
secretStoreUri,
|
||||
verbose,
|
||||
CONNECTIONS
|
||||
} from '../config'
|
||||
|
||||
const oceanConfig = {
|
||||
nodeUri,
|
||||
aquariusUri,
|
||||
brizoUri,
|
||||
brizoAddress,
|
||||
secretStoreUri,
|
||||
verbose
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
interface UserProviderState {
|
||||
isLogged: boolean
|
||||
isBurner: boolean
|
||||
isWeb3Capable: boolean
|
||||
isLoading: boolean
|
||||
account: string
|
||||
balance: {
|
||||
eth: number
|
||||
ocn: number
|
||||
}
|
||||
network: string
|
||||
web3: Web3
|
||||
ocean: Ocean
|
||||
requestFromFaucet(account: string): Promise<FaucetResponse>
|
||||
loginMetamask(): Promise<any>
|
||||
loginBurnerWallet(): Promise<any>
|
||||
logoutBurnerWallet(): Promise<any>
|
||||
loadOcean: (config: Config) => Promise<Ocean | void>
|
||||
message: string
|
||||
}
|
||||
|
||||
const oceanConfig = {
|
||||
nodeUri,
|
||||
aquariusUri,
|
||||
brizoUri,
|
||||
brizoAddress,
|
||||
secretStoreUri,
|
||||
verbose
|
||||
isLogged: boolean
|
||||
isBurner: boolean
|
||||
isWeb3Capable: boolean
|
||||
isLoading: boolean
|
||||
account: string
|
||||
balance: {
|
||||
eth: number
|
||||
ocn: number
|
||||
}
|
||||
network: string
|
||||
web3: Web3
|
||||
ocean: Ocean
|
||||
switchNetwork(network: string, config: Config): any
|
||||
requestFromFaucet(account: string): Promise<FaucetResponse>
|
||||
loginMetamask(): Promise<any>
|
||||
loginBurnerWallet(): Promise<any>
|
||||
logoutBurnerWallet(): Promise<any>
|
||||
loadOcean: (config: Config) => Promise<Ocean | void>
|
||||
message: string
|
||||
}
|
||||
|
||||
export default class UserProvider extends PureComponent<{}, UserProviderState> {
|
||||
private loginMetamask = async () => {
|
||||
const metamaskProvider = new MetamaskProvider()
|
||||
await metamaskProvider.startLogin()
|
||||
const web3 = metamaskProvider.getProvider()
|
||||
this.setState(
|
||||
{
|
||||
isLogged: true,
|
||||
isBurner: false,
|
||||
web3
|
||||
},
|
||||
() => {
|
||||
this.loadOcean({
|
||||
web3Provider: this.state.web3,
|
||||
...oceanConfig
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
private loginBurnerWallet = async () => {
|
||||
const burnerwalletProvider = new BurnerWalletProvider()
|
||||
await burnerwalletProvider.startLogin()
|
||||
const web3 = burnerwalletProvider.getProvider()
|
||||
this.setState(
|
||||
{
|
||||
isLogged: true,
|
||||
isBurner: true,
|
||||
web3
|
||||
},
|
||||
() => {
|
||||
this.loadOcean({
|
||||
web3Provider: this.state.web3,
|
||||
...oceanConfig
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
private logoutBurnerWallet = async () => {
|
||||
const burnerwalletProvider = new BurnerWalletProvider()
|
||||
await burnerwalletProvider.logout()
|
||||
}
|
||||
|
||||
public state = {
|
||||
isLogged: false,
|
||||
isBurner: false,
|
||||
isWeb3Capable: Boolean(window.web3 || window.ethereum),
|
||||
isLoading: true,
|
||||
balance: {
|
||||
eth: 0,
|
||||
ocn: 0
|
||||
},
|
||||
network: '',
|
||||
web3: DEFAULT_WEB3,
|
||||
account: '',
|
||||
ocean: {} as any,
|
||||
requestFromFaucet: () => requestFromFaucet(''),
|
||||
loginMetamask: () => this.loginMetamask(),
|
||||
loginBurnerWallet: () => this.loginBurnerWallet(),
|
||||
logoutBurnerWallet: () => this.logoutBurnerWallet(),
|
||||
loadOcean: (config: Config) => this.loadOcean(config),
|
||||
message: 'Connecting to Ocean...'
|
||||
}
|
||||
|
||||
private accountsInterval: any = null
|
||||
|
||||
private networkInterval: any = null
|
||||
|
||||
public async componentDidMount() {
|
||||
await this.bootstrap()
|
||||
}
|
||||
|
||||
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 loadDefaultWeb3 = async () => {
|
||||
this.setState(
|
||||
{
|
||||
public state = {
|
||||
isLogged: false,
|
||||
isBurner: false,
|
||||
web3: DEFAULT_WEB3
|
||||
},
|
||||
() => {
|
||||
this.loadOcean({
|
||||
web3Provider: this.state.web3,
|
||||
...oceanConfig
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
isWeb3Capable: Boolean(window.web3 || window.ethereum),
|
||||
isLoading: true,
|
||||
balance: {
|
||||
eth: 0,
|
||||
ocn: 0
|
||||
},
|
||||
network: '',
|
||||
web3: DEFAULT_WEB3,
|
||||
account: '',
|
||||
ocean: {} as any,
|
||||
requestFromFaucet: () => requestFromFaucet(''),
|
||||
loginMetamask: () => this.loginMetamask(),
|
||||
switchNetwork: (network: string, config: Config) =>
|
||||
this.switchNetwork(network, config),
|
||||
loginBurnerWallet: () => this.loginBurnerWallet(),
|
||||
logoutBurnerWallet: () => this.logoutBurnerWallet(),
|
||||
loadOcean: (config: Config) => this.loadOcean(config),
|
||||
message: 'Connecting to Ocean...'
|
||||
}
|
||||
|
||||
private loadOcean = async (config: Config) => {
|
||||
const { ocean } = await provideOcean({
|
||||
web3Provider: this.state.web3,
|
||||
...config
|
||||
})
|
||||
this.setState({ ocean, isLoading: false }, () => {
|
||||
this.initNetworkPoll()
|
||||
this.initAccountsPoll()
|
||||
this.fetchNetwork()
|
||||
this.fetchAccounts()
|
||||
})
|
||||
}
|
||||
|
||||
private bootstrap = async () => {
|
||||
const logType = localStorage.getItem('logType')
|
||||
const metamaskProvider = new MetamaskProvider()
|
||||
|
||||
switch (logType) {
|
||||
case 'Metamask':
|
||||
if (
|
||||
(await metamaskProvider.isAvailable()) &&
|
||||
(await metamaskProvider.isLogged())
|
||||
) {
|
||||
const web3 = metamaskProvider.getProvider()
|
||||
this.setState(
|
||||
private switchNetwork = (network: string, config: Config) => {
|
||||
console.log({ network, config, oceanConfig })
|
||||
const nodeUrl: any = config.nodeUri
|
||||
this.setState(
|
||||
{
|
||||
isLogged: true,
|
||||
web3
|
||||
network,
|
||||
web3: new Web3(new Web3.providers.HttpProvider(nodeUrl))
|
||||
},
|
||||
() =>
|
||||
this.loadOcean({
|
||||
web3Provider: this.state.web3,
|
||||
...config
|
||||
})
|
||||
)
|
||||
}
|
||||
|
||||
private loginMetamask = async () => {
|
||||
console.log('loginMetamask')
|
||||
const metamaskProvider = new MetamaskProvider()
|
||||
await metamaskProvider.startLogin()
|
||||
const web3 = metamaskProvider.getProvider()
|
||||
this.setState(
|
||||
{
|
||||
isLogged: true,
|
||||
isBurner: false,
|
||||
web3
|
||||
},
|
||||
() => {
|
||||
this.loadOcean({
|
||||
web3Provider: this.state.web3,
|
||||
...oceanConfig
|
||||
})
|
||||
this.loadOcean({
|
||||
web3Provider: this.state.web3,
|
||||
...oceanConfig
|
||||
})
|
||||
}
|
||||
)
|
||||
} else {
|
||||
this.loadDefaultWeb3()
|
||||
)
|
||||
}
|
||||
|
||||
private loginBurnerWallet = async () => {
|
||||
console.log('loginMetamask')
|
||||
const burnerwalletProvider = new BurnerWalletProvider()
|
||||
await burnerwalletProvider.startLogin()
|
||||
const web3 = burnerwalletProvider.getProvider()
|
||||
this.setState(
|
||||
{
|
||||
isLogged: true,
|
||||
isBurner: true,
|
||||
web3
|
||||
},
|
||||
() => {
|
||||
this.loadOcean({
|
||||
web3Provider: this.state.web3,
|
||||
...oceanConfig
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
private logoutBurnerWallet = async () => {
|
||||
const burnerwalletProvider = new BurnerWalletProvider()
|
||||
await burnerwalletProvider.logout()
|
||||
}
|
||||
|
||||
private accountsInterval: any = null
|
||||
|
||||
private networkInterval: any = null
|
||||
|
||||
public async componentDidMount() {
|
||||
await this.bootstrap()
|
||||
}
|
||||
|
||||
private initAccountsPoll() {
|
||||
if (!this.accountsInterval) {
|
||||
this.accountsInterval = setInterval(
|
||||
this.fetchAccounts,
|
||||
POLL_ACCOUNTS
|
||||
)
|
||||
}
|
||||
break
|
||||
case 'BurnerWallet':
|
||||
this.loginBurnerWallet()
|
||||
break
|
||||
default:
|
||||
this.loginBurnerWallet()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
private fetchAccounts = async () => {
|
||||
const { ocean, isLogged } = this.state
|
||||
|
||||
if (isLogged) {
|
||||
let accounts
|
||||
|
||||
// Modern dapp browsers
|
||||
if (window.ethereum && !isLogged) {
|
||||
// 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()
|
||||
}
|
||||
|
||||
accounts = await ocean.accounts.list()
|
||||
|
||||
if (accounts.length > 0) {
|
||||
const account = await accounts[0].getId()
|
||||
|
||||
if (account !== this.state.account) {
|
||||
this.setState({
|
||||
account,
|
||||
isLogged: true,
|
||||
requestFromFaucet: () => requestFromFaucet(account)
|
||||
})
|
||||
|
||||
await this.fetchBalance(accounts[0])
|
||||
private initNetworkPoll() {
|
||||
if (!this.networkInterval) {
|
||||
this.networkInterval = setInterval(this.fetchNetwork, POLL_NETWORK)
|
||||
}
|
||||
} else {
|
||||
!isLogged && this.setState({ isLogged: false, account: '' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private fetchBalance = async (account: Account) => {
|
||||
const balance = await account.getBalance()
|
||||
const { eth, ocn } = balance
|
||||
if (eth !== this.state.balance.eth || ocn !== this.state.balance.ocn) {
|
||||
this.setState({ balance: { eth, ocn } })
|
||||
private loadDefaultWeb3 = async () => {
|
||||
console.log('loadDefaultWeb3')
|
||||
this.setState(
|
||||
{
|
||||
isLogged: false,
|
||||
isBurner: false,
|
||||
web3: DEFAULT_WEB3
|
||||
},
|
||||
() => {
|
||||
this.loadOcean({
|
||||
web3Provider: this.state.web3,
|
||||
...oceanConfig
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
private fetchNetwork = async () => {
|
||||
const { ocean } = this.state
|
||||
let network = 'Unknown'
|
||||
if (ocean.keeper) {
|
||||
network = await ocean.keeper.getNetworkName()
|
||||
private loadOcean = async (config: Config) => {
|
||||
console.log('load ocean', config)
|
||||
const { ocean } = await provideOcean({
|
||||
web3Provider: this.state.web3,
|
||||
...config
|
||||
})
|
||||
this.setState({ ocean, isLoading: false }, () => {
|
||||
this.initNetworkPoll()
|
||||
this.initAccountsPoll()
|
||||
this.fetchNetwork()
|
||||
this.fetchAccounts()
|
||||
})
|
||||
}
|
||||
network !== this.state.network && this.setState({ network })
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<User.Provider value={this.state}>
|
||||
<MarketProvider ocean={this.state.ocean}>
|
||||
<NetworkSwitcher />
|
||||
{this.props.children}
|
||||
</MarketProvider>
|
||||
</User.Provider>
|
||||
)
|
||||
}
|
||||
private bootstrap = async () => {
|
||||
const logType = localStorage.getItem('logType')
|
||||
const metamaskProvider = new MetamaskProvider()
|
||||
|
||||
console.log('BOOTSTRAP', { logType })
|
||||
|
||||
switch (logType) {
|
||||
case 'Metamask':
|
||||
if (
|
||||
(await metamaskProvider.isAvailable()) &&
|
||||
(await metamaskProvider.isLogged())
|
||||
) {
|
||||
const web3 = metamaskProvider.getProvider()
|
||||
this.setState(
|
||||
{
|
||||
isLogged: true,
|
||||
web3
|
||||
},
|
||||
() => {
|
||||
this.loadOcean({
|
||||
web3Provider: this.state.web3,
|
||||
...oceanConfig
|
||||
})
|
||||
}
|
||||
)
|
||||
} else {
|
||||
this.loadDefaultWeb3()
|
||||
}
|
||||
break
|
||||
case 'BurnerWallet':
|
||||
this.loginBurnerWallet()
|
||||
break
|
||||
default:
|
||||
this.loginBurnerWallet()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
private fetchAccounts = async () => {
|
||||
const { ocean, isLogged } = this.state
|
||||
|
||||
if (isLogged) {
|
||||
let accounts
|
||||
|
||||
// Modern dapp browsers
|
||||
if (window.ethereum && !isLogged) {
|
||||
// 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()
|
||||
}
|
||||
|
||||
accounts = await ocean.accounts.list()
|
||||
|
||||
if (accounts.length > 0) {
|
||||
const account = await accounts[0].getId()
|
||||
|
||||
if (account !== this.state.account) {
|
||||
this.setState({
|
||||
account,
|
||||
isLogged: true,
|
||||
requestFromFaucet: () => requestFromFaucet(account)
|
||||
})
|
||||
|
||||
await this.fetchBalance(accounts[0])
|
||||
}
|
||||
} else {
|
||||
!isLogged &&
|
||||
this.setState({
|
||||
isLogged: false,
|
||||
account: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private fetchBalance = async (account: Account) => {
|
||||
const balance = await account.getBalance()
|
||||
const { eth, ocn } = balance
|
||||
if (eth !== this.state.balance.eth || ocn !== this.state.balance.ocn) {
|
||||
this.setState({ balance: { eth, ocn } })
|
||||
}
|
||||
}
|
||||
|
||||
private fetchNetwork = async () => {
|
||||
const { ocean } = this.state
|
||||
console.log('1 this.state.network', this.state.network)
|
||||
let network = 'Unknown'
|
||||
if (ocean.keeper) {
|
||||
network = await ocean.keeper.getNetworkName()
|
||||
}
|
||||
|
||||
network !== this.state.network && this.setState({ network })
|
||||
console.log('2 this.state.network', this.state.network)
|
||||
}
|
||||
|
||||
public render() {
|
||||
return (
|
||||
<User.Provider value={this.state}>
|
||||
<MarketProvider ocean={this.state.ocean}>
|
||||
<NetworkSwitcher />
|
||||
{this.props.children}
|
||||
</MarketProvider>
|
||||
</User.Provider>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,37 @@
|
|||
import React from 'react'
|
||||
import { Config } from '@oceanprotocol/squid'
|
||||
|
||||
export const User = React.createContext({
|
||||
isLogged: false,
|
||||
isBurner: false,
|
||||
isWeb3Capable: false,
|
||||
isLoading: false,
|
||||
account: '',
|
||||
web3: {},
|
||||
ocean: {},
|
||||
balance: {
|
||||
eth: 0,
|
||||
ocn: 0
|
||||
},
|
||||
network: '',
|
||||
requestFromFaucet: () => {
|
||||
/* empty */
|
||||
},
|
||||
loginMetamask: () => {
|
||||
/* empty */
|
||||
},
|
||||
loginBurnerWallet: () => {
|
||||
/* empty */
|
||||
},
|
||||
message: ''
|
||||
isLogged: false,
|
||||
isBurner: false,
|
||||
isWeb3Capable: false,
|
||||
isLoading: false,
|
||||
account: '',
|
||||
web3: {},
|
||||
ocean: {},
|
||||
balance: {
|
||||
eth: 0,
|
||||
ocn: 0
|
||||
},
|
||||
network: '',
|
||||
switchNetwork: (network: string, config: Config) => {
|
||||
/* empty */
|
||||
},
|
||||
requestFromFaucet: () => {
|
||||
/* empty */
|
||||
},
|
||||
loginMetamask: () => {
|
||||
/* empty */
|
||||
},
|
||||
loginBurnerWallet: () => {
|
||||
/* empty */
|
||||
},
|
||||
message: ''
|
||||
})
|
||||
|
||||
export const Market = React.createContext({
|
||||
totalAssets: 0,
|
||||
categories: [''],
|
||||
network: '',
|
||||
networkMatch: false
|
||||
totalAssets: 0,
|
||||
categories: [''],
|
||||
network: '',
|
||||
networkMatch: false
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue