()
useEffect(() => {
if (!account) return
const source = axios.CancelToken.source()
async function get3Box() {
const profile = await get3BoxProfile(account, source.token)
if (!profile) return
setProfile(profile)
}
get3Box()
return () => {
source.cancel()
}
}, [account])
return (
{profile.emoji} {profile.name}
)
}
```
### Purgatory
Based on [list-purgatory](https://github.com/oceanprotocol/list-purgatory) some data sets get additional data. Within most components this can be done with the internal `useAsset()` hook which fetches data from the [market-purgatory](https://github.com/oceanprotocol/market-purgatory) endpoint in the background.
```tsx
import { useAsset } from '../../../providers/Asset'
function Component() {
const { isInPurgatory, purgatoryData } = useAsset()
return isInPurgatory ? {purgatoryData.reason}
: null
}
```
## 🎨 Storybook
> TODO: this is broken for most components. See https://github.com/oceanprotocol/market/issues/128
[Storybook](https://storybook.js.org) is set up for this project and is used for UI development of components. Stories are created inside `src/components/` alongside each component in the form of `ComponentName.stories.tsx`.
To run the Storybook server, execute in your Terminal:
```bash
npm run storybook
```
This will launch the Storybook UI with all stories loaded under [localhost:4000](http://localhost:4000).
## ✨ Code Style
Code style is automatically enforced through [ESLint](https://eslint.org) & [Prettier](https://prettier.io) rules:
- Git pre-commit hook runs `prettier` on staged files, setup with [Husky](https://typicode.github.io/husky)
- VS Code suggested extensions and settings for auto-formatting on file save
- CI runs a linting & TypeScript typings check with `npm run lint`, and fails if errors are found
For running linting and auto-formatting manually, you can use from the root of the project:
```bash
# linting check, also runs Typescript typings check
npm run lint
# auto format all files in the project with prettier, taking all configs into account
npm run format
```
## 👩🔬 Testing
> TODO: this is broken and never runs in CI. See https://github.com/oceanprotocol/market/issues/128
Test suite for unit tests is setup with [Jest](https://jestjs.io) as a test runner and:
- [react-testing-library](https://github.com/kentcdodds/react-testing-library) for all React components
To run all linting and unit tests:
```bash
npm test
```
For local development, you can start the test runner in a watch mode.
```bash
npm run test:watch
```
For analyzing the generated JavaScript bundle sizes you can use:
```bash
npm run analyze
```
## 🛳 Production
To create a production build, run from the root of the project:
```bash
npm run build
# serve production build
npm run serve
```
## ⬆️ Deployment
Every branch or Pull Request is automatically deployed to multiple hosts for redundancy and emergency reasons:
- [Netlify](https://netlify.com)
- [Vercel](https://vercel.com)
- [S3](https://aws.amazon.com/s3/)
A link to a preview deployment will appear under each Pull Request.
The latest deployment of the `main` branch is automatically aliased to `market.oceanprotocol.com`, where the deployment on Netlify is the current live deployment.
## 💖 Contributing
We welcome contributions in form of bug reports, feature requests, code changes, or documentation improvements. Have a look at our contribution documentation for instructions and workflows:
- [**Ways to Contribute →**](https://docs.oceanprotocol.com/concepts/contributing/)
- [Code of Conduct →](https://docs.oceanprotocol.com/concepts/code-of-conduct/)
- [Reporting Vulnerabilities →](https://docs.oceanprotocol.com/concepts/vulnerabilities/)
## 🏛 License
```text
Copyright 2021 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.
```