LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Chore/more docs (#331)

Browse Source 
* chore renable prettier md files

* remove duplicated information, add instructions on running formatting

* add more docs for other apps a libraries

* correct numbering

* Missing applications

* correction for serving

* more docs
This commit is contained in:
Dexter Edwards 2022-05-03 16:32:31 +01:00 committed by GitHub
parent 1d8de701c9
commit 9e82935658
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 242 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.prettierignore
View File

@ -3,4 +3,3 @@
/dist
/coverage
__generated__
*.md

54
README.md
View File

@ -6,25 +6,53 @@ This repository is managed using [Nx](https://nx.dev).
# 🔎 Applications in this repo
### [Block explorer](https://github.com/vegaprotocol/frontend-monorepo/tree/master/apps/explorer)
### [Block explorer](./apps/explorer)
The Vega block explorer provides an interface that allows users to search for and see transactions, blocks, parties, assets, markets and more on the Vega chain.
### [Trading UI](https://github.com/vegaprotocol/frontend-monorepo/tree/master/apps/trading)
### [Trading UI](./apps/trading)
The trading interface built based on a component toolkit. It will provide a way for participants to interact with markets and provide resources for others to build additional open-source user interfaces.
### [Token](./apps/token)
The utlity dApp for interacting with the Vega token and using its' utility. This includes; delegation, nomination, governance and redemption of tokens.
### [Explorer](./apps/explorer)
The block explorer for the Vega network, showing details of raw chain states and the state of markets on the Vega network.
### [Stats](./apps/stats)
An application for the status of the Vega network. Showing block height and other network activity.
### [Static](./apps/static)
Hosting for static content being shared across apps, for example fonts.
# 🧱 Libraries in this repo
### [UI toolkit](https://github.com/vegaprotocol/frontend-monorepo/tree/master/libs/ui-toolkit)
### [UI toolkit](./libs/ui-toolkit)
The UI toolkit contains a set of components used to build interfaces that can interact with the Vega protocol, and follow the design style of the project.
It contains a storybook that can be served with `yarn nx run ui-toolkit:storybook`.
### [Tailwind CSS config](https://github.com/vegaprotocol/frontend-monorepo/tree/master/libs/tailwindcss-config)
### [Tailwind CSS config](./libs/tailwindcss-config)
The Tailwind CSS config contains theme that align default config with Vega design system.
### [Cypress](./libs/cypress)
For shared Cypress logic, commands and steps.
### [Web3](./libs/web3)
A ulitity library for connecting to the Ethereum network and interacting with Vega Web3 contracts.
### [React Helpers](./libs/react-helpers)
Generic react helpers that can be used across multilpe applications, along with other utilties.
# 💻 Develop
### Set up
@ -37,15 +65,21 @@ The repository includes a number of template .env files for different networks.
Run `nx build my-app` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
Run `nx serve my-app` for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run `nx serve my-app` for a dev server. Navigate to the port specified in `app/<project-name>/project.json`. The app will automatically reload if you change any of the source files.
### Running tests
Run `yarn nx run <my-app>-e2e:e2e` to execute the e2e tests with [cypress](https://docs.cypress.io/). You can use the `--watch` flag to open the cypress tests UI in watch mode, see [cypress executor](https://nx.dev/packages/cypress/executors/cypress) for all CLI flags.
Run `yarn nx run <my-app>-e2e:e2e` to execute the e2e tests with [cypress](https://docs.cypress.io/), or `nx affected:e2e` will execute just the end-to-end tests affected by a change. You can use the `--watch` flag to open the cypress tests UI in watch mode, see [cypress executor](https://nx.dev/packages/cypress/executors/cypress) for all CLI flags.
Run `nx test my-app` to execute the unit tests with [Jest](https://jestjs.io), or `nx affected:test` to execute just unit tests affected by a change. You can also use `--watch` with these test to run jest in watch mode, see [Jest executor](https://nx.dev/packages/jest/executors/jest) for all CLI flags.
Similarly `nx e2e my-app` will execute the end-to-end tests with [Cypress](https://www.cypress.io)., and `nx affected:e2e` will execute just the end-to-end tests affected by a change.
### Formatting
In CI linting, formatting and also run. These checks can be seen in the [CI workflow file](.github/workflows//test.yml).
- To fix linting errors locally run `yarn nx lint --fix`
- To fix formatting errors local run `yarn nx format`
- For either command you may use `--all` to run across the entire repository
### Further help with Nx
@ -58,9 +92,9 @@ Visit the [Nx Documentation](https://nx.dev/getting-started/intro) to learn more
Follow the following steps to start using a local network with the Vega Explorer:
1. Prepare vegacapsule. Follow the [Vegacapsule instructions](https://github.com/vegaprotocol/vegacapsule#quick-start)
1. Build the explorer frontend application
1. Start the explorer frontend application with the `.env.vegacapsule` env file
1. Go to [http://localhost:3000](http://localhost:3000) in your browser
2. Build the explorer frontend application
3. Start the explorer frontend application with the `.env.vegacapsule` env file
4. Go to [http://localhost:3000](http://localhost:3000) in your browser
If you simply want to run Explorer locally, without using a local network:

7
apps/explorer/.env.vegacapsule
View File

@ -1,7 +0,0 @@
# App configuration variables
NX_CHAIN_EXPLORER_URL = "https://explorer.vega.trading/.netlify/functions/chain-explorer-api"
NX_TENDERMINT_URL = "http://localhost:26607/"
NX_TENDERMINT_WEBSOCKET_URL = "wss://localhost:26607/websocket"
NX_VEGA_URL = "http://localhost:3003/query"
NX_VEGA_ENV = 'CUSTOM'
NX_VEGA_REST = 'http://localhost:3029/rest'

71
apps/explorer/README.md Normal file
View File

@ -0,0 +1,71 @@
## Explorer
## Features
- Transactions - Showing all transactions and decoded individual transactions
- Search - Search for block number or transaction hash
- Blocks - A list of the blocks on our chain and the transactions within each block
- Assets - List of all assets on the Vega chain
- Genesis - The initial Genesis configuration the network was started with
- Governance - Current and past governance proposals
- Markets - The markets currently open and expired on the Vega network
- Network Parameters - The current network parameters
- Parties - Searching for a specific party and the details for that party
- Validators - The validator information in Vega and Tendermint
## Development
First copy the configuration of the application you are starting:
```bash
cp .env.[environment] .env.local
```
Starting the app:
```bash
yarn nx serve explorer
```
### Configuration
Example configurations are provided here:
- [Mainnet](./.env.mainnet)
- [Testnet](./.env.testnet)
- [Capsule](./.env.capsule)
- [Testnet](./.env.testnet)
- [Stagnet1](./.env.stagnet1)
- [Stagnet2](./.env.stagnet2)
There are a few different configuration options offered for this app:
| **Flag** | **Purpose** |
| -------------------------------- | ---------------------------------------------------------------------------------------------------- |
| `NX_CHAIN_EXPLORER_URL` | The URL of the chain explorer service for decoding transactions |
| `NX_TENDERMINT_URL` | The Tendermint REST URL for the Vega consesus engine |
| `NX_TENDERMINT_WEBSOCKET_URL` | The Tendermint Websocket URL for the Vega consensus engine |
| `NX_VEGA_URL` | The GraphQl query endpoint of a [Vega data node](https://github.com/vegaprotocol/networks#data-node) |
| `NX_VEGA_ENV` | The name of the currently connected vega environment |
| `NX_VEGA_REST` | The REST URL for the Vega Data Node |
| `NX_EXPLORER_ASSETS` | Enable the assets page for the explorer |
| `NX_EXPLORER_GENESIS` | Enable the genesis page for the explorer |
| `NX_EXPLORER_GOVERNANCE` | Enable the governance page for the explorer |
| `NX_EXPLORER_MARKETS` | Enable the markets page for the explorer |
| `NX_EXPLORER_NETWORK_PARAMETERS` | Enable the network parameters page for the explorer |
| `NX_EXPLORER_PARTIES` | Enable the parties page for the explorer |
| `NX_EXPLORER_VALIDATORS` | Enable the validators page for the explorer |
## Testing
To run the minimal set of unit tests, run the following:
```bash
yarn nx test explorer
```
To run the UI automation tests with a mocked API, run:
```bash
yarn nx run explorer-e2e:e2e
```

3
apps/static/README.md Normal file
View File

@ -0,0 +1,3 @@
# Static
A static CDN for Vega assets

2
apps/stats/.env.mainnet
View File

@ -1 +1,3 @@
# App configuration variables. No overrides for default urls
NX_VEGA_ENV = 'MAINNET'
NX_VEGA_REST = 'https://api.token.vega.xyz/'

2
apps/stats/.env.stagnet1
View File

@ -1,3 +1,3 @@
# App configuration variables
NX_VEGA_ENV = 'STAGNET 1'
NX_VEGA_ENV = 'STAGNET1'
NX_VEGA_REST = 'https://n03.s.vega.xyz/datanode/rest'

4
apps/stats/.env.stagnet2
View File

@ -1,3 +1,3 @@
# App configuration variables
NX_VEGA_ENV = 'STAGNET 2'
NX_VEGA_REST = 'https://n01.stagnet2.vega.xyz/datanode/rest'
NX_VEGA_ENV = 'STAGNET2'
NX_VEGA_REST = 'https://n03.stagnet2.vega.xyz/datanode/rest'

70
apps/token/README.md Normal file
View File

@ -0,0 +1,70 @@
# The Vega token website
**_Control panel for your VEGA tokens_**
<img width="1438" alt="Screenshot 2021-12-11 at 06 32 51" src="https://user-images.githubusercontent.com/13255539/145666935-563fc1ff-35bc-4cd9-ae6d-cf711cc23454.png">
## Features
- View vesting progress
- Redeem VEGA tokens
- Stake VEGA tokens
- Withdraw tokens
- Vote on proposals
# Development
Starting the app:
`yarn nx serve token`
## Configuration
There are a few different configuration options offered for this app:
| **Flag** | **Purpose** |
| ------------------------------ | ---------------------------------------------------------------------------------------------------- |
| `NX_APP_SENTRY_DSN` | The sentry endpoint to report to. Should be off in dev but set in live. |
| `NX_APP_CHAIN` | The ETH chain for the app to work on. Should be mainnet for live, but ropsten for preview deploys. |
| `NX_APP_VEGA_URL` | The GraphQL query endpoint of a [Vega data node](https://github.com/vegaprotocol/networks#data-node) |
| `NX_APP_DEX_STAKING_DISABLED` | Disable the dex liquidity page an show a coming soon message |
| `NX_APP_FAIRGROUND` | Change styling to be themed as the fairground version of the website |
| `NX_APP_INFURA_ID` | Infura fallback for if the user does not have a web3 compatible browser |
| `NX_APP_HOSTED_WALLET_ENABLED` | If the hosted wallet is enabled or not. If so then allow users to login using the hosted wallet |
| `NX_APP_ENV` | Change network to connect to. When set to CUSTOM use CUSTOM\_\* vars for network parameters |
| `CUSTOM_URLS` | When NX_APP_ENV=CUSTOM use these Data Node REST URLs, optional if CUSTOM_URLS_WITH_GRAPHQL is used. |
| `CUSTOM_URLS_WITH_GRAPHQL` | When NX_APP_ENV=CUSTOM use these Data Node GraphQL URLs, optional if CUSTOM_URLS is used. |
| `CUSTOM_TOKEN_ADDRESS` | When NX_APP_ENV=CUSTOM specify Vega token address. |
| `CUSTOM_CLAIM_ADDRESS` | When NX_APP_ENV=CUSTOM specify Vega claim address. |
| `CUSTOM_LOCKED_ADDRESS` | When NX_APP_ENV=CUSTOM specify Vega locked address. |
| `CUSTOM_VESTING_ADDRESS` | When NX_APP_ENV=CUSTOM specify Vega vesting address. |
| `CUSTOM_STAKING_BRIDGE` | When NX_APP_ENV=CUSTOM specify Vega staking bridge address. |
## Example configs:
For example configurations, check out our [netlify.toml](./netlify.toml).
## Testing
To run the minimal set of unit tests, run the following:
```bash
yarn nx test token
```
To run the UI automation tests with a mocked API, run:
```bash
yarn nx run token-e2e:e2e
```
## See also
- [vega-locked-erc20](https://github.com/vegaprotocol/vega-locked-erc20) - proxy contract that shows your current balance
of locked tokens
- [VEGA Tokens: Vesting Details](https://blog.vega.xyz/vega-tokens-vesting-details-890b00fc238e) - blog describing
the vesting process & key dates
- [Introducing the VEGA token](https://blog.vega.xyz/introducing-the-vega-token-40dac090b5c1) - blog about the VEGA
token
- [The VEGA Token Listing & LP Incentives](https://blog.vega.xyz/unlocking-vega-coinlist-pro-uniswap-sushiswap-b1414750e358) - blog about the token and site
- [vega.xyz](https://vega.xyz) - about Vega Protocol

49
apps/trading/README.md Normal file
View File

@ -0,0 +1,49 @@
## Trading
## Development
First copy the configuration of the application you are starting:
```bash
cp .env.[environment] .env.local
```
Starting the app:
```bash
yarn nx serve explorer
```
### Configuration
Example configurations are provided here:
- [Mainnet](./.env.mainnet)
- [Testnet](./.env.testnet)
- [Testnet](./.env.testnet)
- [Stagnet1](./.env.stagnet1)
- [Stagnet2](./.env.stagnet2)
There are a few different configuration options offered for this app:
| **Flag** | **Purpose** |
| -------------------------- | -------------------------------------------------------------------------------------------------------- |
| `NX_VEGA_ENV` | The name of the currently connected vega environment |
| `NX_VEGA_URL` | The GraphQL query endpoint of a [Vega data node](https://github.com/vegaprotocol/networks#data-node) |
| `NX_ETHEREUM_CHAIN_ID` | The ID of the Ethereum chain the currently connected Vega Network uses. E.g. Ropsten (3) for testnet |
| `NX_ETHEREUM_PROVIDER_URL` | The Ethereum Provider URL for getting data from the Ethereum network, for example Infura or a local node |
| `NX_ETHERSCAN_URL` | The Etherscan URL to link Ethereum transactions to |
## Testing
To run the minimal set of unit tests, run the following:
```bash
yarn nx test trading
```
To run the UI automation tests with a mocked API, run:
```bash
yarn nx run trading-e2e:e2e
```