oceanprotocol/commons
1
0
Fork 0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00
Code Releases Activity

move web3/ocean detection out of App.jsx

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-04-15 11:40:25 +02:00
parent 3a8d6ea284
commit adab473f4e
Signed by: m
GPG Key ID: 606EEEF3C479A91F
17 changed files with 309 additions and 305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

265
client/src/App.tsx
View File

@ -1,273 +1,44 @@
import React, { Component } from 'react'
import Web3 from 'web3'
import { BrowserRouter as Router } from 'react-router-dom'
import { Logger } from '@oceanprotocol/squid'
import Header from './components/organisms/Header'
import Footer from './components/organisms/Footer'
import Spinner from './components/atoms/Spinner'
import { User } from './context/User'
import { provideOcean } from './ocean'
import { User } from './context'
import UserProvider from './context/UserProvider'
import Routes from './Routes'
import './styles/global.scss'
import styles from './App.module.scss'
import {
nodeHost,
nodePort,
nodeScheme,
faucetHost,
faucetPort,
faucetScheme
} from './config/config'
const POLL_ACCOUNTS = 1000 // every 1s
const POLL_NETWORK = POLL_ACCOUNTS * 60 // every 1 min
declare global {
interface Window {
web3: Web3
ethereum: any
}
}
interface AppState {
isLogged: boolean
isLoading: boolean
isWeb3: boolean
isNile: boolean
account: string
balance: {
eth: number
ocn: number
}
network: string
web3: Web3
ocean: any
requestFromFaucet(): void
message: string
}
class App extends Component<{}, AppState> {
private accountsInterval: any = null
private networkInterval: any = null
private requestFromFaucet = async () => {
try {
const url = `${faucetScheme}://${faucetHost}:${faucetPort}/faucet`
const response = await fetch(url, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
address: this.state.account,
agent: 'commons'
})
})
return response.json()
} catch (error) {
Logger.log('requestFromFaucet', error)
}
}
public state = {
isLogged: false,
isLoading: true,
isWeb3: false,
isNile: false,
balance: {
eth: 0,
ocn: 0
},
network: '',
web3: new Web3(
new Web3.providers.HttpProvider(
`${nodeScheme}://${nodeHost}:${nodePort}`
)
),
account: '',
ocean: {} as any,
requestFromFaucet: this.requestFromFaucet,
message: 'Connecting to Ocean...'
}
public async componentDidMount() {
await this.bootstrap()
this.initAccountsPoll()
this.initNetworkPoll()
}
private bootstrap = async () => {
try {
//
// Start with Web3 detection
//
this.setState({ message: 'Setting up Web3...' })
// Modern dapp browsers
if (window.ethereum) {
window.web3 = new Web3(window.ethereum)
this.setState({ isWeb3: true })
}
// Legacy dapp browsers
else if (window.web3) {
window.web3 = new Web3(window.web3.currentProvider)
this.setState({ isWeb3: true })
}
// Non-dapp browsers
else {
this.setState({ isWeb3: false })
}
// Modern & legacy dapp browsers
if (this.state.isWeb3) {
//
// Detecting network with window.web3
//
let isNile
await window.web3.eth.net.getId((err, netId) => {
if (err) return
isNile = netId === 8995
const network = isNile ? 'Nile' : netId.toString()
if (
isNile !== this.state.isNile ||
network !== this.state.network
) {
this.setState({ isNile, network })
}
})
if (!isNile) {
window.web3 = this.state.web3
}
//
// Provide the Ocean
//
this.setState({ message: 'Connecting to Ocean...' })
const { ocean } = await provideOcean(window.web3)
this.setState({ ocean, isLoading: false })
// Set proper network names now that we have Ocean
this.fetchNetwork()
// Get accounts
this.fetchAccounts()
}
// Non-dapp browsers
else {
this.setState({ message: 'Connecting to Ocean...' })
const { ocean } = await provideOcean(this.state.web3)
this.setState({ ocean, isLoading: false })
this.fetchNetwork()
}
} catch (e) {
// error in bootstrap process
// show error connecting to ocean
Logger.log('web3 error', e)
this.setState({ isLoading: false })
}
}
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) {
// Modern dapp browsers
if (window.ethereum) {
if (!isLogged && isNile) {
try {
await window.ethereum.enable()
} catch (error) {
// User denied account access...
this.accountsInterval = null
return
}
}
}
const accounts = await ocean.accounts.list()
if (accounts.length > 0) {
const account = accounts[0].getId()
if (account !== this.state.account) {
this.setState({ account, isLogged: true })
}
const balance = await accounts[0].getBalance()
if (
balance.eth !== this.state.balance.eth ||
balance.ocn !== this.state.balance.ocn
) {
this.setState({ balance })
}
} else {
isLogged !== false &&
this.setState({ isLogged: false, account: '' })
}
}
}
private fetchNetwork = async () => {
const { ocean, isWeb3 } = this.state
if (isWeb3) {
const network = await ocean.keeper.getNetworkName()
const isNile = network === 'Nile'
network !== this.state.network && this.setState({ isNile, network })
}
}
export default class App extends Component {
public render() {
return (
<div className={styles.app}>
<User.Provider value={this.state}>
<UserProvider>
<Router>
<>
<Header />
<main className={styles.main}>
{this.state.isLoading ? (
<div className={styles.loader}>
<Spinner message={this.state.message} />
</div>
) : (
<Routes />
)}
<User.Consumer>
{states =>
states.isLoading ? (
<div className={styles.loader}>
<Spinner
message={states.message}
/>
</div>
) : (
<Routes />
)
}
</User.Consumer>
</main>
<Footer />
</>
</Router>
</User.Provider>
</UserProvider>
</div>
)
}
}
export default App

