2020-04-25 02:27:45 +02:00
|
|
|
|
[![banner](https://raw.githubusercontent.com/oceanprotocol/art/master/github/repo-banner%402x.png)](https://oceanprotocol.com)
|
|
|
|
|
|
|
|
|
|
<h1 align="center">react</h1>
|
2020-04-24 16:38:24 +02:00
|
|
|
|
|
2020-04-27 11:29:35 +02:00
|
|
|
|
> 🎣 React hooks & components on top of squid.js
|
2020-04-24 16:38:24 +02:00
|
|
|
|
|
2020-04-27 15:04:17 +02:00
|
|
|
|
[![Build Status](https://travis-ci.com/oceanprotocol/react.svg?token=3psqw6c8KMDqfdGQ2x6d&branch=master)](https://travis-ci.com/oceanprotocol/react)
|
2020-04-25 02:27:45 +02:00
|
|
|
|
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-7b1173.svg?style=flat-square)](https://github.com/prettier/prettier)
|
|
|
|
|
[![js oceanprotocol](https://img.shields.io/badge/js-oceanprotocol-7b1173.svg)](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
|
|
|
|
|
|
2020-04-27 11:29:35 +02:00
|
|
|
|
---
|
2020-04-27 14:37:26 +02:00
|
|
|
|
|
2020-04-27 11:29:35 +02:00
|
|
|
|
![iu](https://user-images.githubusercontent.com/90316/80356686-1650c080-887a-11ea-854e-bdc2bbdb0c20.jpeg)
|
|
|
|
|
|
|
|
|
|
**WE ARE IN HARDWARE MODE. This project is in a conceptual phase and nothing works.**
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
2020-04-25 02:27:45 +02:00
|
|
|
|
**Table of Contents**
|
|
|
|
|
|
|
|
|
|
- [🏗 Installation](#-installation)
|
|
|
|
|
- [🏄 Usage](#-usage)
|
|
|
|
|
- [🦑 Development](#-development)
|
|
|
|
|
- [✨ Code Style](#-code-style)
|
|
|
|
|
- [👩🔬 Testing](#-testing)
|
|
|
|
|
- [🛳 Production](#-production)
|
|
|
|
|
- [⬆️ Releases](#️-releases)
|
|
|
|
|
- [📜 Changelog](#-changelog)
|
|
|
|
|
- [🎁 Contribute](#-contribute)
|
2020-04-27 10:34:22 +02:00
|
|
|
|
- [🧜 Authors](#-authors)
|
2020-04-25 02:27:45 +02:00
|
|
|
|
- [🏛 License](#-license)
|
|
|
|
|
|
|
|
|
|
## 🏗 Installation
|
2020-04-24 16:38:24 +02:00
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
npm install @oceanprotocol/react
|
|
|
|
|
```
|
|
|
|
|
|
2020-04-25 02:27:45 +02:00
|
|
|
|
## 🏄 Usage
|
2020-04-24 16:38:24 +02:00
|
|
|
|
|
2020-04-25 02:27:45 +02:00
|
|
|
|
First, wrap your App with the `OceanProvider` and provide its config object:
|
2020-04-24 16:49:59 +02:00
|
|
|
|
|
|
|
|
|
```tsx
|
|
|
|
|
import React from 'react'
|
2020-04-25 02:27:45 +02:00
|
|
|
|
import { OceanProvider, Config } from '@oceanprotocol/react'
|
|
|
|
|
|
|
|
|
|
const config: Config = {
|
|
|
|
|
nodeUri: '',
|
|
|
|
|
...
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default function MyApp({ children }: { children: React.ReactNode }): React.ReactNode {
|
|
|
|
|
return (
|
|
|
|
|
<OceanProvider config={config}>
|
|
|
|
|
<h1>My App</h1>
|
|
|
|
|
{children}
|
|
|
|
|
</OceanProvider>
|
|
|
|
|
)
|
2020-04-24 16:49:59 +02:00
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2020-04-27 14:37:26 +02:00
|
|
|
|
Then within your component use the provided hooks to interact with Ocean's functionality. Each hook can be used independently:
|
2020-04-24 16:49:59 +02:00
|
|
|
|
|
2020-04-24 16:38:24 +02:00
|
|
|
|
```tsx
|
|
|
|
|
import React from 'react'
|
2020-04-27 14:37:26 +02:00
|
|
|
|
import { useOcean, useMetadata, useConsume } from '@oceanprotocol/react'
|
|
|
|
|
|
|
|
|
|
const did = 'did:op:0x000000000'
|
2020-04-24 16:38:24 +02:00
|
|
|
|
|
|
|
|
|
export default function MyComponent() {
|
2020-04-24 18:01:06 +02:00
|
|
|
|
// Initialize, get existing, or reinitialize Ocean
|
2020-04-25 15:38:21 +02:00
|
|
|
|
const { ocean, account } = useOcean()
|
2020-04-24 16:49:59 +02:00
|
|
|
|
|
2020-04-27 14:37:26 +02:00
|
|
|
|
// Get metadata for this asset
|
2020-04-27 14:58:37 +02:00
|
|
|
|
const { title, metadata } = useMetadata(did)
|
2020-04-27 14:37:26 +02:00
|
|
|
|
|
2020-04-27 10:34:22 +02:00
|
|
|
|
// publish asset
|
|
|
|
|
const { publish, publishStep } = usePublish()
|
|
|
|
|
|
2020-04-24 16:49:59 +02:00
|
|
|
|
// consume asset
|
2020-04-27 10:34:22 +02:00
|
|
|
|
const { consume, consumeStep } = useConsume()
|
2020-04-24 16:38:24 +02:00
|
|
|
|
|
|
|
|
|
async function handleClick() {
|
2020-04-27 14:37:26 +02:00
|
|
|
|
await consume(did)
|
2020-04-24 16:38:24 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
2020-04-27 14:37:26 +02:00
|
|
|
|
<h1>{title}</h1>
|
2020-04-27 14:58:37 +02:00
|
|
|
|
<p>Price: {metadata.main.price}</p>
|
|
|
|
|
|
|
|
|
|
<p>Your account: {account}</p>
|
2020-04-27 10:34:22 +02:00
|
|
|
|
<button onClick={handleClick}>{consumeStep || 'Download Asset'}</button>
|
2020-04-24 16:38:24 +02:00
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
}
|
2020-04-24 18:01:06 +02:00
|
|
|
|
```
|
|
|
|
|
|
2020-04-25 02:27:45 +02:00
|
|
|
|
## 🦑 Development
|
2020-04-24 18:01:06 +02:00
|
|
|
|
|
2020-04-25 02:27:45 +02:00
|
|
|
|
The project is authored with TypeScript and compiled with `tsc`.
|
2020-04-24 18:01:06 +02:00
|
|
|
|
|
2020-04-25 02:27:45 +02:00
|
|
|
|
To start compiler in watch mode:
|
2020-04-24 18:01:06 +02:00
|
|
|
|
|
2020-04-25 02:27:45 +02:00
|
|
|
|
```bash
|
|
|
|
|
npm start
|
2020-04-24 18:01:06 +02:00
|
|
|
|
```
|
|
|
|
|
|
2020-04-25 02:27:45 +02:00
|
|
|
|
## ✨ Code Style
|
2020-04-24 18:01:06 +02:00
|
|
|
|
|
2020-04-25 02:27:45 +02:00
|
|
|
|
For linting and auto-formatting you can use from the root of the project:
|
2020-04-24 18:01:06 +02:00
|
|
|
|
|
2020-04-25 02:27:45 +02:00
|
|
|
|
```bash
|
|
|
|
|
# auto format all ts & css with eslint & stylelint
|
|
|
|
|
npm run lint
|
2020-04-24 18:01:06 +02:00
|
|
|
|
|
2020-04-25 02:27:45 +02:00
|
|
|
|
# auto format all ts & css with prettier, taking all configs into account
|
|
|
|
|
npm run format
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 👩🔬 Testing
|
|
|
|
|
|
|
|
|
|
## 🛳 Production
|
|
|
|
|
|
|
|
|
|
The build script will compile `src/` with `tsc` into:
|
|
|
|
|
|
|
|
|
|
1. CommonJS module with ES5 syntax
|
|
|
|
|
2. ES module with ES5 syntax
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
npm run build
|
|
|
|
|
```
|
2020-04-24 18:01:06 +02:00
|
|
|
|
|
2020-04-25 02:27:45 +02:00
|
|
|
|
## ⬆️ Releases
|
|
|
|
|
|
|
|
|
|
## 📜 Changelog
|
|
|
|
|
|
|
|
|
|
See the [CHANGELOG.md](./CHANGELOG.md) file.
|
|
|
|
|
|
|
|
|
|
## 🎁 Contribute
|
|
|
|
|
|
|
|
|
|
See the page titled "[Ways to Contribute](https://docs.oceanprotocol.com/concepts/contributing/)" in the Ocean Protocol documentation.
|
|
|
|
|
|
2020-04-27 10:34:22 +02:00
|
|
|
|
## 🧜 Authors
|
|
|
|
|
|
|
|
|
|
Created based on the work and learnings of the Ocean Protocol marketplace team:
|
|
|
|
|
|
|
|
|
|
- [@kremalicious](https://github.com/kremalicious)
|
|
|
|
|
- [@maxieprotocol](https://github.com/maxieprotocol)
|
|
|
|
|
- [@unjapones](https://github.com/unjapones)
|
|
|
|
|
- [@pfmescher](https://github.com/pfmescher)
|
|
|
|
|
- [@mihaisc](https://github.com/mihaisc)
|
|
|
|
|
|
2020-04-25 02:27:45 +02:00
|
|
|
|
## 🏛 License
|
|
|
|
|
|
|
|
|
|
```text
|
|
|
|
|
Copyright 2020 Ocean Protocol Foundation Ltd.
|
|
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
|
limitations under the License.
|
|
|
|
|
```
|