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

isWeb3 state, App loading, publish states, consume flow

Browse Source
This commit is contained in:
Jernej Pregelj 2019-02-11 16:53:55 +01:00
parent 80d2a07f44
commit 767c4afcc5
6 changed files with 143 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/App.tsx
View File

@ -21,6 +21,7 @@ declare global {
interface AppState {
isLogged: boolean
isLoading: boolean
isWeb3: boolean
web3: Web3
ocean: {}
startLogin: () => void
@ -37,6 +38,7 @@ class App extends Component<{}, AppState> {
public state = {
isLogged: false,
isLoading: true,
isWeb3: false,
web3: new Web3(
new Web3.providers.HttpProvider(
`${nodeScheme}://${nodeHost}:${nodePort}`
@ -51,7 +53,6 @@ class App extends Component<{}, AppState> {
}
private startLoginProcess = async () => {
this.setState({ isLoading: true })
if (window.web3) {
const web3 = new Web3(window.web3.currentProvider)
try {
@ -59,6 +60,7 @@ class App extends Component<{}, AppState> {
if (accounts.length > 0) {
this.setState({
isLogged: true,
isWeb3: true,
web3
})
} else {
@ -66,6 +68,7 @@ class App extends Component<{}, AppState> {
await window.ethereum.enable()
this.setState({
isLogged: true,
isWeb3: true,
web3
})
}
@ -76,11 +79,11 @@ class App extends Component<{}, AppState> {
} else {
// no metamask/mist, show installation guide!
}
this.setState({ isLoading: false })
}
private bootstrap = async () => {
if (window.web3) {
this.setState({ isWeb3: true })
const web3 = new Web3(window.web3.currentProvider)
try {
const accounts = await web3.eth.getAccounts()
@ -94,11 +97,18 @@ class App extends Component<{}, AppState> {
// continue with default
}
}
try {
const { ocean } = await provideOcean()
this.setState({
isLoading: false,
ocean
})
} catch (e) {
// show loading error / unable to initialize ocean
this.setState({
isLoading: false
})
}
}
public render() {
@ -109,9 +119,11 @@ class App extends Component<{}, AppState> {
<>
<Header />
{!this.state.isLoading ? (
<main className={styles.main}>
<Routes />
</main>
) : null}
<Footer />
</>

19
src/components/Web3message.tsx
View File

@ -1,6 +1,7 @@
import React, { PureComponent } from 'react'
import Button from '../components/atoms/Button'
import styles from './Web3message.module.scss'
import { User } from '../context/User'
export default class Web3message extends PureComponent {
public render() {
@ -12,7 +13,9 @@ export default class Web3message extends PureComponent {
return (
<>
{/* IF no Web3 */}
<User.Consumer>
{states =>
!states.isWeb3 ? (
<div className={styles.message}>
<span className={styles.indicator} /> No Web3 Browser. For
publishing an asset you need to use a Web3-capable plugin or
@ -22,19 +25,16 @@ export default class Web3message extends PureComponent {
</a>
.
</div>
{/* IF connected and account locked */}
) : !states.isLogged ? (
<div className={styles.message}>
<span className={styles.indicatorCloseEnough} /> Account
locked. For publishing an asset you need to unlock your Web3
account.
<Button link>Unlock account</Button>
<Button link onClick={states.startLogin}>Unlock account</Button>
</div>
{/* IF connected and unlocked */}
) : states.isLogged ? (
<div className={styles.message}>
<span className={styles.indicatorActive} /> Connected with
account
<span className={styles.indicatorActive} /> Connected with account
<span
className={styles.account}
title="0xfehz2u89nfewhji432ntio43huof42huifewhnuefwo"
@ -42,6 +42,9 @@ export default class Web3message extends PureComponent {
0xfehz2u89n...
</span>
</div>
) : null
}
</User.Consumer>
</>
)
}

1
src/context/User.ts
View File

@ -3,6 +3,7 @@ import React from 'react'
export const User = React.createContext({
isLogged: false,
isLoading: false,
isWeb3: false,
web3: {},
ocean: {},
startLogin: () => {

25
src/routes/Details.tsx
View File

@ -3,6 +3,7 @@ import React, { Component } from 'react'
import Route from '../components/templates/Route'
import Button from '../components/atoms/Button'
import { User } from '../context/User'
import quertString from 'query-string'
interface DetailsState {
ddo: any
@ -26,6 +27,7 @@ export default class Details extends Component<DetailsProps, DetailsState> {
}
private purchaseAsset = async (ddo: any) => {
try {
const account = await this.context.ocean.getAccounts()
const service = ddo.findServiceByType('Access')
const serviceAgreementSignatureResult: any = await this.context.ocean.signServiceAgreement(
@ -33,22 +35,25 @@ export default class Details extends Component<DetailsProps, DetailsState> {
service.serviceDefinitionId,
account[0]
)
Logger.log(
'serviceAgreementSignatureResult',
serviceAgreementSignatureResult
)
await this.context.ocean.initializeServiceAgreement(
ddo.id,
service.serviceDefinitionId,
serviceAgreementSignatureResult.serviceAgreementId,
serviceAgreementSignatureResult.serviceAgreementSignature,
(files: any) =>
Logger.log(
`Got files, first files length in bytes: ${files[0].length}`
),
(files: any) => {
files.forEach((file: any) => {
const parsedUrl: any = quertString.parseUrl(file)
setTimeout(() => {
// eslint-disable-next-line
window.open(parsedUrl.query.url)
}, 100)
})
},
account[0]
)
} catch (e) {
Logger.log('error', e)
}
}
private showDetails = (ddo: any) => {
@ -56,7 +61,7 @@ export default class Details extends Component<DetailsProps, DetailsState> {
<>
<div>{JSON.stringify(this.state.metadata)}</div>
<Button onClick={this.purchaseAsset(ddo)}>
<Button onClick={() => this.purchaseAsset(ddo)}>
Purchase asset
</Button>
</>

40
src/routes/Publish.tsx
View File

@ -1,4 +1,5 @@
import React, { ChangeEvent, Component, FormEvent } from 'react'
import { Logger } from '@oceanprotocol/squid'
import Route from '../components/templates/Route'
import Button from '../components/atoms/Button'
import Form from '../components/atoms/Form/Form'
@ -22,7 +23,9 @@ interface PublishState {
license?: string
copyrightHolder?: string
categories?: string[]
tags?: string[]
tags?: string[],
isPublishing?: boolean,
publishingError?: string
}
class Publish extends Component<{}, PublishState> {
@ -36,7 +39,9 @@ class Publish extends Component<{}, PublishState> {
type: 'dataset' as AssetType,
license: '',
copyrightHolder: '',
categories: ['']
categories: [''],
isPublishing: false,
publishingError: ''
}
public formFields = (entries: any[]) =>
@ -80,8 +85,16 @@ class Publish extends Component<{}, PublishState> {
})
}
private tryAgain = () => {
this.setState({ publishingError: '' })
}
private registerAsset = async (event: FormEvent<HTMLFormElement>) => {
event.preventDefault()
this.setState({
publishingError: '',
isPublishing: true
})
const account = await this.context.ocean.getAccounts()
const newAsset = {
// OEP-08 Attributes
@ -109,8 +122,18 @@ class Publish extends Component<{}, PublishState> {
AssetModel.additionalInformation
)
}
try {
await this.context.ocean.registerAsset(newAsset, account[0])
} catch (e) {
// make readable errors
Logger.log('error:', e)
this.setState({
publishingError: e
})
}
this.setState({
isPublishing: false
})
}
public render() {
@ -120,6 +143,11 @@ class Publish extends Component<{}, PublishState> {
<Route title="Publish">
<Web3message />
{this.state.isPublishing ? (
<div>Please sign with ctypto wallet</div>
) : this.state.publishingError ? (
<div>Something went wrong, <a onClick={() => this.tryAgain()}>try again</a></div>
) : (
<Form
title={form.title}
description={form.description}
@ -131,16 +159,18 @@ class Publish extends Component<{}, PublishState> {
{states =>
states.isLogged ? (
<Button primary>
Register asset (we are logged)
Register asset
</Button>
) : (
<Button primary onClick={states.startLogin}>
<Button onClick={states.startLogin}>
Register asset (login first)
</Button>
)
}
</User.Consumer>
</Form>
)}
</Route>
)
}

8
src/routes/Search.tsx
View File

@ -2,7 +2,7 @@ import queryString from 'query-string'
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import Route from '../components/templates/Route'
import { provideOcean } from '../ocean'
import { User } from '../context/User'
interface SearchState {
results: any[]
@ -17,8 +17,6 @@ export default class Search extends Component<SearchProps, SearchState> {
public state = { results: [] }
public async componentDidMount() {
// temporary ocean init and asset retrieval
const { ocean } = await provideOcean()
const searchParams = queryString.parse(this.props.location.search)
const queryRequest: any = {
offset: 100,
@ -29,7 +27,7 @@ export default class Search extends Component<SearchProps, SearchState> {
}
}
}
const assets = await ocean.searchAssets(queryRequest)
const assets = await this.context.ocean.searchAssets(queryRequest)
this.setState({ results: assets })
}
@ -56,3 +54,5 @@ export default class Search extends Component<SearchProps, SearchState> {
)
}
}
Search.contextType = User