2
client/src/components/molecules/AccountStatus/Indicator.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'
import cx from 'classnames'
import { User } from '../../../context/User'
import { User } from '../../../context'
import styles from './Indicator.module.scss'
const Indicator = ({

2
client/src/components/molecules/AccountStatus/Popover.tsx
View File

@ -1,6 +1,6 @@
import React, { PureComponent } from 'react'
import Dotdotdot from 'react-dotdotdot'
import { User } from '../../../context/User'
import { User } from '../../../context'
import styles from './Popover.module.scss'
export default class Popover extends PureComponent<{

2
client/src/components/organisms/AssetsUser.tsx
View File

@ -1,7 +1,7 @@
import React, { PureComponent } from 'react'
import { Link } from 'react-router-dom'
import { Logger } from '@oceanprotocol/squid'
import { User } from '../../context/User'
import { User } from '../../context'
import Spinner from '../atoms/Spinner'
import Asset from '../molecules/Asset'
import styles from './AssetsUser.module.scss'

2
client/src/components/organisms/Header.tsx
View File

@ -1,7 +1,7 @@
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/User'
import { User } from '../../context'
import AccountStatus from '../molecules/AccountStatus'
import styles from './Header.module.scss'

62
client/src/components/organisms/Web3message.tsx
View File

@ -1,64 +1,36 @@
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/User'
import { User } from '../../context'
import content from '../../data/web3message.json'
export default class Web3message extends PureComponent {
private noWeb3 = () => (
private message = (message: string, account?: string) => (
<div className={styles.message}>
<AccountStatus className={styles.status} /> 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.
</div>
)
private unlockAccount = () => (
<div className={styles.message}>
<AccountStatus className={styles.status} /> No accounts detected.
For publishing and downloading an asset you need to unlock your Web3
account.
</div>
)
private haveAccount = (account: string) => (
<div className={styles.message}>
<AccountStatus className={styles.status} />
<Dotdotdot clamp={1}>
Connected with account
<code className={styles.account}>{account}</code>
</Dotdotdot>
</div>
)
private wrongNetwork = (network: string) => (
<div className={styles.message}>
<AccountStatus className={styles.status} /> Not connected to Nile
network, but to {network}.<br />
Please connect in MetaMask with Custom RPC{' '}
<code>{`https://nile.dev-ocean.com`}</code>
<AccountStatus className={styles.status} />{' '}
{account ? (
<Dotdotdot clamp={1}>
{message}
<code className={styles.account}>{account}</code>
</Dotdotdot>
) : (
<span dangerouslySetInnerHTML={{ __html: message }} />
)}
</div>
)
public render() {
const { isWeb3, isNile, isLogged, network, account } = this.context
const { isWeb3, isNile, isLogged, account } = this.context
return !isWeb3
? this.noWeb3()
? this.message(content.noweb3)
: !isNile
? this.wrongNetwork(network)
? this.message(content.wrongNetwork)
: !isLogged
? this.unlockAccount()
? this.message(content.noAccount)
: isLogged
? this.haveAccount(account)
? this.message(content.hasAccount, account)
: null
}
}

254
client/src/context/UserProvider.tsx Normal file
View File

@ -0,0 +1,254 @@
import React, { Component } from 'react'
import Web3 from 'web3'
import { Logger } from '@oceanprotocol/squid'
import { User } from '.'
import { provideOcean } from '../ocean'
import {
nodeHost,
nodePort,
nodeScheme,
faucetHost,
faucetPort,
faucetScheme
} from '../config/config'
const POLL_ACCOUNTS = 1000 // every 1s
const POLL_NETWORK = POLL_ACCOUNTS * 60 // every 1 min
declare global {
interface Window {
web3: Web3
ethereum: {
enable(): void
host: string
supportsSubscriptions(): boolean
send(method: string, parameters: any[]): Promise<any[]>
sendBatch(methods: any[], moduleInstance: any): Promise<any[]>
}
}
}
interface UserProviderState {
isLogged: boolean
isLoading: boolean
isWeb3: boolean
isNile: boolean
account: string
balance: {
eth: number
ocn: number
}
network: string
web3: Web3
ocean: any
requestFromFaucet(): Promise<{}>
message: string
}
export default class UserProvider extends Component<{}, UserProviderState> {
private accountsInterval: any = null
private networkInterval: any = null
private requestFromFaucet = async () => {
try {
const url = `${faucetScheme}://${faucetHost}:${faucetPort}/faucet`
const response = await fetch(url, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
address: this.state.account,
agent: 'commons'
})
})
return response.json()
} catch (error) {
Logger.log('requestFromFaucet', error)
}
}
public state = {
isLogged: false,
isLoading: true,
isWeb3: false,
isNile: false,
balance: {
eth: 0,
ocn: 0
},
network: '',
web3: new Web3(
new Web3.providers.HttpProvider(
`${nodeScheme}://${nodeHost}:${nodePort}`
)
),
account: '',
ocean: {} as any,
requestFromFaucet: this.requestFromFaucet,
message: 'Connecting to Ocean...'
}
public async componentDidMount() {
await this.bootstrap()
this.initAccountsPoll()
this.initNetworkPoll()
}
private bootstrap = async () => {
try {
//
// Start with Web3 detection only
//
this.setState({ message: 'Setting up Web3...' })
// Modern dapp browsers
if (window.ethereum) {
window.web3 = new Web3(window.ethereum)
this.setState({ isWeb3: true })
}
// Legacy dapp browsers
else if (window.web3) {
window.web3 = new Web3(window.web3.currentProvider)
this.setState({ isWeb3: true })
}
// Non-dapp browsers
else {
this.setState({ isWeb3: false })
}
// Modern & legacy dapp browsers
if (this.state.isWeb3) {
//
// Detecting network with window.web3
//
let isNile
await window.web3.eth.net.getId((err, netId) => {
if (err) return
isNile = netId === 8995
const network = isNile ? 'Nile' : netId.toString()
if (
isNile !== this.state.isNile ||
network !== this.state.network
) {
this.setState({ isNile, network })
}
})
if (!isNile) {
window.web3 = this.state.web3
}
//
// Provide the Ocean
//
this.setState({ message: 'Connecting to Ocean...' })
const { ocean } = await provideOcean(window.web3)
this.setState({ ocean })
// Set proper network names now that we have Ocean
await this.fetchNetwork()
// Get accounts
await this.fetchAccounts()
this.setState({ isLoading: false })
}
// Non-dapp browsers
else {
this.setState({ message: 'Connecting to Ocean...' })
const { ocean } = await provideOcean(this.state.web3)
this.setState({ ocean, isLoading: false })
this.fetchNetwork()
}
} catch (e) {
// error in bootstrap process
// show error connecting to ocean
Logger.log('web3 error', e)
this.setState({ isLoading: false })
}
}
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) {
// Modern dapp browsers
if (window.ethereum) {
if (!isLogged && isNile) {
try {
await window.ethereum.enable()
} catch (error) {
// User denied account access...
this.accountsInterval = null
return
}
}
}
const accounts = await ocean.accounts.list()
if (accounts.length > 0) {
const account = accounts[0].getId()
if (account !== this.state.account) {
this.setState({ account, isLogged: true })
}
const balance = await accounts[0].getBalance()
if (
balance.eth !== this.state.balance.eth ||
balance.ocn !== this.state.balance.ocn
) {
this.setState({ balance })
}
} else {
isLogged !== false &&
this.setState({ isLogged: false, account: '' })
}
}
}
private fetchNetwork = async () => {
const { ocean, isWeb3 } = this.state
if (isWeb3) {
const network = await ocean.keeper.getNetworkName()
const isNile = network === 'Nile'
network !== this.state.network && this.setState({ isNile, network })
}
}
public render() {
return (
<User.Provider value={this.state}>
{this.props.children}
</User.Provider>
)
}
}

