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

web2 and web3

Browse Source
This commit is contained in:
Jernej Pregelj 2019-04-06 17:55:24 +02:00
parent 699b45da0e
commit 00e69646ad
9 changed files with 136 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
client/src/App.tsx
View File

@ -39,7 +39,7 @@ interface AppState {
}
network: string
web3: Web3
ocean: {}
ocean: any
startLogin: () => void
message: string
}
@ -95,7 +95,7 @@ class App extends Component<{}, AppState> {
)
),
account: '',
ocean: {},
ocean: {} as any,
startLogin: this.startLogin,
requestFromFaucet: this.requestFromFaucet,
message: 'Connecting to Ocean...'
@ -106,73 +106,77 @@ class App extends Component<{}, AppState> {
}
private startLoginProcess = async () => {
if (window.web3) {
const web3 = new Web3(window.web3.currentProvider)
try {
const accounts = await web3.eth.getAccounts()
try {
if (this.state.isWeb3 && window.ethereum) {
await window.ethereum.enable()
const accounts = await this.state.ocean.accounts.list()
if (accounts.length > 0) {
const balance = await accounts[0].getBalance()
this.setState({
isLogged: true,
isWeb3: true,
account: accounts[0],
web3
balance,
account: accounts[0].getId()
})
} else {
if (accounts.length === 0 && window.ethereum) {
await window.ethereum.enable()
const newAccounts = await web3.eth.getAccounts()
if (newAccounts.length > 0) {
this.setState({
isLogged: true,
isWeb3: true,
account: newAccounts[0],
web3
})
} else {
// failed to unlock
}
} else {
// no unlock procedure
}
// not unlocked
}
} catch (e) {
// something went wrong, show error?
} else {
// no metamask/mist, show installation guide!
}
} else {
// no metamask/mist, show installation guide!
} catch (e) {
Logger.log('error logging', e)
// error in logging process
// show error
// rerun bootstrap process?
}
}
private bootstrap = async () => {
if (window.web3) {
this.setState({ isWeb3: true })
const web3 = new Web3(window.web3.currentProvider)
try {
const accounts = await web3.eth.getAccounts()
try {
if (window.web3) {
const web3 = new Web3(window.web3.currentProvider)
const { ocean } = await provideOcean(web3)
const accounts = await ocean.accounts.list()
const network = await ocean.keeper.getNetworkName()
const isNile = network === 'Nile'
if (accounts.length > 0) {
const balance = await accounts[0].getBalance()
this.setState({
isWeb3: true,
isLogged: true,
account: accounts[0],
web3
isNile,
ocean,
web3,
balance,
network,
account: accounts[0].getId(),
isLoading: false,
})
} else {
this.setState({
isWeb3: true,
isNile,
ocean,
web3,
network,
isLoading: false
})
}
} catch (e) {
Logger.log('web3 error', e)
} else {
const { ocean } = await provideOcean(this.state.web3)
const network = await ocean.keeper.getNetworkName()
const isNile = network === 'Nile'
this.setState({
isNile,
ocean,
network,
isLoading: false
})
}
}
try {
const { ocean } = await provideOcean()
this.setState({
isLoading: false,
ocean
})
const accounts = await ocean.accounts.list()
const balance = await accounts[0].getBalance()
const network = await ocean.keeper.getNetworkName()
const isNile = network === 'Nile'
this.setState({ balance, network, isNile })
} catch (e) {
Logger.log('ocean/balance error', e)
// error in bootstrap process
// show error connecting to ocean
Logger.log('web3 error', e)
this.setState({
isLoading: false
})

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

@ -4,6 +4,7 @@ import { Logger } from '@oceanprotocol/squid'
import { User } from '../../context/User'
import Spinner from '../atoms/Spinner'
import Asset from '../molecules/Asset'
import Web3message from './Web3message'
import styles from './AssetsUser.module.scss'
export default class AssetsUser extends PureComponent<
@ -49,7 +50,7 @@ export default class AssetsUser extends PureComponent<
public render() {
return (
this.context.isNile &&
this.context.account && (
this.context.account ? (
<div className={styles.assetsUser}>
{this.props.recent && (
<h2 className={styles.subTitle}>
@ -89,6 +90,8 @@ export default class AssetsUser extends PureComponent<
</div>
)}
</div>
) : (
<Web3message />
)
)
}

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

@ -26,9 +26,9 @@ export default class Web3message extends PureComponent {
public noWeb3() {
return (
<div className={styles.message}>
<AccountStatus className={styles.status} /> No Web3 Browser. For
publishing an asset you need to{' '}
<a href="https://docs.oceanprotocol.com/tutorials/metamask-setup/">
<AccountStatus className={styles.status} /> Not a Web3 Browser. For
publishing or consuming an asset you need to{' '}
<a href="https://docs.oceanprotocol.com/tutorials/metamask-setup/" target="_blank">
setup MetaMask
</a>{' '}
or use any other Web3-capable plugin or browser.

9
client/src/data/menu.json
View File

@ -1,18 +1,15 @@
[
{
"title": "Publish",
"link": "/publish",
"web3": true
"link": "/publish"
},
{
"title": "History",
"link": "/history",
"web3": true
"link": "/history"
},
{
"title": "Faucet",
"link": "/faucet",
"web3": true
"link": "/faucet"
},
{
"title": "About",

6
client/src/ocean.ts
View File

@ -1,4 +1,5 @@
import { Ocean } from '@oceanprotocol/squid'
import Web3 from 'web3'
import {
aquariusHost,
@ -20,7 +21,7 @@ import {
verbose
} from './config/config'
export async function provideOcean() {
export async function provideOcean(web3provider: Web3) {
const nodeUri = `${nodeScheme}://${nodeHost}:${nodePort}`
const aquariusUri = `${aquariusScheme}://${aquariusHost}:${aquariusPort}`
const brizoUri = `${brizoScheme}://${brizoHost}:${brizoPort}`
@ -28,6 +29,7 @@ export async function provideOcean() {
const secretStoreUri = `${secretStoreScheme}://${secretStoreHost}:${secretStorePort}`
const config = {
web3provider,
nodeUri,
aquariusUri,
brizoUri,
@ -37,7 +39,7 @@ export async function provideOcean() {
verbose
}
const ocean = await Ocean.getInstance(config)
const ocean: Ocean = await Ocean.getInstance(config)
return { ocean }
}

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

@ -1,9 +1,9 @@
import React, { PureComponent } from 'react'
import { Logger } from '@oceanprotocol/squid'
import filesize from 'filesize'
import { User } from '../../context/User'
import Button from '../../components/atoms/Button'
import Spinner from '../../components/atoms/Spinner'
import { User } from '../../context/User'
import styles from './AssetFile.module.scss'
interface AssetFileProps {
@ -79,13 +79,27 @@ export default class AssetFile extends PureComponent<
{this.state.isLoading ? (
<Spinner message={this.state.message} />
) : (
<Button
primary
className={styles.buttonMain}
onClick={() => this.purchaseAsset(ddo, file.index)}
>
Get file
</Button>
<User.Consumer>
{states =>
states.isLogged ? (
<Button
primary
className={styles.buttonMain}
onClick={() => this.purchaseAsset(ddo, file.index)}
>
Get file
</Button>
) :
states.isWeb3 && (
<Button
primary
className={styles.buttonMain}
onClick={states.startLogin}>
Get file
</Button>
)
}
</User.Consumer>
)}
{this.state.error !== '' && (

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

@ -1,5 +1,7 @@
import React, { PureComponent } from 'react'
import AssetFile from './AssetFile'
import { User } from '../../context/User'
import Web3message from '../../components/organisms/Web3message'
import styles from './AssetFilesDetails.module.scss'
export default class AssetFilesDetails extends PureComponent<{
@ -16,6 +18,13 @@ export default class AssetFilesDetails extends PureComponent<{
<AssetFile key={file.index} ddo={ddo} file={file} />
))}
</div>
<User.Consumer>
{states =>
(!states.isNile || !states.isLogged) && (
<Web3message />
)
}
</User.Consumer>
</>
) : (
<div>No files attached.</div>

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

@ -47,14 +47,25 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
private RequestMarkup = () => (
<User.Consumer>
{states => (
<Button
primary
onClick={() => this.getTokens(states.requestFromFaucet)}
>
Request Ether
</Button>
)}
{states =>
states.isLogged ? (
<Button
primary
onClick={() => this.getTokens(states.requestFromFaucet)}
>
Request Ether
</Button>
) :
states.isWeb3 ? (
<Button onClick={states.startLogin}>
Request Ether (unlock Metamask)
</Button>
) : (
<Button onClick={(e: Event) => window.open("https://docs.oceanprotocol.com/tutorials/metamask-setup/", "_blank")}>
Request Ether (install Metamask)
</Button>
)
}
</User.Consumer>
)
@ -93,7 +104,13 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
title="Faucet"
description="Shower yourself with some Ether for the Ocean POA network."
>
<Web3message />
<User.Consumer>
{states =>
!states.isNile && (
<Web3message />
)
}
</User.Consumer>
<this.ActionMarkup />
</Route>

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

@ -158,9 +158,17 @@ export default class Step extends PureComponent<StepProps, {}> {
{states =>
states.isLogged ? (
<Button primary>Register asset</Button>
) : (
) :
states.isWeb3 ? (
<Button onClick={states.startLogin}>
Register asset (login first)
Register asset (unlock Metamask)
</Button>
) : (
<Button onClick={(e: Event) => {
e.preventDefault()
window.open("https://docs.oceanprotocol.com/tutorials/metamask-setup/", "_blank")
}}>
Register asset (install Metamask)
</Button>
)
}