Toolkit for building apps that interact with Vega
Go to file
m.ray 8e25108701
Feat/463 vega transaction component links to block explorer (#666)
* chore: [#471] update @vegaprotocol/vegawallet-service-api-client to 0.4.12

* fix: [#471] set up storybook in order-list lib and add tailwind

* fix: [#471] organize order list components

* chore: [471] pull theme switcher changes

* feat: [#471] add cancel order button

* feat: [#471] initial impl of use order cancel hook

* fix: [#471] fix format of the price in order list

* fix: #471 fix static assets issue when merging

* fix:  #471 refactor order dialog to vega tx dialog

* fix: #471 move use cancel order hook in wallet lib

* fix: [#471] cancel order dialog and hook refactor

* fix: [#471] remove commented code from storybook preview and fix test

* fix: [#471] update order-list.tsx

* fix: [#471] fix update subscription - show order is cancelled

* fix: [#471] fix eslint error

* chore: [#471] refactoring and add tests for dialogs and cancel hook

* fix: #471 add ref to order list table

* fix: #471 add field for cancel fix test

* fix: #471 rename vega-order-transaction-dialog, error handiling, open dialog on finalized order

* fix: #471 sendTx body mandatory

* fix: #471 use BusEventType.Order to check the typename

* fix: #471 revert using BusEventType.Order to check the typename

* Update libs/wallet/src/order-hooks/use-order-cancel.tsx

Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>

* fix: #471  fix order-list refactoring and fixes

* fix: #471 generate orders added as a mock in order-list

* fix: #471 reset transaction after order updated

* fix: #471 remove unused import useEffect

* fix: #471 generate mock orders

* fix: #471 revert generate mock orders

* feat: #463 modify vega dialog to direct you to the block explorer transaction

* feat: #463 modify compile-environment.ts

* fix: #471 order list price set to display all decimals

* fix: #471 generate orders updates

* Update apps/trading/.env

* fix: #463 add test and remove explorer URL from trading/env.ts

* Update apps/trading/lib/config/env.ts

* fix: #463 update trading deal ticket

* fix: #463 fix test to check href

Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>
2022-06-29 13:55:49 +01:00
.github chore: make tranches update 4 times a day 2022-06-17 15:47:41 -07:00
.husky chore: add commit lint (#398) 2022-05-16 13:36:03 -04:00
.storybook Add storybook/addon-a11y 2022-03-07 13:57:06 -08:00
.vscode Feat/300 network parameters table (#333) 2022-05-04 18:15:54 +03:00
apps Feat/463 vega transaction component links to block explorer (#666) 2022-06-29 13:55:49 +01:00
libs Feat/463 vega transaction component links to block explorer (#666) 2022-06-29 13:55:49 +01:00
nginx Feat/dockerize frontends (#388) 2022-06-13 15:39:17 +01:00
scripts Ci/generate tranches (#401) 2022-05-17 13:26:04 +01:00
tools Feat/427: Serve explicit environments (#433) 2022-05-23 10:56:11 +01:00
.dockerignore Feat/dockerize frontends (#388) 2022-06-13 15:39:17 +01:00
.editorconfig Normalize line endings (#207) 2022-04-06 11:59:51 +01:00
.eslintrc.json renaming test files (#351) 2022-05-12 13:32:14 +01:00
.gitattributes Normalize line endings (#207) 2022-04-06 11:59:51 +01:00
.gitignore Feat/427: Serve explicit environments (#433) 2022-05-23 10:56:11 +01:00
.nvmrc Add .nvmrc and engine, set node version to 16.14.0 2022-02-17 13:43:41 +01:00
.prettierignore Ci/generate tranches (#401) 2022-05-17 13:26:04 +01:00
.prettierrc Create a Mono-repo for DeFiUI + ui toolkit using nx 2022-02-11 15:02:11 +01:00
.sentryclirc Chore/sentry (#163) 2022-03-29 18:29:29 +01:00
babel.config.json Create a Mono-repo for DeFiUI + ui toolkit using nx 2022-02-11 15:02:11 +01:00
CODEOWNERS add code owners 2022-02-23 08:53:57 +00:00
commitlint.config.js chore: add commit lint (#398) 2022-05-16 13:36:03 -04:00
Dockerfile Feat/dockerize frontends (#388) 2022-06-13 15:39:17 +01:00
env-config.js Feat/dockerize frontends (#388) 2022-06-13 15:39:17 +01:00
env.sh Feat/dockerize frontends (#388) 2022-06-13 15:39:17 +01:00
jest.config.js Create a Mono-repo for DeFiUI + ui toolkit using nx 2022-02-11 15:02:11 +01:00
jest.preset.js Create a Mono-repo for DeFiUI + ui toolkit using nx 2022-02-11 15:02:11 +01:00
LICENSE Create a Mono-repo for DeFiUI + ui toolkit using nx 2022-02-11 15:02:11 +01:00
migrations.json Fixes for workflows (#291) 2022-04-22 17:51:18 -07:00
netlify.toml Remove custom ignore (#221) 2022-04-07 12:24:04 +01:00
nx.json [#168] Add static app to host AlphaLyrae font 2022-03-31 09:11:29 +02:00
package.json test: update to latest Cypress version (10.2.0) (#655) 2022-06-28 11:07:31 -07:00
README.md Feat/471 cancel order (#610) 2022-06-29 10:03:20 +01:00
tsconfig.base.json feat(#507): Node Discovery 2022-06-21 16:20:53 -07:00
workspace.json feat(#507): Node Discovery 2022-06-21 16:20:53 -07:00
yarn.lock test: update to latest Cypress version (10.2.0) (#655) 2022-06-28 11:07:31 -07:00

Vega front-end monorepo

The front-end monorepo provides a toolkit for building apps that interact with Vega, as well as the apps themselves.

This repository is managed using Nx.

🔎 Applications in this repo

Block 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

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

The utility dApp for interacting with the Vega token and using its' utility. This includes; delegation, nomination, governance and redemption of tokens.

Explorer

The block explorer for the Vega network, showing details of raw chain states and the state of markets on the Vega network.

Stats

An application for the status of the Vega network. Showing block height and other network activity.

Static

Hosting for static content being shared across apps, for example fonts.

🧱 Libraries in this repo

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

The Tailwind CSS config contains theme that align default config with Vega design system.

Cypress

For shared Cypress logic, commands and steps.

Web3

A utility library for connecting to the Ethereum network and interacting with Vega Web3 contracts.

React Helpers

Generic react helpers that can be used across multiple applications, along with other utilities.

💻 Develop

Set up

Check you have the correct version of Node. You can install NVM to switch between node versions. Then NVM install. Before you build you will need to yarn install in the root directory. The repository includes a number of template .env files for different networks. Copy from these to the .env file before serve to launch app with different network. You can serve any application with yarn nx run <name-of-app>:serve.

Build

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 the port specified in app/<project-name>/project.json. The app will automatically reload if you change any of the source files.

Using Apollo GraphQL and Generate Types

In order to generate the schemas for your GraphQL queries, you can run nx run types:generate. If it is the first time you are running the command, make sure you are setting up the environment variable from apollo.config.js.

export  NX_VEGA_URL=https://lb.testnet.vega.xyz/query
yarn nx run types:generate

Running tests

Run yarn nx run <my-app>-e2e:e2e to execute the e2e tests with cypress, 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 for all CLI flags.

Run nx test my-app to execute the unit tests with Jest, 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 for all CLI flags.

Trading app E2E tests

To run tests locally using your own wallets you can add the following environment variables to cypress.json

  1. Change TRADING_TEST_VEGA_WALLET_NAME to your Vega wallet name
  2. Add TRADING_TEST_VEGA_WALLET_PASSPHRASE as your wallet passphrase
  3. Add ETH_WALLET_MNEMONIC as your Ethereum wallet mnemonic

Formatting

In CI linting, formatting and also run. These checks can be seen in the CI workflow file.

  • To fix linting errors locally run yarn nx lint --fix
  • To fix formatting errors local run yarn nx format:write
  • For either command you may use --all to run across the entire repository

Further help with Nx

Visit the Nx Documentation to learn more.

Docker & Vegacapsule

Docker

The Dockerfile for running the frontends is pretty basic, merely building the application with the APP arg that is passed in and serving the application from nginx. The only complexity that exists is that there is a script which allows the passing of run time environment variables to the containers. See configuration below for how to do this.

You can build any of the containers locally with the following command:

docker build . --build-arg APP=[YOUR APP] --tag=[TAG]

In order to run a container:

docker run -p 3000:80 [TAG]

Config

As environment variables are build time and not run time in frontend applications. We have built a system which allows for passing run time environment variables, this generates a JSON file that will override the default environment variables that the container was built with (which is always testnet, using the default .env files).

In order to override specific environment variables you can pass these to the container like this:

docker run -e NX_VEGA_URL=https://n04.d.vega.xyz/query -p 3000:80 [TAG]

Which will now point the app to use a devnet data node. To see a list of all possible config properties see the readme.md for each app in the app directory.

Vega capsule

Coming soon! You will be able to run the containers within Vega Capsule.

You can run against a local instance of Vega Capsule today by using the .env.capsule present in the apps.

📑 License

MIT