Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .nvmrc
Original file line number Diff line number Diff line change
@@ -1 +1 @@
v18
18.18
209 changes: 69 additions & 140 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,185 +3,114 @@

![Tangle Logo](./.github/assets/tangle-banner.png)
</a>
</div>

</div>
# Tangle dApp Monorepo

# Tangle Monorepo

<p align="left">
<strong>Decentralized interfaces into the Tangle Network, featuring Tangle Network dApps for MPC-as-a-service staking infrastructure.</strong>
<br />
</p>
Decentralized interfaces for the [Tangle Operator Layer for AI services](https://tangle.tools), built on the TNT EVM protocol stack from `tnt-core`.

[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/tangle-network/dapp/check-build.yml?branch=develop&style=flat-square)](https://github.com/tangle-network/dapp/actions)
[![License Apache 2.0](https://img.shields.io/badge/License-Apache%202.0-blue.svg?style=flat-square)](https://www.apache.org/licenses/LICENSE-2.0.html)
[![Follow Tangle on twitter](https://img.shields.io/twitter/follow/tangle_network.svg?style=social)](https://twitter.com/intent/follow?screen_name=tangle_network)
[![Telegram](https://img.shields.io/badge/Telegram-gray?logo=telegram)](https://t.me/tanglenet) [![Discord](https://img.shields.io/discord/833784453251596298.svg?style=flat-square&label=Discord&logo=discord)](https://discord.gg/cv8EfJu3Tn)

<!-- TABLE OF CONTENTS -->
<h2 id="table-of-contents" style=border:0!important> Table of Contents </h2>

<details open="open">
<summary id="#table-of-contents">Table of Contents</summary>
<ul>
<li><a href="#start">Getting Started</a></li>
<li><a href="#apps">Applications</a></li>
<li><a href="#libs">Libraries</a></li>
<li><a href="#test">Testing</a></li>
<li><a href="#contribute">Contributing</a></li>
<li><a href="#how-to-release">How to release (for maintainers)</a></li>
<li><a href="#license">License</a></li>
<li><a href="#help">Need help?</a></li>
</ul>
</details>

<h2 id="start"> Getting Started </h2>

This monorepo is the cornerstone for decentralized interfaces within the Tangle Network, incorporating a suite of dApps, including the revolutionary [Tangle Network](https://tangle.tools) applications. These applications are geared towards kickstarting advanced cryptographic developments and innovations in blockchain technology, leveraging multi-party computation (MPC) services and cross-chain capabilities.

It uses [nx.dev](https://nx.dev/) for fast and extensible building. The `apps` directory contains the protocol's interfaces while `libs` contains the necessary code and logic.

### Prerequisites

This repository makes use of yarn, nodejs, and requires version node v18.18.x. To install node.js binaries, installers, and source tarballs, please visit https://nodejs.org/en/download/.

<div align="right"><a href="#table-of-contents">↑ Back to top ↑</a></div>

<h2 id="apps"> Applications </h2>

- [tangle-dapp](./apps/tangle-dapp/README.md): the central hub to managing Tangle Network assets and MPC (Multi-Party Computation) services.

<div align="right"><a href="#table-of-contents">↑ Back to top ↑</a></div>
## Applications

<h2 id="libs"> Libraries </h2>
- [apps/tangle-dapp](./apps/tangle-dapp/README.md): end-user staking, delegation, rewards, and wallet flows.
- [apps/tangle-cloud](./apps/tangle-cloud/README.md): operator/developer workflows for blueprint and service lifecycle management.
- `apps/leaderboard`: operator and protocol analytics.

- `abstract-api-provider`: a collection of base and abstract classes that unify the API across multiple providers.
- `api-provider-environment`: contains the React context definitions, the app event, and functions for handling interactive feedback errors.
- `browser-utils`: contains all the browser utility functions, such as fetch with caching, download file and string, the customized logger class, get browser platform, and the storage factory function for interacting with local storage.
- `dapp-config`: contains all configurations (chains, wallets, contracts, etc.) for the dApps.
- `dapp-types`: contains all the sharable TypeScript types and interfaces across the apps.
- `icons`: contains all the sharable icons across the apps.
- `tangle-shared-ui`: the library contains the logic and UI components that specialize in the Tangle Network (hooks, GraphQL queries, etc.).
- [ui-components](./libs/ui-components/README.md): a collection of reusable components for building interfaces quickly.
- `web3-api-provider`: the EVM provider for wallet connections and contract interactions.
## Tech Stack

<div align="right"><a href="#table-of-contents">↑ Back to top ↑</a></div>
- Monorepo: `Nx`
- Package manager: `Yarn 4` workspaces
- Runtime: `Node.js >= 18.18.x`
- Frontend: `React + Vite`
- Data plane: GraphQL indexer + on-chain reads/writes
- Protocol contracts and indexer source of truth: `../tnt-core`

<h2 id="test"> Testing </h2>
## Quick Start

The following instructions outlines how to run Tangle dApp test suite.
1. Install Node 18.18+ and enable Corepack:

### To run tests

```
yarn test
```bash
corepack enable
```

### To start [Storybook](https://storybook.js.org/) for component library
2. Install dependencies:

1. Install dependencies by `yarn`

```bash
yarn install
```
```bash
yarn install
```

2. Start the storybook:
3. Set environment variables:

```bash
yarn nx storybook ui-components
```
```bash
cp .env.example .env.local
```

Visit `http://localhost:4400/` to see the Tangle Component Library!
Minimum expected values:

<div align="right"><a href="#table-of-contents">↑ Back to top ↑</a></div>
- `VITE_GRAPHQL_ENDPOINT` -> Envio/Hasura endpoint for the chain you target.
- `VITE_WALLETCONNECT_PROJECT_ID` (optional) -> WalletConnect support.

<h2 id="contribute"> Contributing </h2>
4. Run apps:

Interested in contributing to the Tangle dApp interface? Thank you so much for your interest! We are always appreciative for contributions from the open-source community!
```bash
yarn nx serve tangle-dapp # http://localhost:4200
yarn nx serve tangle-cloud # http://localhost:4201
yarn nx serve leaderboard # http://localhost:4202
```

If you would like to contribute, please refer to our [Contribution Guide](./.github/CONTRIBUTING.md) for instructions. We are excited for your first contribution!
## Working With `tnt-core`

### Lint before you push!
This repo is designed to run against a sibling checkout at `../tnt-core`.

Please ensure you lint and format your changes prior to opening a PR.
When developing locally:

**To lint:**
- Ensure the wallet chain matches the chain where `tnt-core` contracts are deployed.
- Ensure `VITE_GRAPHQL_ENDPOINT` points at the matching indexer for that chain.
- Refresh contract metadata/assets when protocol changes land:

```
yarn lint
```bash
yarn sync:tnt-core-assets
```

**To Format:**
Helper scripts:

```
yarn format
```bash
yarn infra:local
yarn script:setupServices
yarn script:setupStaking
```

**To Build:**
## Quality Gates

```
```bash
yarn lint
yarn test
yarn build
yarn check:codegen
```

Additionally, to ensure commit message consistency, this repository uses [commitlint](https://commitlint.js.org/#/). Please refer to the [Commit Message Guidelines](./.github/CONTRIBUTING.md#commit-message-guidelines) for more information.

<div align="right"><a href="#table-of-contents">↑ Back to top ↑</a></div>

<h2 id="how-to-release"> How to release (for maintainers) </h2>

To release a new version of the projects in this monorepo, follow these steps:

1. Create a new branch from `develop`.
2. Run `yarn run generate:release` to review the new bump version and the changelog.

2.1. To release specific projects, use `,` to separate the project names, use the `--projects` flag: `yarn run generate:release --projects=ui-components,other-project`, default is all projects.

3. If everything looks good, run `yarn run generate:release -d=false` to apply changes, stage, and
commit them.

3.1. If you don't want to commit the changes, run `yarn run generate:release -d=false --gitCommit=false`. This will only update the version and changelog files.

3.2. There are a few options available for the `generate:release` script. You can check them by running `yarn run generate:release --help`.

4. Push and open a PR to `develop`, the PR title should start with `[RELEASE]` in order to trigger the release workflow.
5. After the PR is merged, the release workflow will sync the changes to the `master` branch if the commit message starts with `[RELEASE]` on the `develop` branch. The release workflow will also create a new release on GitHub.
Wallet-flow E2E-style test suite:

<div align="right"><a href="#table-of-contents">↑ Back to top ↑</a></div>

<h2 id="license"> License </h2>

Licensed under <a href="LICENSE">Apache 2.0 license</a>.

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.

<div align="right"><a href="#table-of-contents">↑ Back to top ↑</a></div>

<h2 id="help"> Need help? </h2>

If you need help or you want to additional information please:

- Refer to the [Tangle Network Official Documentation](https://docs.tangle.tools/).
- If you have feedback on how to improve the dApp interface or you have a specific question? Check out the [Tangle dApp Feedback Discussion](https://github.com/tangle-network/feedback/discussions/categories/tangle-dapp) or [Tangle dApp Feedback Discussion](https://github.com/tangle-network/feedback/discussions/categories/dapp-feedback).
- If you found a bug please [open an issue](https://github.com/tangle-network/dapp/issues/new/choose) or [join our Discord](https://discord.gg/jUDeFpggrR) server to report it.
```bash
yarn test:wallet-flows
yarn test:wallet-flows:list
```

---
## Package Manager Policy

**Follow us at**
[![Follow Tangle on twitter](https://img.shields.io/twitter/follow/tangle_network.svg?style=social)](https://twitter.com/intent/follow?screen_name=tangle_network)
[![Follow Webb on LinkedIn](https://img.shields.io/badge/LinkedIn-webbprotocol-blue?style=flat&logo=linkedin&logoColor=b0c0c0&labelColor=363D44)](https://www.linkedin.com/company/webb-protocol/)
Yarn is the canonical package manager for this repository today (`yarn.lock`, Yarn-focused CI, and release workflows). A pnpm migration can be done later as a dedicated infra change, but this branch intentionally keeps one package-manager source of truth to avoid CI/tooling drift.

---
## Contributing

**Share** the project link with your network on social media.
- Open PRs against `develop` unless release instructions specify otherwise.
- Run `yarn lint`, `yarn test`, and `yarn build` before opening PRs.
- Follow [.github/CONTRIBUTING.md](./.github/CONTRIBUTING.md).

<a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A//github.com/tangle-network/dapp" target="_blank">
<img src="https://img.shields.io/twitter/url?label=LinkedIn&logo=LinkedIn&style=social&url=https%3A%2F%2Fgithub.com%2Ftangle-network%2Fdapp" alt="Share on LinkedIn"/>
</a>
<a href="https://twitter.com/intent/tweet?text=%F0%9F%9A%80%20Explore%20%60tangle-network/dapp%60%20Monorepo%20on%20Github%3A%20https%3A//github.com/tangle-network/dapp" target="_blank">
<img src="https://img.shields.io/twitter/url?label=Twitter&logo=X&style=social&url=https%3A%2F%2Fgithub.com%2Ftangle-network%2Fdapp" alt="Shared on Twitter"/>
</a>
<a href="https://t.me/share/url?text=%F0%9F%9A%80%20Explore%20%60tangle-network/dapp%60%20Monorepo%20on%20Github%3A%20your%20%23zeroKnowledgeApp%20in%20%23blockchain.%20Secure%2c%20efficient%20%23crypto%20interactions%20await!%0A%0ADive%20in%20%E2%9E%A1%EF%B8%8F%20https%3A//github.com/tangle-network/dapp%20%23TangleEcosystem&url=https%3A%2F%2Fgithub.com%2Ftangle-network%2Fdapp" target="_blank">
<img src="https://img.shields.io/twitter/url?label=Telegram&logo=Telegram&style=social&url=https%3A%2F%2Fgithub.com%2Ftangle-network%2Fdapp" alt="Share on Telegram"/>
</a>
## Help

<div align="right"><a href="#table-of-contents">↑ Back to top ↑</a></div>
- Docs: https://docs.tangle.tools/
- Feedback: https://github.com/tangle-network/feedback/discussions/categories/dapp-feedback
- Issues: https://github.com/tangle-network/dapp/issues/new/choose
- Discord: https://discord.gg/jUDeFpggrR
42 changes: 42 additions & 0 deletions apps/tangle-cloud/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<div align="center">
<a href="https://www.tangle.tools/">

![Tangle Logo](../../.github/assets/tangle-banner.png)
</a>
</div>

# Tangle Cloud

Operator and developer interface for the Tangle Operator Layer for AI services. This app covers blueprint registration, service deployment, service operations, operator flows, and related transaction tracking.

## Run Locally

1. Install dependencies from repo root:

```bash
yarn install
```

2. Configure env from root `.env.example`:

```bash
cp .env.example .env.local
```

Required baseline:

- `VITE_GRAPHQL_ENDPOINT` for your target chain/indexer.

3. Start app:

```bash
yarn nx serve tangle-cloud
```

Default URL: `http://localhost:4201`

## Notes

- Node.js: `>=18.18.x`
- Package manager: `Yarn 4`
- Protocol contracts/indexer source: sibling `../tnt-core`
9 changes: 0 additions & 9 deletions apps/tangle-cloud/pnpm-lock.yaml

This file was deleted.

54 changes: 26 additions & 28 deletions apps/tangle-dapp/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,48 +3,46 @@

![Tangle Logo](../../.github/assets/tangle-banner.png)
</a>

</div>
</div>

# Tangle dApp

<p align="left">
<strong>An interface for nominating validators on the Tangle network, managing account, bridging TNT, and more.</strong>
<br />
</p>
Frontend for Tangle staking and delegation experiences on EVM, including wallet connection, deposits/withdrawals, delegation management, and reward visibility.

## Run Tangle dApp
## Run Locally

Once the development environment is set up, you may proceed to install the required dependencies and run the dapp locally.
1. Install dependencies from repo root:

1. Clone this repo
```bash
yarn install
```

```bash
git clone git@github.com:tangle-network/dapp.git
```
2. Configure env from root `.env.example`:

2. Install dependencies by `yarn`
```bash
cp .env.example .env.local
```

```bash
yarn install
```
Required baseline:

⚠️ **REQUIRED:** Node.js version >= v18.18.x
- `VITE_GRAPHQL_ENDPOINT` for your target chain/indexer.

3. Start the dApp by the following command:
3. Start app:

```bash
yarn nx serve tangle-dapp
```
```bash
yarn nx serve tangle-dapp
```

Visit `http://localhost:4200/` to see the Tangle dApp!
Default URL: `http://localhost:4200`

Happy hacking!
## Notes

<h2 id="help"> Need help? </h2>
- Node.js: `>=18.18.x`
- Package manager: `Yarn 4`
- Protocol contracts/indexer source: sibling `../tnt-core`

If you need help or you want to additional information please:
## Help

- Refer to the [Tangle Network Official Documentation](https://docs.tangle.tools/).
- If you have feedback on how to improve the Tangle Dapp interface or you have a specific question? Check out the [Tangle Dapp Feedback Discussion](https://github.com/tangle-network/feedback/discussions/categories/dapp-feedback).
- If you found a bug please [open an issue](https://github.com/tangle-network/dapp/issues/new/choose) or [join our Discord](https://discord.gg/jUDeFpggrR) server to report it.
- Docs: https://docs.tangle.tools/
- Feedback: https://github.com/tangle-network/feedback/discussions/categories/dapp-feedback
- Issues: https://github.com/tangle-network/dapp/issues/new/choose
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
],
"private": true,
"engines": {
"node": ">=18.12.x"
"node": ">=18.18.x"
},
"scripts": {
"commit": "commit",
Expand Down
Loading