Webb Monorepo

🚀 Decentralized interfaces into the Webb protocol 🚀

📖 Table of Contents

Table of Contents

Getting Started
Testing
Contributing
License

Getting Started 🎉

This repo is a monorepo containing decentralized interfaces into the Webb protocol! It makes use of nx.dev for fast and extensible build system. The repo consists of 3 notable areas:

bridge-dapp: an interface for interacting and bridging assets cross-chain using Webb's Asset Protocol
stats-dapp: an interface for displaying statistics data of Webb's Tangle Network
webb-ui-components: a collection of reusable components for building interfaces quickly

For additional information, please refer to the Webb Official Documentation 📝. Have feedback on how to improve the webb-dapp interface? Or have a specific question to ask? Checkout the Webb Dapp Feedback Discussion 💬.

Prerequisites

This repository makes use of yarn, nodejs, and requires version node v16. To install node.js binaries, installers, and source tarballs, please visit https://nodejs.org/en/download/. Once node.js is installed you may proceed to install yarn:

npm install --global yarn

Great! Now your Node environment is ready! 🚀🚀

Run Hubble bridge locally 💻

Once the development environment is set up, you may proceed to install the required dependencies and run the dapp locally.

Clone this repo

git clone git@github.com:webb-tools/webb-dapp.git && cd webb-dapp

Install dependencies by yarn
```
yarn install
```
Start the bridge-dapp:
```
yarn start:bridge
```

Visit http://localhost:3000/ to see the Webb Bridge Dapp UI! 🕸️ 🚀

Run stats-dapp locally 💻

Once the development environment is set up, you may proceed to install the required dependencies and run the dapp locally.

Clone this repo

git clone git@github.com:webb-tools/webb-dapp.git && cd webb-dapp

Install dependencies by yarn
```
yarn install
```
Start the stats-dapp:
```
yarn start:stats
```

Visit http://localhost:3001/ to see the Webb Stats UI! 🕸️ 🚀

Testing 🧪

The following instructions outlines how to run Webb Dapp test suite.

To run tests

yarn test

To start Storybook for component library

Install dependencies by yarn
```
yarn install
```
Start the storybook:
```
yarn nx storybook webb-ui-components 
```

Visit http://localhost:4400/ to see the Webb Component Library! 🕸️ 🚀

Docker

Setup Container

Install and run Docker
Generate .env file from sample file

cp .env.example .env

Run Substrate front-end from a Docker container and follow the terminal log instructions.

./docker-dev.sh

Note: The script requires jq command to be installed (i.e. Ubuntu apt-get install -y jq)

Run Bridge Dapp

Enter Docker container

# last created docker container id
CONTAINER_ID=$(docker ps -n=1 -q)
docker exec -it $CONTAINER_ID yarn start:bridge

Wait until it says webpack ... compiled
Go to http://<IP_ADDRESS>:3000

Note: If run on your local machine then Substitute <IP_ADDRESS> with localhost. If hosted on a remote cloud provider then substitute it with the Public IP Address of the cloud provider server instance.

Run Stats Dapp

Enter Docker container

docker exec -it $CONTAINER_ID yarn start:stats

Wait until it says webpack ... compiled
Go to http://<IP_ADDRESS>:3001

Expose Ports

Open relevant ports if necessary

source .env && export PORT_BRIDGE_DAPP PORT_STATS_DAPP
apt install ufw
ufw default allow outgoing
ufw default allow incoming
ufw enable
ufw allow $PORT_BRIDGE_DAPP/tcp && ufw allow $PORT_BRIDGE_DAPP/udp
ufw allow $PORT_STATS_DAPP/tcp && ufw allow $PORT_STATS_DAPP/udp
ufw reload
ufw status

Useful Docker Commands

List Docker containers

docker ps -a

List Docker images

docker images -a

Enter Docker container shell

docker exec -it $CONTAINER_ID /bin/sh

View Docker container logs

docker logs -f $CONTAINER_ID

Remove Docker container

docker stop $CONTAINER_ID; docker rm $CONTAINER_ID;

Remove Docker image

docker rmi $IMAGE_ID

Contributing

Interested in contributing to the Webb Dapp interface? Thank you so much for your interest! We are always appreciative for contributions from the open-source community!

If you have a contribution in mind, please check out our Contribution Guide for information on how to do so. We are excited for your first contribution!

Lint before you push! 🪥

Please ensure you lint and format your changes prior to opening a PR.

To lint:

yarn lint

To Build:

yarn build

License

Licensed under Apache 2.0 license.

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in this crate by you, as defined in the Apache 2.0 license, shall be licensed as above, without any additional terms or conditions.

ltfschoen / webb-dapp