Matthias Kretschmann
84746b1027
* fix conversion number formatting * switch to symbol formatting for fiat * hack in consistent visual symbol formatting * add more fiat currencies * no need for custom isFiat regex * consistent number column formatting |
||
---|---|---|
.github | ||
.storybook | ||
content | ||
gatsby | ||
src | ||
tests/unit | ||
.env.example | ||
.eslintrc | ||
.gitignore | ||
.prettierrc | ||
.travis.yml | ||
app.config.js | ||
gatsby-browser.js | ||
gatsby-config.js | ||
gatsby-node.js | ||
gatsby-ssr.js | ||
LICENSE | ||
package-lock.json | ||
package.json | ||
README.md | ||
tsconfig.json | ||
vercel.json |
Ocean Marketplace
Table of Contents
- 🏄 Get Started
- 🦑 Environment variables
- 🎨 Storybook
- ✨ Code Style
- 👩🔬 Testing
- 🛳 Production
- ⬆️ Deployment
- 🏛 License
🏄 Get Started
The app is a React app built with Gatsby.js + TypeScript + CSS modules and will connect to Ocean components in Rinkeby by default.
To start local development:
git clone git@github.com:oceanprotocol/market.git
cd market
npm install
npm start
This will start the development server under
http://localhost:8000
.
To explore the generated GraphQL data structure fire up the accompanying GraphiQL IDE under
http://localhost:8000/__graphql
.
Local components with Barge
If you prefer to connect to locally running components instead of remote connections, you can spin up barge
and use a local Ganache network in another terminal before running npm start
:
git clone git@github.com:oceanprotocol/barge.git
cd barge
# startup with local Ganache node
./start_ocean.sh
Finally, set environment variables to use this local connection in .env
in the app:
# modify env variables, Rinkeby is enabled by default when using those files
cp .env.example .env
🦑 Environment variables
The app.config.js
file is setup to prioritize environment variables for setting each Ocean component endpoint. By setting environment variables, you can easily switch between Ocean networks the app connects to, without directly modifying app.config.js
.
For local development, you can use a .env
file:
# modify env variables, Rinkeby is enabled by default when using those files
cp .env.example .env
🎨 Storybook
Storybook 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:
npm run storybook
This will launch the Storybook UI with all stories loaded under localhost:4000.
✨ Code Style
For linting and auto-formatting you can use from the root of the project:
# lint all js with eslint
npm run lint
# auto format all js & css with prettier, taking all configs into account
npm run format
👩🔬 Testing
Test suite for unit tests is setup with Jest as a test runner and:
- react-testing-library for all React components
To run all linting and unit tests:
npm test
For local development, you can start the test runner in a watch mode.
npm run test:watch
For analyzing the generated JavaScript bundle sizes you can use:
npm run analyze
🛳 Production
To create a production build, run from the root of the project:
npm run build
# serve production build
npm run serve
⬆️ Deployment
Every branch or Pull Request is automatically deployed by Vercel with their GitHub integration. A link to a deployment will appear under each Pull Request.
The latest deployment of the main
branch is automatically aliased to market-six.now.sh
.
Manual Deployment
If needed, app can be deployed manually to Vercel. Make sure to switch to Ocean Protocol org before deploying:
# first run
vercel login
vercel switch
# deploy
vercel
# switch alias to new deployment
vercel alias
🏛 License
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.