mirror of
https://github.com/oceanprotocol/react.git
synced 2024-07-01 06:02:20 +02:00
195 lines
5.2 KiB
Markdown
195 lines
5.2 KiB
Markdown
[](https://oceanprotocol.com)
|
||
|
||
<h1 align="center">react</h1>
|
||
|
||
> 🎣 React hooks & components on top of squid.js
|
||
|
||
[](https://travis-ci.com/oceanprotocol/react)
|
||
[](https://github.com/prettier/prettier)
|
||
[](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
|
||
|
||
---
|
||
|
||
|
||
|
||
**WE ARE IN HARDWARE MODE. This project is in a conceptual phase and nothing works.**
|
||
|
||
---
|
||
|
||
**Table of Contents**
|
||
|
||
- [🏗 Installation](#-installation)
|
||
- [🏄 Usage](#-usage)
|
||
- [Providers](#providers)
|
||
- [Hooks](#hooks)
|
||
- [🦑 Development](#-development)
|
||
- [✨ Code Style](#-code-style)
|
||
- [👩🔬 Testing](#-testing)
|
||
- [🛳 Production](#-production)
|
||
- [⬆️ Releases](#️-releases)
|
||
- [📜 Changelog](#-changelog)
|
||
- [🎁 Contribute](#-contribute)
|
||
- [🧜 Authors](#-authors)
|
||
- [🏛 License](#-license)
|
||
|
||
## 🏗 Installation
|
||
|
||
```bash
|
||
npm install @oceanprotocol/react
|
||
```
|
||
|
||
## 🏄 Usage
|
||
|
||
First, wrap your App with the `Web3Provider` and the `OceanProvider`.
|
||
|
||
### Providers
|
||
|
||
```tsx
|
||
import React, { ReactNode } from 'react'
|
||
import Web3 from 'web3'
|
||
import { Web3Provider, OceanProvider, Config } from '@oceanprotocol/react'
|
||
|
||
const config: Config = {
|
||
nodeUri: '',
|
||
aquariusUri: ''
|
||
}
|
||
|
||
export default function MyApp({
|
||
children
|
||
}: {
|
||
children: ReactNode
|
||
}): ReactNode {
|
||
return (
|
||
<Web3Provider>
|
||
{(web3: Web3) => (
|
||
<OceanProvider config={config} web3={web3}>
|
||
<h1>My App</h1>
|
||
{children}
|
||
</OceanProvider>
|
||
)}
|
||
</Web3Provider>
|
||
)
|
||
}
|
||
```
|
||
|
||
The `OceanProvider` requires a Web3 instance to be passed as prop. To get you started, we added a basic `Web3Provider` which assumes an injected provider (like MetaMask), and will ask for permissions automatically on first mount.
|
||
|
||
We suggest you replace this provider with a more complete solution, since there are many UX considerations not handled in that basic provider, like activate only on user intent, listen for account & network changes, display connection instructions and errors, etc.
|
||
|
||
Some great solutions we liked to work with:
|
||
|
||
- [web3-react](https://github.com/NoahZinsmeister/web3-react)
|
||
- [web3modal](https://github.com/web3modal/web3modal)
|
||
|
||
### Hooks
|
||
|
||
Then within your component use the provided hooks to interact with Ocean's functionality. Each hook can be used independently:
|
||
|
||
```tsx
|
||
import React from 'react'
|
||
import { useOcean, useMetadata, useConsume } from '@oceanprotocol/react'
|
||
|
||
const did = 'did:op:0x000000000'
|
||
|
||
export default function MyComponent() {
|
||
// Initialize, get existing, or reinitialize Ocean
|
||
const { ocean, account } = useOcean()
|
||
|
||
// Get metadata for this asset
|
||
const { title, metadata } = useMetadata(did)
|
||
|
||
// publish asset
|
||
const { publish, publishStep } = usePublish()
|
||
|
||
// consume asset
|
||
const { consume, consumeStep } = useConsume()
|
||
|
||
async function handleClick() {
|
||
await consume(did)
|
||
}
|
||
|
||
return (
|
||
<div>
|
||
<h1>{title}</h1>
|
||
<p>Price: {metadata.main.price}</p>
|
||
|
||
<p>Your account: {account}</p>
|
||
<button onClick={handleClick}>{consumeStep || 'Download Asset'}</button>
|
||
</div>
|
||
)
|
||
}
|
||
```
|
||
|
||
## 🦑 Development
|
||
|
||
The project is authored with TypeScript and compiled with `tsc`.
|
||
|
||
To start compiler in watch mode:
|
||
|
||
```bash
|
||
npm start
|
||
```
|
||
|
||
## ✨ Code Style
|
||
|
||
For linting and auto-formatting you can use from the root of the project:
|
||
|
||
```bash
|
||
# auto format all ts & css with eslint & stylelint
|
||
npm run lint
|
||
|
||
# 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
|
||
```
|
||
|
||
## ⬆️ 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.
|
||
|
||
## 🧜 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)
|
||
|
||
## 🏛 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.
|
||
```
|