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-07-20 12:57:53 +02:00
> 🎣 React hooks & components on top of @oceanprotocol/lib
2020-04-24 16:38:24 +02:00
2020-05-11 18:25:35 +02:00
[![npm ](https://img.shields.io/npm/v/@oceanprotocol/react.svg )](https://www.npmjs.com/package/@oceanprotocol/react)
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-27 17:05:11 +02:00
[![Maintainability ](https://api.codeclimate.com/v1/badges/1e93b2b3e198c3670b50/maintainability )](https://codeclimate.com/repos/5ea6f2fec372a101a1000929/maintainability)
[![Test Coverage ](https://api.codeclimate.com/v1/badges/1e93b2b3e198c3670b50/test_coverage )](https://codeclimate.com/repos/5ea6f2fec372a101a1000929/test_coverage)
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 )
2020-07-31 01:48:26 +02:00
**WE ARE IN HARDWARE MODE. This project is in a conceptual phase and most stuff changes weekly. More importantly, it only works against bleeding edge v3 components of Ocean Protocol which are not completely public yet.**
2020-04-27 11:29:35 +02:00
---
2020-04-25 02:27:45 +02:00
**Table of Contents**
- [🏗 Installation ](#-installation )
2020-07-31 01:48:26 +02:00
- [🏄 Quick Start ](#-quick-start )
- [1. Add Provider ](#1-add-provider )
- [2. Use Hooks ](#2-use-hooks )
2020-04-25 02:27:45 +02:00
- [🦑 Development ](#-development )
- [✨ Code Style ](#-code-style )
- [👩🔬 Testing ](#-testing )
- [🛳 Production ](#-production )
- [⬆️ Releases ](#️ -releases )
2020-04-27 16:54:53 +02:00
- [Production ](#production )
- [Pre-Releases ](#pre-releases )
2020-04-25 02:27:45 +02:00
- [📜 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-07-31 01:48:26 +02:00
## 🏄 Quick Start
2020-04-24 16:38:24 +02:00
2020-07-31 01:48:26 +02:00
### 1. Add Provider
2020-04-27 16:29:34 +02:00
2020-07-31 01:48:26 +02:00
First, wrap your whole app with the [`<OceanProvider />` ](src/providers/OceanProvider ).
2020-04-24 16:49:59 +02:00
2020-07-31 01:48:26 +02:00
### 2. Use Hooks
2020-04-27 16:29:34 +02:00
2020-04-28 17:15:54 +02:00
Then within your component use the included 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-07-31 01:48:26 +02:00
import { useOcean, useMetadata, useConsume } from '@oceanprotocol/react'
2020-04-27 14:37:26 +02:00
const did = 'did:op:0x000000000'
2020-04-24 16:38:24 +02:00
export default function MyComponent() {
2020-04-27 17:33:21 +02:00
// Get Ocean instance from built-in OceanProvider context
2020-07-31 01:48:26 +02:00
const { ocean, web3, 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
2020-04-27 17:33:21 +02:00
async function handleDownload() {
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 17:33:21 +02:00
< p > Price: {web3.utils.fromWei(metadata.main.price)}< / p >
2020-04-27 14:58:37 +02:00
< p > Your account: {account}< / p >
2020-04-27 17:33:21 +02:00
< button onClick = {handleDownload} >
{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
2020-07-18 04:26:38 +02:00
The build script will compile `src/` with [`microbundle` ](https://github.com/developit/microbundle ) into:
2020-04-25 02:27:45 +02:00
2020-07-18 04:26:38 +02:00
1. CommonJS module
2. ES module
3. UMD build
2020-04-25 02:27:45 +02:00
```bash
npm run build
```
2020-04-24 18:01:06 +02:00
2020-04-25 02:27:45 +02:00
## ⬆️ Releases
2020-04-27 16:54:53 +02:00
Releases are managed semi-automatically. They are always manually triggered from a developer's machine with release scripts.
### Production
From a clean `master` branch you can run any release task bumping the version accordingly based on semantic versioning:
- To bump a patch version: `npm run release`
- To bump a minor version: `npm run release -- minor`
- To bump a major version: `npm run release -- major`
Every task does the following:
- bumps the project version in `package.json` , `package-lock.json`
- auto-generates and updates the CHANGELOG.md file from commit messages
- creates a Git tag
- commits and pushes everything
- creates a GitHub release with commit messages as description
- Git tag push will trigger Travis to do a npm release
For the GitHub releases steps a GitHub personal access token, exported as `GITHUB_TOKEN` is required. [Setup ](https://github.com/release-it/release-it#github-releases )
### Pre-Releases
Usually from a feature branch you can release a develop version under the `next` npm tag.
Say the current version is at `v1.1.0` , then to publish a pre-release for a next major version `v2.0.0-beta.0` , do:
```bash
npm run release -- major --preRelease=beta --npm.tag=next
# consecutive releases, e.g. to then get `v2.0.0-beta.1`
npm run release -- --preRelease
# final version, e.g. to then get `v2.0.0`
npm run release -- major
```
2020-04-25 02:27:45 +02:00
## 📜 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 )
2020-04-27 16:54:53 +02:00
- [@mihaisc ](https://github.com/mihaisc )
2020-04-27 10:34:22 +02:00
- [@unjapones ](https://github.com/unjapones )
- [@pfmescher ](https://github.com/pfmescher )
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.
```