3
client/src/context/User.ts → client/src/context/index.tsx
View File

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

6
client/src/data/web3message.json Normal file
View File

@ -0,0 +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.",
"hasAccount": "Connected with account ",
"wrongNetwork": "Not connected to Nile network.<br />Please connect in MetaMask with Custom RPC <code>https://nile.dev-ocean.com</code>"
}

2
client/src/routes/Details/AssetFile.tsx
View File

@ -3,7 +3,7 @@ import { Logger } from '@oceanprotocol/squid'
import filesize from 'filesize'
import Button from '../../components/atoms/Button'
import Spinner from '../../components/atoms/Spinner'
import { User } from '../../context/User'
import { User } from '../../context'
import styles from './AssetFile.module.scss'
import ReactGA from 'react-ga'

2
client/src/routes/Details/AssetFilesDetails.tsx
View File

@ -1,6 +1,6 @@
import React, { PureComponent } from 'react'
import AssetFile from './AssetFile'
import { User } from '../../context/User'
import { User } from '../../context'
import Web3message from '../../components/organisms/Web3message'
import styles from './AssetFilesDetails.module.scss'

2
client/src/routes/Details/index.tsx
View File

@ -1,7 +1,7 @@
import React, { Component } from 'react'
import Route from '../../components/templates/Route'
import Spinner from '../../components/atoms/Spinner'
import { User } from '../../context/User'
import { User } from '../../context'
import AssetDetails from './AssetDetails'
import stylesApp from '../../App.module.scss'

