vega-frontend-monorepo/README.md

157 lines
6.8 KiB
Markdown
Raw Normal View History

# 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](https://nx.dev).
# 🔎 Applications in this repo
### [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](./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)
Feat/471 cancel order (#610) * 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 * fix: #471 order list price set to display all decimals * fix: #471 generate orders updates * fix: #471 remove unused import * fix: #471 remove __typename from mock orders genOrder * Update libs/wallet/src/order-hooks/order-event-query.ts Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * fix: #471 update order event sub and pull master changes Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>
2022-06-29 09:03:20 +00:00
The utility 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](./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](./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 utility library for connecting to the Ethereum network and interacting with Vega Web3 contracts.
### [React Helpers](./libs/react-helpers)
Feat/471 cancel order (#610) * 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 * fix: #471 order list price set to display all decimals * fix: #471 generate orders updates * fix: #471 remove unused import * fix: #471 remove __typename from mock orders genOrder * Update libs/wallet/src/order-hooks/order-event-query.ts Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * fix: #471 update order event sub and pull master changes Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>
2022-06-29 09:03:20 +00:00
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](https://github.com/nvm-sh/nvm#installing-and-updating). 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.
Feat/305 add console v2 first view screen (#424) * [#305] add initial landing dialog on markets page and fix some typos * [#305] market-list utils and generate schema * [#305] initial styling of the landing dialog and add arrows * [#305] routing to markets and add hover and market list tests * [#305] fix z-index on dialog overlay * [#305] default market shoulde be oldest market that is currently trading in continuous mode * [#305] refactor market-list library * [#305] add arrow unit tests * Update libs/market-list/src/lib/components/landing/landing-dialog.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * Update libs/market-list/src/lib/components/landing/select-market-list.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * Update libs/market-list/src/lib/components/landing/select-market-list.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * test: fix failing tests from homepage change * [#305] sort by id after sorting by date * test: increase timeout for failing tests in CI * [#305] destructuring all over the place and some code tweaks, arrows and percentage changes * [#305] update sparkline to show colour * [#305] fix order of market list * [#305] stretchedLink class plus a-tag href for navigation - accessibility updates * [#305] use href only and remove log * [#305] use bignumber.js for price calculations * [#305] change to bg-white/50 on dark mode overlay as asked from UX * [#305] change to bg-white/50 on dark mode overlay as asked from UX * [#305] toLocaleString fix * [#305] toLocaleString fix * [#305] add price-change-cell and use formatNumber * [#305] add extra test for select market list * Update apps/trading/specs/index.spec.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * [#305] use memo, sort by date and id lodash Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> Co-authored-by: Joe <joe@vega.xyz>
2022-05-23 12:21:54 +00:00
### Using Apollo GraphQL and Generate Types
In order to generate the schemas for your GraphQL queries, you can run `GRAPHQL_SCHEMA_PATH=[YOUR SCHEMA FILE / API URL HERE] nx run types:generate`.
Feat/305 add console v2 first view screen (#424) * [#305] add initial landing dialog on markets page and fix some typos * [#305] market-list utils and generate schema * [#305] initial styling of the landing dialog and add arrows * [#305] routing to markets and add hover and market list tests * [#305] fix z-index on dialog overlay * [#305] default market shoulde be oldest market that is currently trading in continuous mode * [#305] refactor market-list library * [#305] add arrow unit tests * Update libs/market-list/src/lib/components/landing/landing-dialog.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * Update libs/market-list/src/lib/components/landing/select-market-list.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * Update libs/market-list/src/lib/components/landing/select-market-list.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * test: fix failing tests from homepage change * [#305] sort by id after sorting by date * test: increase timeout for failing tests in CI * [#305] destructuring all over the place and some code tweaks, arrows and percentage changes * [#305] update sparkline to show colour * [#305] fix order of market list * [#305] stretchedLink class plus a-tag href for navigation - accessibility updates * [#305] use href only and remove log * [#305] use bignumber.js for price calculations * [#305] change to bg-white/50 on dark mode overlay as asked from UX * [#305] change to bg-white/50 on dark mode overlay as asked from UX * [#305] toLocaleString fix * [#305] toLocaleString fix * [#305] add price-change-cell and use formatNumber * [#305] add extra test for select market list * Update apps/trading/specs/index.spec.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * [#305] use memo, sort by date and id lodash Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> Co-authored-by: Joe <joe@vega.xyz>
2022-05-23 12:21:54 +00:00
```bash
export GRAPHQL_SCHEMA_PATH=https://api.n11.testnet.vega.xyz/graphql
Feat/305 add console v2 first view screen (#424) * [#305] add initial landing dialog on markets page and fix some typos * [#305] market-list utils and generate schema * [#305] initial styling of the landing dialog and add arrows * [#305] routing to markets and add hover and market list tests * [#305] fix z-index on dialog overlay * [#305] default market shoulde be oldest market that is currently trading in continuous mode * [#305] refactor market-list library * [#305] add arrow unit tests * Update libs/market-list/src/lib/components/landing/landing-dialog.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * Update libs/market-list/src/lib/components/landing/select-market-list.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * Update libs/market-list/src/lib/components/landing/select-market-list.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * test: fix failing tests from homepage change * [#305] sort by id after sorting by date * test: increase timeout for failing tests in CI * [#305] destructuring all over the place and some code tweaks, arrows and percentage changes * [#305] update sparkline to show colour * [#305] fix order of market list * [#305] stretchedLink class plus a-tag href for navigation - accessibility updates * [#305] use href only and remove log * [#305] use bignumber.js for price calculations * [#305] change to bg-white/50 on dark mode overlay as asked from UX * [#305] change to bg-white/50 on dark mode overlay as asked from UX * [#305] toLocaleString fix * [#305] toLocaleString fix * [#305] add price-change-cell and use formatNumber * [#305] add extra test for select market list * Update apps/trading/specs/index.spec.tsx Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> * [#305] use memo, sort by date and id lodash Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> Co-authored-by: Joe <joe@vega.xyz>
2022-05-23 12:21:54 +00:00
yarn nx run types:generate
```
### Running tests
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.
#### 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](.github/workflows//test.yml).
- 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](https://nx.dev/getting-started/intro) to learn more.
Feat/dockerize frontends (#388) * feat: unhardcode contract addresses * fix: linting and tests * feat: switch contract usage in token app to use unhardcoded addresses * chore: remove other usage of hard coded contract addresses * feat: convert contracts to classes, update claim contract to fix circular dependency * feat: add hard coded contract addresses to contracts page * fix: misc tidy up * chore: rename ethers big num conversion func * fix: remove pending transactions modal * chore: add single toBigNum function that can accept number string or EthersBignNumber * chore: delete unused tranche helpers and decimals functions from smart contracts lib * feat: add faucetable token class * fix: reset tx state after early exit from approve tx * feat: re add transaction modal using zustand store * fix: loader colors for eth wallet * fix: pass ethereum config to gurantee existence before tx execution * add docker image for building explorer * add arg * env file changes * add docker file to build env file * add requirement for env file in explorer * fix env file syntax * containers functional * default to testnet * make env flag logic consistent in all places * pre populate env file * ensure working for all projects * address PR comment * generalising env for token * invert config dependency from ui toolkit * fix: merge issues * docs: running containers documentation * style: lint * fix: env varibales not being added properly * chore: fix merge issues * chore: fix docker file to support new exectutors * chore: set address on all contracts as a property * feat: pull token from contract rather than relying on env var * chore: fix typing * chore: remove duplicated prop * chore: don't use chainId * style: lint * style: lint * Merge branch 'master' into feat/dockerize-frontends * Merge remote-tracking branch 'origin/master' into feat/dockerize-frontends * test: revert changes to explorer e2e file * fix: creating client without base causing token to error * test: fix tests erroring in before hook due to file not being found * chore: remove node env from configurable flags Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
2022-06-13 14:39:17 +00:00
# Docker & Vegacapsule
Feat/dockerize frontends (#388) * feat: unhardcode contract addresses * fix: linting and tests * feat: switch contract usage in token app to use unhardcoded addresses * chore: remove other usage of hard coded contract addresses * feat: convert contracts to classes, update claim contract to fix circular dependency * feat: add hard coded contract addresses to contracts page * fix: misc tidy up * chore: rename ethers big num conversion func * fix: remove pending transactions modal * chore: add single toBigNum function that can accept number string or EthersBignNumber * chore: delete unused tranche helpers and decimals functions from smart contracts lib * feat: add faucetable token class * fix: reset tx state after early exit from approve tx * feat: re add transaction modal using zustand store * fix: loader colors for eth wallet * fix: pass ethereum config to gurantee existence before tx execution * add docker image for building explorer * add arg * env file changes * add docker file to build env file * add requirement for env file in explorer * fix env file syntax * containers functional * default to testnet * make env flag logic consistent in all places * pre populate env file * ensure working for all projects * address PR comment * generalising env for token * invert config dependency from ui toolkit * fix: merge issues * docs: running containers documentation * style: lint * fix: env varibales not being added properly * chore: fix merge issues * chore: fix docker file to support new exectutors * chore: set address on all contracts as a property * feat: pull token from contract rather than relying on env var * chore: fix typing * chore: remove duplicated prop * chore: don't use chainId * style: lint * style: lint * Merge branch 'master' into feat/dockerize-frontends * Merge remote-tracking branch 'origin/master' into feat/dockerize-frontends * test: revert changes to explorer e2e file * fix: creating client without base causing token to error * test: fix tests erroring in before hook due to file not being found * chore: remove node env from configurable flags Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
2022-06-13 14:39:17 +00:00
## Docker
The [Dockerfile](./dockerfiles) 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](./nginx/nginx.conf). 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.
Feat/dockerize frontends (#388) * feat: unhardcode contract addresses * fix: linting and tests * feat: switch contract usage in token app to use unhardcoded addresses * chore: remove other usage of hard coded contract addresses * feat: convert contracts to classes, update claim contract to fix circular dependency * feat: add hard coded contract addresses to contracts page * fix: misc tidy up * chore: rename ethers big num conversion func * fix: remove pending transactions modal * chore: add single toBigNum function that can accept number string or EthersBignNumber * chore: delete unused tranche helpers and decimals functions from smart contracts lib * feat: add faucetable token class * fix: reset tx state after early exit from approve tx * feat: re add transaction modal using zustand store * fix: loader colors for eth wallet * fix: pass ethereum config to gurantee existence before tx execution * add docker image for building explorer * add arg * env file changes * add docker file to build env file * add requirement for env file in explorer * fix env file syntax * containers functional * default to testnet * make env flag logic consistent in all places * pre populate env file * ensure working for all projects * address PR comment * generalising env for token * invert config dependency from ui toolkit * fix: merge issues * docs: running containers documentation * style: lint * fix: env varibales not being added properly * chore: fix merge issues * chore: fix docker file to support new exectutors * chore: set address on all contracts as a property * feat: pull token from contract rather than relying on env var * chore: fix typing * chore: remove duplicated prop * chore: don't use chainId * style: lint * style: lint * Merge branch 'master' into feat/dockerize-frontends * Merge remote-tracking branch 'origin/master' into feat/dockerize-frontends * test: revert changes to explorer e2e file * fix: creating client without base causing token to error * test: fix tests erroring in before hook due to file not being found * chore: remove node env from configurable flags Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
2022-06-13 14:39:17 +00:00
You can build any of the containers locally with the following command:
Feat/dockerize frontends (#388) * feat: unhardcode contract addresses * fix: linting and tests * feat: switch contract usage in token app to use unhardcoded addresses * chore: remove other usage of hard coded contract addresses * feat: convert contracts to classes, update claim contract to fix circular dependency * feat: add hard coded contract addresses to contracts page * fix: misc tidy up * chore: rename ethers big num conversion func * fix: remove pending transactions modal * chore: add single toBigNum function that can accept number string or EthersBignNumber * chore: delete unused tranche helpers and decimals functions from smart contracts lib * feat: add faucetable token class * fix: reset tx state after early exit from approve tx * feat: re add transaction modal using zustand store * fix: loader colors for eth wallet * fix: pass ethereum config to gurantee existence before tx execution * add docker image for building explorer * add arg * env file changes * add docker file to build env file * add requirement for env file in explorer * fix env file syntax * containers functional * default to testnet * make env flag logic consistent in all places * pre populate env file * ensure working for all projects * address PR comment * generalising env for token * invert config dependency from ui toolkit * fix: merge issues * docs: running containers documentation * style: lint * fix: env varibales not being added properly * chore: fix merge issues * chore: fix docker file to support new exectutors * chore: set address on all contracts as a property * feat: pull token from contract rather than relying on env var * chore: fix typing * chore: remove duplicated prop * chore: don't use chainId * style: lint * style: lint * Merge branch 'master' into feat/dockerize-frontends * Merge remote-tracking branch 'origin/master' into feat/dockerize-frontends * test: revert changes to explorer e2e file * fix: creating client without base causing token to error * test: fix tests erroring in before hook due to file not being found * chore: remove node env from configurable flags Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
2022-06-13 14:39:17 +00:00
```bash
docker build --dockerfile dockerfiles/Dockerfile.cra . --build-arg APP=[YOUR APP] --tag=[TAG]
Feat/dockerize frontends (#388) * feat: unhardcode contract addresses * fix: linting and tests * feat: switch contract usage in token app to use unhardcoded addresses * chore: remove other usage of hard coded contract addresses * feat: convert contracts to classes, update claim contract to fix circular dependency * feat: add hard coded contract addresses to contracts page * fix: misc tidy up * chore: rename ethers big num conversion func * fix: remove pending transactions modal * chore: add single toBigNum function that can accept number string or EthersBignNumber * chore: delete unused tranche helpers and decimals functions from smart contracts lib * feat: add faucetable token class * fix: reset tx state after early exit from approve tx * feat: re add transaction modal using zustand store * fix: loader colors for eth wallet * fix: pass ethereum config to gurantee existence before tx execution * add docker image for building explorer * add arg * env file changes * add docker file to build env file * add requirement for env file in explorer * fix env file syntax * containers functional * default to testnet * make env flag logic consistent in all places * pre populate env file * ensure working for all projects * address PR comment * generalising env for token * invert config dependency from ui toolkit * fix: merge issues * docs: running containers documentation * style: lint * fix: env varibales not being added properly * chore: fix merge issues * chore: fix docker file to support new exectutors * chore: set address on all contracts as a property * feat: pull token from contract rather than relying on env var * chore: fix typing * chore: remove duplicated prop * chore: don't use chainId * style: lint * style: lint * Merge branch 'master' into feat/dockerize-frontends * Merge remote-tracking branch 'origin/master' into feat/dockerize-frontends * test: revert changes to explorer e2e file * fix: creating client without base causing token to error * test: fix tests erroring in before hook due to file not being found * chore: remove node env from configurable flags Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
2022-06-13 14:39:17 +00:00
```
In order to run a container:
```bash
Feat/dockerize frontends (#388) * feat: unhardcode contract addresses * fix: linting and tests * feat: switch contract usage in token app to use unhardcoded addresses * chore: remove other usage of hard coded contract addresses * feat: convert contracts to classes, update claim contract to fix circular dependency * feat: add hard coded contract addresses to contracts page * fix: misc tidy up * chore: rename ethers big num conversion func * fix: remove pending transactions modal * chore: add single toBigNum function that can accept number string or EthersBignNumber * chore: delete unused tranche helpers and decimals functions from smart contracts lib * feat: add faucetable token class * fix: reset tx state after early exit from approve tx * feat: re add transaction modal using zustand store * fix: loader colors for eth wallet * fix: pass ethereum config to gurantee existence before tx execution * add docker image for building explorer * add arg * env file changes * add docker file to build env file * add requirement for env file in explorer * fix env file syntax * containers functional * default to testnet * make env flag logic consistent in all places * pre populate env file * ensure working for all projects * address PR comment * generalising env for token * invert config dependency from ui toolkit * fix: merge issues * docs: running containers documentation * style: lint * fix: env varibales not being added properly * chore: fix merge issues * chore: fix docker file to support new exectutors * chore: set address on all contracts as a property * feat: pull token from contract rather than relying on env var * chore: fix typing * chore: remove duplicated prop * chore: don't use chainId * style: lint * style: lint * Merge branch 'master' into feat/dockerize-frontends * Merge remote-tracking branch 'origin/master' into feat/dockerize-frontends * test: revert changes to explorer e2e file * fix: creating client without base causing token to error * test: fix tests erroring in before hook due to file not being found * chore: remove node env from configurable flags Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
2022-06-13 14:39:17 +00:00
docker run -p 3000:80 [TAG]
```
Images ending with `.dist` are to pack locally created transpiled HTML files into nginx container for non-compatible with yarn architectures like M1 Mac
Feat/dockerize frontends (#388) * feat: unhardcode contract addresses * fix: linting and tests * feat: switch contract usage in token app to use unhardcoded addresses * chore: remove other usage of hard coded contract addresses * feat: convert contracts to classes, update claim contract to fix circular dependency * feat: add hard coded contract addresses to contracts page * fix: misc tidy up * chore: rename ethers big num conversion func * fix: remove pending transactions modal * chore: add single toBigNum function that can accept number string or EthersBignNumber * chore: delete unused tranche helpers and decimals functions from smart contracts lib * feat: add faucetable token class * fix: reset tx state after early exit from approve tx * feat: re add transaction modal using zustand store * fix: loader colors for eth wallet * fix: pass ethereum config to gurantee existence before tx execution * add docker image for building explorer * add arg * env file changes * add docker file to build env file * add requirement for env file in explorer * fix env file syntax * containers functional * default to testnet * make env flag logic consistent in all places * pre populate env file * ensure working for all projects * address PR comment * generalising env for token * invert config dependency from ui toolkit * fix: merge issues * docs: running containers documentation * style: lint * fix: env varibales not being added properly * chore: fix merge issues * chore: fix docker file to support new exectutors * chore: set address on all contracts as a property * feat: pull token from contract rather than relying on env var * chore: fix typing * chore: remove duplicated prop * chore: don't use chainId * style: lint * style: lint * Merge branch 'master' into feat/dockerize-frontends * Merge remote-tracking branch 'origin/master' into feat/dockerize-frontends * test: revert changes to explorer e2e file * fix: creating client without base causing token to error * test: fix tests erroring in before hook due to file not being found * chore: remove node env from configurable flags Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
2022-06-13 14:39:17 +00:00
## 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).
Feat/dockerize frontends (#388) * feat: unhardcode contract addresses * fix: linting and tests * feat: switch contract usage in token app to use unhardcoded addresses * chore: remove other usage of hard coded contract addresses * feat: convert contracts to classes, update claim contract to fix circular dependency * feat: add hard coded contract addresses to contracts page * fix: misc tidy up * chore: rename ethers big num conversion func * fix: remove pending transactions modal * chore: add single toBigNum function that can accept number string or EthersBignNumber * chore: delete unused tranche helpers and decimals functions from smart contracts lib * feat: add faucetable token class * fix: reset tx state after early exit from approve tx * feat: re add transaction modal using zustand store * fix: loader colors for eth wallet * fix: pass ethereum config to gurantee existence before tx execution * add docker image for building explorer * add arg * env file changes * add docker file to build env file * add requirement for env file in explorer * fix env file syntax * containers functional * default to testnet * make env flag logic consistent in all places * pre populate env file * ensure working for all projects * address PR comment * generalising env for token * invert config dependency from ui toolkit * fix: merge issues * docs: running containers documentation * style: lint * fix: env varibales not being added properly * chore: fix merge issues * chore: fix docker file to support new exectutors * chore: set address on all contracts as a property * feat: pull token from contract rather than relying on env var * chore: fix typing * chore: remove duplicated prop * chore: don't use chainId * style: lint * style: lint * Merge branch 'master' into feat/dockerize-frontends * Merge remote-tracking branch 'origin/master' into feat/dockerize-frontends * test: revert changes to explorer e2e file * fix: creating client without base causing token to error * test: fix tests erroring in before hook due to file not being found * chore: remove node env from configurable flags Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
2022-06-13 14:39:17 +00:00
In order to override specific environment variables you can pass these to the container like this:
```bash
docker run -e NX_VEGA_URL=https://api.n04.d.vega.xyz/graphql -p 3000:80 [TAG]
Feat/dockerize frontends (#388) * feat: unhardcode contract addresses * fix: linting and tests * feat: switch contract usage in token app to use unhardcoded addresses * chore: remove other usage of hard coded contract addresses * feat: convert contracts to classes, update claim contract to fix circular dependency * feat: add hard coded contract addresses to contracts page * fix: misc tidy up * chore: rename ethers big num conversion func * fix: remove pending transactions modal * chore: add single toBigNum function that can accept number string or EthersBignNumber * chore: delete unused tranche helpers and decimals functions from smart contracts lib * feat: add faucetable token class * fix: reset tx state after early exit from approve tx * feat: re add transaction modal using zustand store * fix: loader colors for eth wallet * fix: pass ethereum config to gurantee existence before tx execution * add docker image for building explorer * add arg * env file changes * add docker file to build env file * add requirement for env file in explorer * fix env file syntax * containers functional * default to testnet * make env flag logic consistent in all places * pre populate env file * ensure working for all projects * address PR comment * generalising env for token * invert config dependency from ui toolkit * fix: merge issues * docs: running containers documentation * style: lint * fix: env varibales not being added properly * chore: fix merge issues * chore: fix docker file to support new exectutors * chore: set address on all contracts as a property * feat: pull token from contract rather than relying on env var * chore: fix typing * chore: remove duplicated prop * chore: don't use chainId * style: lint * style: lint * Merge branch 'master' into feat/dockerize-frontends * Merge remote-tracking branch 'origin/master' into feat/dockerize-frontends * test: revert changes to explorer e2e file * fix: creating client without base causing token to error * test: fix tests erroring in before hook due to file not being found * chore: remove node env from configurable flags Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
2022-06-13 14:39:17 +00:00
```
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.
Feat/dockerize frontends (#388) * feat: unhardcode contract addresses * fix: linting and tests * feat: switch contract usage in token app to use unhardcoded addresses * chore: remove other usage of hard coded contract addresses * feat: convert contracts to classes, update claim contract to fix circular dependency * feat: add hard coded contract addresses to contracts page * fix: misc tidy up * chore: rename ethers big num conversion func * fix: remove pending transactions modal * chore: add single toBigNum function that can accept number string or EthersBignNumber * chore: delete unused tranche helpers and decimals functions from smart contracts lib * feat: add faucetable token class * fix: reset tx state after early exit from approve tx * feat: re add transaction modal using zustand store * fix: loader colors for eth wallet * fix: pass ethereum config to gurantee existence before tx execution * add docker image for building explorer * add arg * env file changes * add docker file to build env file * add requirement for env file in explorer * fix env file syntax * containers functional * default to testnet * make env flag logic consistent in all places * pre populate env file * ensure working for all projects * address PR comment * generalising env for token * invert config dependency from ui toolkit * fix: merge issues * docs: running containers documentation * style: lint * fix: env varibales not being added properly * chore: fix merge issues * chore: fix docker file to support new exectutors * chore: set address on all contracts as a property * feat: pull token from contract rather than relying on env var * chore: fix typing * chore: remove duplicated prop * chore: don't use chainId * style: lint * style: lint * Merge branch 'master' into feat/dockerize-frontends * Merge remote-tracking branch 'origin/master' into feat/dockerize-frontends * test: revert changes to explorer e2e file * fix: creating client without base causing token to error * test: fix tests erroring in before hook due to file not being found * chore: remove node env from configurable flags Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
2022-06-13 14:39:17 +00:00
If you wish to run E2E tests for Token and Block Explorer (other areas to be added soon)
- Vegacapsule must be used in order for these tests to succeed, the vegacapsule repo README.md file contains the steps required to set this up, it must be installed globally.
- However we start the capsule network a little differently to how it is laid out in those instructions:
In order to run the bootstrap command to generate and start a new network, we must do so using the following:
```bash
vegacapsule network bootstrap --config-path=../frontend-monorepo/vegacapsule/config.hcl
```
# 📑 License
[MIT](./LICENSE)