mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
Merge branch 'master' into feature/search-tweaks
This commit is contained in:
commit
ae2911c689
41
README.md
41
README.md
|
@ -10,32 +10,30 @@
|
||||||
[![js oceanprotocol](https://img.shields.io/badge/js-oceanprotocol-7b1173.svg)](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
|
[![js oceanprotocol](https://img.shields.io/badge/js-oceanprotocol-7b1173.svg)](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
|
||||||
[![css bigchaindb](https://img.shields.io/badge/css-bigchaindb-39BA91.svg)](https://github.com/bigchaindb/stylelint-config-bigchaindb)
|
[![css bigchaindb](https://img.shields.io/badge/css-bigchaindb-39BA91.svg)](https://github.com/bigchaindb/stylelint-config-bigchaindb)
|
||||||
|
|
||||||
|
<img alt="screen shot 2019-02-08 at 16 53 57" src="https://user-images.githubusercontent.com/90316/52489283-27080e80-2bc2-11e9-8ec0-508c21eb86f7.png">
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
**This marketplace is deployed under https://commons.oceanprotocol.com and can be used there. Feel free to [report any issues](https://github.com/oceanprotocol/commons/issues) you encounter.**
|
### 🦑🦑🦑 This marketplace is deployed under https://commons.oceanprotocol.com and can be used there. Feel free to [report any issues](https://github.com/oceanprotocol/commons/issues) you encounter. 🦑🦑🦑
|
||||||
|
|
||||||
If you're a developer and want to contribute to, or want to utilize this marketplace's code in your projects, then keep on reading.
|
If you're a developer and want to contribute to, or want to utilize this marketplace's code in your projects, then keep on reading.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
- [Get Started](#get-started)
|
- [🏄 Get Started](#-get-started)
|
||||||
- [Use with Barge](#use-with-barge)
|
- [🐳 Use with Barge](#-use-with-barge)
|
||||||
- [Production](#production)
|
- [🛳 Production](#-production)
|
||||||
- [Testing](#testing)
|
- [👩🔬 Testing](#-testing)
|
||||||
- [Code Style](#code-style)
|
- [✨ Code Style](#-code-style)
|
||||||
- [License](#license)
|
- [🏛 License](#-license)
|
||||||
|
|
||||||
<img alt="screen shot 2019-02-08 at 16 53 57" src="https://user-images.githubusercontent.com/90316/52489283-27080e80-2bc2-11e9-8ec0-508c21eb86f7.png">
|
|
||||||
|
|
||||||
## Get Started
|
|
||||||
|
|
||||||
To make use of all the functionality, you need to connect to the Ocean network. By default, the client will connect to [Ocean's Nile test network](https://docs.oceanprotocol.com/concepts/testnets/#the-nile-testnet) remotely.
|
|
||||||
|
|
||||||
This repo contains a client and a server, both written in TypeScript:
|
This repo contains a client and a server, both written in TypeScript:
|
||||||
|
|
||||||
- **client**: React app setup with [squid-js](https://github.com/oceanprotocol/squid-js), bootstrapped with [Create React App](https://github.com/facebook/create-react-app)
|
- **client**: React app setup with [squid-js](https://github.com/oceanprotocol/squid-js), bootstrapped with [Create React App](https://github.com/facebook/create-react-app)
|
||||||
- **server**: Node.js app, utilizing [Express](https://expressjs.com). The server provides various microservices, like remote file checking.
|
- **server**: Node.js app, utilizing [Express](https://expressjs.com). The server provides various microservices, like remote file checking.
|
||||||
|
|
||||||
|
## 🏄 Get Started
|
||||||
|
|
||||||
To spin up both, the client and the server in a watch mode for local development, execute:
|
To spin up both, the client and the server in a watch mode for local development, execute:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
@ -43,12 +41,11 @@ npm install
|
||||||
npm start
|
npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
This will run both, client and server in development mode.<br>
|
Open [http://localhost:3000](http://localhost:3000) to view the client in the browser. The page will reload if you make edits to files in either `./client` or `./server`.
|
||||||
Open [http://localhost:3000](http://localhost:3000) to view the client in the browser.
|
|
||||||
|
|
||||||
The page will reload if you make edits to files in either `./client` or `./server`.
|
To make use of all the functionality, you need to connect to the Ocean network. By default, the client will connect to [Ocean's Nile test network](https://docs.oceanprotocol.com/concepts/testnets/#the-nile-testnet) remotely.
|
||||||
|
|
||||||
### Use with Barge
|
### 🐳 Use with Barge
|
||||||
|
|
||||||
If you prefer to connect to locally running components instead of remote connections to Ocean's Nile network, you can spin up [`barge`](https://github.com/oceanprotocol/barge) and use a local network:
|
If you prefer to connect to locally running components instead of remote connections to Ocean's Nile network, you can spin up [`barge`](https://github.com/oceanprotocol/barge) and use a local network:
|
||||||
|
|
||||||
|
@ -59,9 +56,9 @@ cd barge
|
||||||
./start_ocean.sh --latest --no-pleuston --local-spree-node
|
./start_ocean.sh --latest --no-pleuston --local-spree-node
|
||||||
```
|
```
|
||||||
|
|
||||||
Modify `./client/src/config.ts` to use those local connections.
|
Modify `./client/src/config/config.ts` to use those local connections.
|
||||||
|
|
||||||
## Production
|
## 🛳 Production
|
||||||
|
|
||||||
To create a production build of both, the client and the server, run from the root of the project:
|
To create a production build of both, the client and the server, run from the root of the project:
|
||||||
|
|
||||||
|
@ -71,7 +68,7 @@ npm run build
|
||||||
|
|
||||||
Builds the client for production to the `./client/build` folder, and the server into the `./server/dist` folder.
|
Builds the client for production to the `./client/build` folder, and the server into the `./server/dist` folder.
|
||||||
|
|
||||||
## Testing
|
## 👩🔬 Testing
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm test
|
npm test
|
||||||
|
@ -79,7 +76,7 @@ npm test
|
||||||
|
|
||||||
Launches the test runner in the interactive watch mode.
|
Launches the test runner in the interactive watch mode.
|
||||||
|
|
||||||
## Code Style
|
## ✨ Code Style
|
||||||
|
|
||||||
For linting and auto-formatting you can use from the root of the project:
|
For linting and auto-formatting you can use from the root of the project:
|
||||||
|
|
||||||
|
@ -91,7 +88,7 @@ npm run lint
|
||||||
npm run format
|
npm run format
|
||||||
```
|
```
|
||||||
|
|
||||||
## License
|
## 🏛 License
|
||||||
|
|
||||||
```text
|
```text
|
||||||
Copyright 2018 Ocean Protocol Foundation Ltd.
|
Copyright 2018 Ocean Protocol Foundation Ltd.
|
||||||
|
|
12
client/package-lock.json
generated
12
client/package-lock.json
generated
|
@ -1026,14 +1026,14 @@
|
||||||
"integrity": "sha512-p2n505t2K0zD1ZvGPhI6EsSviEVLCB7BYowhf/ONmVaWED138PaG4Z9nY6YuHU383uOoIWT+Lq3dLkFzDzstXw=="
|
"integrity": "sha512-p2n505t2K0zD1ZvGPhI6EsSviEVLCB7BYowhf/ONmVaWED138PaG4Z9nY6YuHU383uOoIWT+Lq3dLkFzDzstXw=="
|
||||||
},
|
},
|
||||||
"@oceanprotocol/keeper-contracts": {
|
"@oceanprotocol/keeper-contracts": {
|
||||||
"version": "0.9.0",
|
"version": "0.9.1",
|
||||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/keeper-contracts/-/keeper-contracts-0.9.0.tgz",
|
"resolved": "https://registry.npmjs.org/@oceanprotocol/keeper-contracts/-/keeper-contracts-0.9.1.tgz",
|
||||||
"integrity": "sha512-QrTCQNiQa9KszH6/dTAS0a8AoW/SIEkZazXTwA2aoePBS0X8fNpsKvT3N2OuR1YPAjCU3rGWzYdV4TNnMNbsSw=="
|
"integrity": "sha512-c1LvaH+e1tzow0gZLwSWe19ap+DrZuNmZfxBdwEVEPQXarI0jTXa5qVDoiBow8kBWaqSIUgFAzQOJW8rKdlS1A=="
|
||||||
},
|
},
|
||||||
"@oceanprotocol/squid": {
|
"@oceanprotocol/squid": {
|
||||||
"version": "0.5.0",
|
"version": "0.5.1",
|
||||||
"resolved": "https://registry.npmjs.org/@oceanprotocol/squid/-/squid-0.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/@oceanprotocol/squid/-/squid-0.5.1.tgz",
|
||||||
"integrity": "sha512-yGu121WJ9XEX1U4ql/p7ISV36fqNydxGBYgXHbOjeXS/kvNFx3hP2emBf4QA12PjPZcmuLz0wE+7GBL4H/v+eA==",
|
"integrity": "sha512-YJewmMIpHG5cjsOsgOynky7z+5YT7l5+niW9AqCMOoMGy76VEe1+6nmAhZ/PB9BtIpYCGWOl1Y68I32qhX9IWQ==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"@oceanprotocol/keeper-contracts": "^0.9.0",
|
"@oceanprotocol/keeper-contracts": "^0.9.0",
|
||||||
"bignumber.js": "^8.0.1",
|
"bignumber.js": "^8.0.1",
|
||||||
|
|
|
@ -39,7 +39,7 @@ interface AppState {
|
||||||
}
|
}
|
||||||
network: string
|
network: string
|
||||||
web3: Web3
|
web3: Web3
|
||||||
ocean: {}
|
ocean: any
|
||||||
startLogin: () => void
|
startLogin: () => void
|
||||||
message: string
|
message: string
|
||||||
}
|
}
|
||||||
|
@ -95,7 +95,7 @@ class App extends Component<{}, AppState> {
|
||||||
)
|
)
|
||||||
),
|
),
|
||||||
account: '',
|
account: '',
|
||||||
ocean: {},
|
ocean: {} as any,
|
||||||
startLogin: this.startLogin,
|
startLogin: this.startLogin,
|
||||||
requestFromFaucet: this.requestFromFaucet,
|
requestFromFaucet: this.requestFromFaucet,
|
||||||
message: 'Connecting to Ocean...'
|
message: 'Connecting to Ocean...'
|
||||||
|
@ -106,73 +106,77 @@ class App extends Component<{}, AppState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
private startLoginProcess = async () => {
|
private startLoginProcess = async () => {
|
||||||
if (window.web3) {
|
try {
|
||||||
const web3 = new Web3(window.web3.currentProvider)
|
if (this.state.isWeb3 && window.ethereum) {
|
||||||
try {
|
await window.ethereum.enable()
|
||||||
const accounts = await web3.eth.getAccounts()
|
const accounts = await this.state.ocean.accounts.list()
|
||||||
if (accounts.length > 0) {
|
if (accounts.length > 0) {
|
||||||
|
const balance = await accounts[0].getBalance()
|
||||||
this.setState({
|
this.setState({
|
||||||
isLogged: true,
|
isLogged: true,
|
||||||
isWeb3: true,
|
balance,
|
||||||
account: accounts[0],
|
account: accounts[0].getId()
|
||||||
web3
|
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
if (accounts.length === 0 && window.ethereum) {
|
// not unlocked
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} else {
|
||||||
// something went wrong, show error?
|
// no metamask/mist, show installation guide!
|
||||||
}
|
}
|
||||||
} else {
|
} catch (e) {
|
||||||
// no metamask/mist, show installation guide!
|
Logger.log('error logging', e)
|
||||||
|
// error in logging process
|
||||||
|
// show error
|
||||||
|
// rerun bootstrap process?
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private bootstrap = async () => {
|
private bootstrap = async () => {
|
||||||
if (window.web3) {
|
try {
|
||||||
this.setState({ isWeb3: true })
|
if (window.web3) {
|
||||||
const web3 = new Web3(window.web3.currentProvider)
|
const web3 = new Web3(window.web3.currentProvider)
|
||||||
try {
|
const { ocean } = await provideOcean(web3)
|
||||||
const accounts = await web3.eth.getAccounts()
|
const accounts = await ocean.accounts.list()
|
||||||
|
const network = await ocean.keeper.getNetworkName()
|
||||||
|
const isNile = network === 'Nile'
|
||||||
if (accounts.length > 0) {
|
if (accounts.length > 0) {
|
||||||
|
const balance = await accounts[0].getBalance()
|
||||||
this.setState({
|
this.setState({
|
||||||
|
isWeb3: true,
|
||||||
isLogged: true,
|
isLogged: true,
|
||||||
account: accounts[0],
|
isNile,
|
||||||
web3
|
ocean,
|
||||||
|
web3,
|
||||||
|
balance,
|
||||||
|
network,
|
||||||
|
account: accounts[0].getId(),
|
||||||
|
isLoading: false
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.setState({
|
||||||
|
isWeb3: true,
|
||||||
|
isNile,
|
||||||
|
ocean,
|
||||||
|
web3,
|
||||||
|
network,
|
||||||
|
isLoading: false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} else {
|
||||||
Logger.log('web3 error', e)
|
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) {
|
} catch (e) {
|
||||||
Logger.log('ocean/balance error', e)
|
// error in bootstrap process
|
||||||
|
// show error connecting to ocean
|
||||||
|
Logger.log('web3 error', e)
|
||||||
this.setState({
|
this.setState({
|
||||||
isLoading: false
|
isLoading: false
|
||||||
})
|
})
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { Logger } from '@oceanprotocol/squid'
|
||||||
import { User } from '../../context/User'
|
import { User } from '../../context/User'
|
||||||
import Spinner from '../atoms/Spinner'
|
import Spinner from '../atoms/Spinner'
|
||||||
import Asset from '../molecules/Asset'
|
import Asset from '../molecules/Asset'
|
||||||
|
import Web3message from './Web3message'
|
||||||
import styles from './AssetsUser.module.scss'
|
import styles from './AssetsUser.module.scss'
|
||||||
|
|
||||||
export default class AssetsUser extends PureComponent<
|
export default class AssetsUser extends PureComponent<
|
||||||
|
@ -47,49 +48,48 @@ export default class AssetsUser extends PureComponent<
|
||||||
}
|
}
|
||||||
|
|
||||||
public render() {
|
public render() {
|
||||||
return (
|
return this.context.isNile && this.context.account ? (
|
||||||
this.context.isNile &&
|
<div className={styles.assetsUser}>
|
||||||
this.context.account && (
|
{this.props.recent && (
|
||||||
<div className={styles.assetsUser}>
|
<h2 className={styles.subTitle}>
|
||||||
{this.props.recent && (
|
Your Latest Published Data Sets
|
||||||
<h2 className={styles.subTitle}>
|
</h2>
|
||||||
Your Latest Published Data Sets
|
)}
|
||||||
</h2>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{this.state.isLoading ? (
|
{this.state.isLoading ? (
|
||||||
<Spinner />
|
<Spinner />
|
||||||
) : this.state.results.length ? (
|
) : this.state.results.length ? (
|
||||||
<>
|
<>
|
||||||
{this.state.results
|
{this.state.results
|
||||||
.slice(
|
.slice(
|
||||||
0,
|
0,
|
||||||
this.props.recent
|
this.props.recent
|
||||||
? this.props.recent
|
? this.props.recent
|
||||||
: undefined
|
: undefined
|
||||||
)
|
)
|
||||||
.filter(asset => !!asset)
|
.filter(asset => !!asset)
|
||||||
.map((asset: any) => (
|
.map((asset: any) => (
|
||||||
<Asset
|
<Asset
|
||||||
list={this.props.list}
|
list={this.props.list}
|
||||||
key={asset.id}
|
key={asset.id}
|
||||||
asset={asset}
|
asset={asset}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
{this.props.recent && (
|
{this.props.recent && (
|
||||||
<Link className={styles.link} to={'/history'}>
|
<Link className={styles.link} to={'/history'}>
|
||||||
All Data Sets
|
All Data Sets
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<div className={styles.empty}>
|
<div className={styles.empty}>
|
||||||
<p>No Data Sets Yet.</p>
|
<p>No Data Sets Yet.</p>
|
||||||
<Link to="/publish">+ Publish A Data Set</Link>
|
<Link to="/publish">+ Publish A Data Set</Link>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
) : (
|
||||||
|
<Web3message />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -26,9 +26,12 @@ export default class Web3message extends PureComponent {
|
||||||
public noWeb3() {
|
public noWeb3() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.message}>
|
<div className={styles.message}>
|
||||||
<AccountStatus className={styles.status} /> No Web3 Browser. For
|
<AccountStatus className={styles.status} /> Not a Web3 Browser.
|
||||||
publishing an asset you need to{' '}
|
For publishing or consuming an asset you need to{' '}
|
||||||
<a href="https://docs.oceanprotocol.com/tutorials/metamask-setup/">
|
<a
|
||||||
|
href="https://docs.oceanprotocol.com/tutorials/metamask-setup/"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
setup MetaMask
|
setup MetaMask
|
||||||
</a>{' '}
|
</a>{' '}
|
||||||
or use any other Web3-capable plugin or browser.
|
or use any other Web3-capable plugin or browser.
|
||||||
|
@ -40,7 +43,7 @@ export default class Web3message extends PureComponent {
|
||||||
return (
|
return (
|
||||||
<div className={styles.message}>
|
<div className={styles.message}>
|
||||||
<AccountStatus className={styles.status} /> Account locked. For
|
<AccountStatus className={styles.status} /> Account locked. For
|
||||||
publishing an asset you need to unlock your Web3 account.
|
publishing an asset you need to unlock your Web3 account.{' '}
|
||||||
<Button link onClick={states.startLogin}>
|
<Button link onClick={states.startLogin}>
|
||||||
Unlock account
|
Unlock account
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
@ -1,18 +1,15 @@
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
"title": "Publish",
|
"title": "Publish",
|
||||||
"link": "/publish",
|
"link": "/publish"
|
||||||
"web3": true
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "History",
|
"title": "History",
|
||||||
"link": "/history",
|
"link": "/history"
|
||||||
"web3": true
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Faucet",
|
"title": "Faucet",
|
||||||
"link": "/faucet",
|
"link": "/faucet"
|
||||||
"web3": true
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "About",
|
"title": "About",
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import { Ocean } from '@oceanprotocol/squid'
|
import { Ocean } from '@oceanprotocol/squid'
|
||||||
|
import Web3 from 'web3'
|
||||||
|
|
||||||
import {
|
import {
|
||||||
aquariusHost,
|
aquariusHost,
|
||||||
|
@ -20,7 +21,7 @@ import {
|
||||||
verbose
|
verbose
|
||||||
} from './config/config'
|
} from './config/config'
|
||||||
|
|
||||||
export async function provideOcean() {
|
export async function provideOcean(web3provider: Web3) {
|
||||||
const nodeUri = `${nodeScheme}://${nodeHost}:${nodePort}`
|
const nodeUri = `${nodeScheme}://${nodeHost}:${nodePort}`
|
||||||
const aquariusUri = `${aquariusScheme}://${aquariusHost}:${aquariusPort}`
|
const aquariusUri = `${aquariusScheme}://${aquariusHost}:${aquariusPort}`
|
||||||
const brizoUri = `${brizoScheme}://${brizoHost}:${brizoPort}`
|
const brizoUri = `${brizoScheme}://${brizoHost}:${brizoPort}`
|
||||||
|
@ -28,6 +29,7 @@ export async function provideOcean() {
|
||||||
const secretStoreUri = `${secretStoreScheme}://${secretStoreHost}:${secretStorePort}`
|
const secretStoreUri = `${secretStoreScheme}://${secretStoreHost}:${secretStorePort}`
|
||||||
|
|
||||||
const config = {
|
const config = {
|
||||||
|
web3provider,
|
||||||
nodeUri,
|
nodeUri,
|
||||||
aquariusUri,
|
aquariusUri,
|
||||||
brizoUri,
|
brizoUri,
|
||||||
|
@ -37,7 +39,7 @@ export async function provideOcean() {
|
||||||
verbose
|
verbose
|
||||||
}
|
}
|
||||||
|
|
||||||
const ocean = await Ocean.getInstance(config)
|
const ocean: Ocean = await Ocean.getInstance(config)
|
||||||
|
|
||||||
return { ocean }
|
return { ocean }
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import React, { PureComponent } from 'react'
|
import React, { PureComponent } from 'react'
|
||||||
import { Logger } from '@oceanprotocol/squid'
|
import { Logger } from '@oceanprotocol/squid'
|
||||||
import filesize from 'filesize'
|
import filesize from 'filesize'
|
||||||
import { User } from '../../context/User'
|
|
||||||
import Button from '../../components/atoms/Button'
|
import Button from '../../components/atoms/Button'
|
||||||
import Spinner from '../../components/atoms/Spinner'
|
import Spinner from '../../components/atoms/Spinner'
|
||||||
|
import { User } from '../../context/User'
|
||||||
import styles from './AssetFile.module.scss'
|
import styles from './AssetFile.module.scss'
|
||||||
|
|
||||||
interface AssetFileProps {
|
interface AssetFileProps {
|
||||||
|
@ -79,13 +79,31 @@ export default class AssetFile extends PureComponent<
|
||||||
{this.state.isLoading ? (
|
{this.state.isLoading ? (
|
||||||
<Spinner message={this.state.message} />
|
<Spinner message={this.state.message} />
|
||||||
) : (
|
) : (
|
||||||
<Button
|
<User.Consumer>
|
||||||
primary
|
{states =>
|
||||||
className={styles.buttonMain}
|
states.isLogged ? (
|
||||||
onClick={() => this.purchaseAsset(ddo, file.index)}
|
<Button
|
||||||
>
|
primary
|
||||||
Get file
|
className={styles.buttonMain}
|
||||||
</Button>
|
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 !== '' && (
|
{this.state.error !== '' && (
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
import React, { PureComponent } from 'react'
|
import React, { PureComponent } from 'react'
|
||||||
import AssetFile from './AssetFile'
|
import AssetFile from './AssetFile'
|
||||||
|
import { User } from '../../context/User'
|
||||||
|
import Web3message from '../../components/organisms/Web3message'
|
||||||
import styles from './AssetFilesDetails.module.scss'
|
import styles from './AssetFilesDetails.module.scss'
|
||||||
|
|
||||||
export default class AssetFilesDetails extends PureComponent<{
|
export default class AssetFilesDetails extends PureComponent<{
|
||||||
|
@ -16,6 +18,11 @@ export default class AssetFilesDetails extends PureComponent<{
|
||||||
<AssetFile key={file.index} ddo={ddo} file={file} />
|
<AssetFile key={file.index} ddo={ddo} file={file} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
<User.Consumer>
|
||||||
|
{states =>
|
||||||
|
(!states.isNile || !states.isLogged) && <Web3message />
|
||||||
|
}
|
||||||
|
</User.Consumer>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<div>No files attached.</div>
|
<div>No files attached.</div>
|
||||||
|
|
|
@ -10,15 +10,13 @@ interface FaucetState {
|
||||||
isLoading: boolean
|
isLoading: boolean
|
||||||
success?: string
|
success?: string
|
||||||
error?: string
|
error?: string
|
||||||
eth?: string
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Faucet extends PureComponent<{}, FaucetState> {
|
export default class Faucet extends PureComponent<{}, FaucetState> {
|
||||||
public state = {
|
public state = {
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
success: undefined,
|
success: undefined,
|
||||||
error: undefined,
|
error: undefined
|
||||||
eth: 'xx'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private getTokens = async (requestFromFaucet: () => any) => {
|
private getTokens = async (requestFromFaucet: () => any) => {
|
||||||
|
@ -47,14 +45,20 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
|
||||||
|
|
||||||
private RequestMarkup = () => (
|
private RequestMarkup = () => (
|
||||||
<User.Consumer>
|
<User.Consumer>
|
||||||
{states => (
|
{states =>
|
||||||
<Button
|
states.isLogged ? (
|
||||||
primary
|
<Button
|
||||||
onClick={() => this.getTokens(states.requestFromFaucet)}
|
primary
|
||||||
>
|
onClick={() => this.getTokens(states.requestFromFaucet)}
|
||||||
Request Ether
|
>
|
||||||
</Button>
|
Request Ether
|
||||||
)}
|
</Button>
|
||||||
|
) : states.isWeb3 ? (
|
||||||
|
<Web3message />
|
||||||
|
) : (
|
||||||
|
<Web3message />
|
||||||
|
)
|
||||||
|
}
|
||||||
</User.Consumer>
|
</User.Consumer>
|
||||||
)
|
)
|
||||||
|
|
||||||
|
@ -93,7 +97,9 @@ export default class Faucet extends PureComponent<{}, FaucetState> {
|
||||||
title="Faucet"
|
title="Faucet"
|
||||||
description="Shower yourself with some Ether for the Ocean POA network."
|
description="Shower yourself with some Ether for the Ocean POA network."
|
||||||
>
|
>
|
||||||
<Web3message />
|
<User.Consumer>
|
||||||
|
{states => !states.isNile && <Web3message />}
|
||||||
|
</User.Consumer>
|
||||||
|
|
||||||
<this.ActionMarkup />
|
<this.ActionMarkup />
|
||||||
</Route>
|
</Route>
|
||||||
|
|
|
@ -158,9 +158,21 @@ export default class Step extends PureComponent<StepProps, {}> {
|
||||||
{states =>
|
{states =>
|
||||||
states.isLogged ? (
|
states.isLogged ? (
|
||||||
<Button primary>Register asset</Button>
|
<Button primary>Register asset</Button>
|
||||||
) : (
|
) : states.isWeb3 ? (
|
||||||
<Button onClick={states.startLogin}>
|
<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>
|
</Button>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -22,7 +22,10 @@ export class UrlCheckRouter {
|
||||||
headers: { Range: 'bytes=0-' }
|
headers: { Range: 'bytes=0-' }
|
||||||
},
|
},
|
||||||
(error, response) => {
|
(error, response) => {
|
||||||
if (response && response.statusCode.toString().startsWith('2')) {
|
if (
|
||||||
|
response &&
|
||||||
|
response.statusCode.toString().startsWith('2')
|
||||||
|
) {
|
||||||
const result: any = {}
|
const result: any = {}
|
||||||
result.found = true
|
result.found = true
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user