w3f-grants-archive/webb-dapp

Webb Tools UI

Webb Dapp 🕸️

🚀 A decentralized interface into the Webb protocol 🚀

📖 Table of Contents

Table of Contents

• Getting Started
• Usage
• Testing
• Contributing
• License

Getting Started 🎉

This is the official decentralized interface into the Webb protocol!

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

Packages directory overview

• apps: The endpoint of the dapp
• bridge: UI Components and hooks for the bridge
• contracts: Types and logic for interacting with smart contracts and generating zero knowledge proofs
• mixer: UI Components and hooks for the mixer
• page-xxx: The top view of different pages in the dapp
• react-components: application-specific React UI components
• react-environment: Typescript classes and APIs for application logic
• react-hooks: A variety of useful react hooks
• ui-components: Reusable UI components
• utils: Utilities like automatic note download, application storage, etc.
• wallet: For handling wallet logic of substrate/evm

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 locally 💻

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

1. Clone this repo

   git clone [email protected]:webb-tools/webb-dapp.git && cd webb-dapp

2. Install dependencies by yarn

   yarn install

3. Start the dapp:

   yarn start:dapp

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

Use locally cached substrate fixtures

• Download the proving key from proving_key_uncompressed.bin.
• Save it to packages/apps/public/cached-fixtures , the file name should be proving_key_uncompressed.bin .
• Run the dApp with yarn start:localDapp

Usage

Quick Start ⚡

Eager to try out the Webb Dapp and see it in full action? You can setup a local Mixer with a local Relayer or try running a local EVM bridge with the Dapp!

Mixer setup with local substrate node and Relayer

Follow the below steps to get up and running or follow the detailed how-to guide here.

Setup local nodes

1. Clone the protocol-substrate repo:

 git clone https://github.com/webb-tools/protocol-substrate

2. We are using ORML fork, and fixed zero knowledge keys to run the mixers. Run:

# populates fixed zero knowledge keys
git submodule update --init

3. Build the webb-standalone-node by running:

cargo build --release -p webb-standalone-node

4. Startup two standalone nodes in other terminal instances:

# Run in terminal 1
./target/release/webb-standalone-node --dev --alice --node-key 0000000000000000000000000000000000000000000000000000000000000001 --ws-port=9944 --rpc-cors all

# Run in terminal 2
./target/release/webb-standalone-node --dev --bob --port 33334 --tmp --bootnodes /ip4/127.0.0.1/tcp/30333/p2p/12D3KooWEyoppNCUx8Yx66oV9fJnriXwCcXwDDUA2kj6vnc6iDEp

Great! Now you have 2 local protocol-substrate nodes running! Now let's setup a local relayer. 🚀

Relayer

1. Clone the relayer:

git clone https://github.com/webb-tools/relayer.git

2. Build the relayer:

cargo build --release

3. Run with the local substrate configuration:

./target/release/webb-relayer -c config/local-substrate -vv

Congrats! 🎉 You now have a local mixer setup that you can use with this webb dapp locally!

EVM Bridge setup with local evm node and Relayer

Follow the below steps to get up and running. 🏃

Setup local EVM node

1. Clone the local testnet:

git clone https://github.com/webb-tools/evm-localnet

2. Populate fixed zero knowledge keys by running:

git submodule update --init

3. Install dependencies:

  yarn install

4. Start the local testnet with:

yarn start

Great! Now you have a local EVM node running! Now let's setup a local relayer. 🚀

Relayer

1. Clone the relayer:

git clone https://github.com/webb-tools/relayer.git

2. Build the relayer:

cargo build --release

3. Run with the local substrate configuration:

./target/release/webb-relayer -c config/local-testnet -vv

Congrats! 🎉 You now have a local bridge setup that you can use with this webb dapp locally!

Testing 🧪

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

To run tests

yarn test

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 format:

yarn format

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.