dexFreight Marketplace

🚚 Data marketplace for dexFreight.

Table of Contents

• 🤓 Resources
• 🏄 Get Started
  • Local Spree components with Barge
• 🦑 Environment variables
• 🎨 Storybook
• ✨ Code Style
• 👩‍🔬 Testing
• 🛳 Production
• ⬆️ Deployment
  • Manual Deployment
• 🏗 Ocean Protocol Infrastructure
• 🏛 License

🤓 Resources

• UI Design: Figma Mock Up
• Planning: ZenHub Board

🏄 Get Started

The app is a React app built with Next.js + TypeScript + CSS modules and will connect to Ocean components in Pacific by default.

To start local development:

git clone git@github.com:oceanprotocol/dexfreight.git
cd dexfreight

npm install
npm start

This will launch the app under localhost:3000.

Depending on your configuration, you might have to increase the amount of inotify watchers:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Local Spree components with Barge

If you prefer to connect to locally running components instead of remote connections to Ocean's network, you can spin up barge and use a local Spree network in another terminal before running npm start:

git clone git@github.com:oceanprotocol/barge.git
cd barge

# startup with local Spree node
./start_ocean.sh --no-commons

This will take some time on first start, and at the end you need to copy the generated contract artifacts out of the Docker container. To do so, use this script from the root of the app folder:

./scripts/keeper.sh

The script will wait for all contracts to be generated in the keeper-contracts Docker container, then will copy the artifacts in place into node_modules/@oceanprotocol/keeper-contracts/artifacts/.

Finally, set environment variables to use those local connections in .env & .env.build in the app:

# modify env variables, Spree is enabled by default when using those files
cp .env.example .env && cp .env.example .env.build

🦑 Environment variables

The ./src/config/ocean.ts 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 ./src/config/ocean.ts.

For local development, you can use a .env & .env.build file:

# modify env variables, Spree is enabled by default when using those files
cp .env.example .env && cp .env.example .env.build

For a Now deployment, all environment variables defining the Ocean component endpoints need to be added with now secrets to oceanprotocol org based on the @ variable names defined in now.json, e.g.:

now switch
now secrets add aquarius_uri https://aquarius.pacific.dexfreight.dev-ocean.com

Adding the env vars like that will provide them during both, build & run time.

🎨 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.

Every deployment run will build and deploy the exported storybook under /storybook/, e.g. the current one matching master under https://dexfreight-ten.now.sh/storybook/.

✨ 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
• node-mocks-http for all src/pages/api/ routes

Note: fully testing Next.js API routes should be part of integration tests. There are various problems with fully testing them so a proper unit test suite for them should be setup.

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 Now with their GitHub integration. A link to a deployment will appear under each Pull Request.

The latest deployment of the master branch is automatically aliased to xxx.

Manual Deployment

If needed, app can be deployed manually. Make sure to switch to Ocean Protocol org before deploying:

# first run
now login
now switch

# deploy
now
# switch alias to new deployment
now alias

🏗 Ocean Protocol Infrastructure

The following Aquarius & Brizo instances specifically for dexFreight marketplace are deployed in Ocean Protocol's AWS K8:

Nile (Staging)

• K8 namespace: dexfreight-nile
• aquarius.nile.dexfreight.dev-ocean.com
• brizo.nile.dexfreight.dev-ocean.com

Edit command with kubectl, e.g.:

kubectl edit deployment -n dexfreight-nile aquarius

Pacific (Production)

• K8 namespace: dexfreight-pacific
• aquarius.pacific.dexfreight.dev-ocean.com
• brizo.pacific.dexfreight.dev-ocean.com

Edit command with kubectl, e.g.:

kubectl edit deployment -n dexfreight-pacific aquarius

🏛 License

Copyright 2019 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.