2
client/src/routes/Faucet.tsx
View File

@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'
import Route from '../components/templates/Route'
import Button from '../components/atoms/Button'
import Spinner from '../components/atoms/Spinner'
import { User } from '../context/User'
import { User } from '../context'
import Web3message from '../components/organisms/Web3message'
import styles from './Faucet.module.scss'

2
client/src/routes/History.tsx
View File

@ -2,7 +2,7 @@ import React, { Component } from 'react'
import Route from '../components/templates/Route'
import AssetsUser from '../components/organisms/AssetsUser'
import Web3message from '../components/organisms/Web3message'
import { User } from '../context/User'
import { User } from '../context'
export default class History extends Component {
public render() {

2
client/src/routes/Publish/Step.tsx
View File

@ -3,7 +3,7 @@ import Input from '../../components/atoms/Form/Input'
import Label from '../../components/atoms/Form/Label'
import Row from '../../components/atoms/Form/Row'
import Button from '../../components/atoms/Button'
import { User } from '../../context/User'
import { User } from '../../context'
import Files from './Files/'
import StepRegisterContent from './StepRegisterContent'
import styles from './Step.module.scss'

2
client/src/routes/Publish/index.tsx
View File

@ -3,7 +3,7 @@ import { Logger } from '@oceanprotocol/squid'
import Route from '../../components/templates/Route'
import Form from '../../components/atoms/Form/Form'
import AssetModel from '../../models/AssetModel'
import { User } from '../../context/User'
import { User } from '../../context'
import Web3message from '../../components/organisms/Web3message'
import Step from './Step'
import Progress from './Progress'

2
client/src/routes/Search.tsx
View File

@ -3,7 +3,7 @@ import queryString from 'query-string'
import { Logger } from '@oceanprotocol/squid'
import Spinner from '../components/atoms/Spinner'
import Route from '../components/templates/Route'
import { User } from '../context/User'
import { User } from '../context'
import Asset from '../components/molecules/Asset'
import Pagination from '../components/molecules/Pagination'
import styles from './Search.module.scss'