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
|
|
|
|
|
|
|
|
|
> React hooks & components on top of squid.js
|
|
|
|
|
|
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)
|
|
|
|
|
|
|
|
|
|
**Table of Contents**
|
|
|
|
|
|
|
|
|
|
- [🏗 Installation](#-installation)
|
|
|
|
|
- [🏄 Usage](#-usage)
|
|
|
|
|
- [🦑 Development](#-development)
|
|
|
|
|
- [✨ Code Style](#-code-style)
|
|
|
|
|
- [👩🔬 Testing](#-testing)
|
|
|
|
|
- [🛳 Production](#-production)
|
|
|
|
|
- [⬆️ Releases](#️-releases)
|
|
|
|
|
- [📜 Changelog](#-changelog)
|
|
|
|
|
- [🎁 Contribute](#-contribute)
|
|
|
|
|
- [🏛 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
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Then within your component use the provided hooks to interact with Ocean's functionality:
|
|
|
|
|
|
2020-04-24 16:38:24 +02:00
|
|
|
|
```tsx
|
|
|
|
|
import React from 'react'
|
2020-04-25 15:38:21 +02:00
|
|
|
|
import { useOcean, useConsume } from '@oceanprotocol/react'
|
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
|
|
|
|
|
|
|
|
|
// consume asset
|
2020-04-25 15:38:21 +02:00
|
|
|
|
const { consume, isLoading, step } = useConsume()
|
2020-04-24 16:38:24 +02:00
|
|
|
|
|
|
|
|
|
async function handleClick() {
|
2020-04-25 02:27:45 +02:00
|
|
|
|
const ddo = 'did:op:0x000000000'
|
2020-04-25 15:38:21 +02:00
|
|
|
|
await consume(ddo)
|
2020-04-24 16:38:24 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
2020-04-25 02:27:45 +02:00
|
|
|
|
Your account: {account}
|
|
|
|
|
<button onClick={handleClick}>
|
|
|
|
|
{isLoading ? step : '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.
|
|
|
|
|
|
|
|
|
|
## 🏛 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.
|
|
|
|
|
```
|