https://github.com/paritytech/parity-bridges-ui
bridge-ui-substrate-draft
https://github.com/paritytech/parity-bridges-ui
Last synced: about 1 year ago
JSON representation
bridge-ui-substrate-draft
- Host: GitHub
- URL: https://github.com/paritytech/parity-bridges-ui
- Owner: paritytech
- License: gpl-3.0
- Created: 2021-01-29T15:01:37.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-10-21T12:05:18.000Z (over 3 years ago)
- Last Synced: 2023-04-09T19:14:12.019Z (about 3 years ago)
- Language: TypeScript
- Size: 6.27 MB
- Stars: 18
- Watchers: 9
- Forks: 10
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# UI for Substrate Bridges
The goal of the UI is to provide the users a convenient way of interacting with the Bridge - querying its state and sending transactions.
| đ | Live version at [//paritytech.github.io/parity-bridges-ui](https://paritytech.github.io/parity-bridges-ui) |
| --- | :--------------------------------------------------------------------------------------------------------- |
## Configuring custom Substrate providers / chains
The project includes a `.env` file at root project directory that contains all the variables for running the bridge UI:
```
REACT_APP_CHAIN_1_CUSTOM_TYPES_URL=https://raw.githubusercontent.com/paritytech/parity-bridges-common/master/deployments/types-rialto.json
REACT_APP_CHAIN_1_SUBSTRATE_PROVIDER=wss://wss.rialto.brucke.link
REACT_APP_CHAIN_2_CUSTOM_HASHER=blake2Keccak256Hasher
REACT_APP_CHAIN_2_CUSTOM_TYPES_URL=https://raw.githubusercontent.com/paritytech/parity-bridges-common/master/deployments/types-millau.json
REACT_APP_CHAIN_2_SUBSTRATE_PROVIDER=wss://wss.millau.brucke.link
REACT_APP_LANE_ID=0x00000000
REACT_APP_KEYRING_DEV_LOAD_ACCOUNTS=false
REACT_APP_IS_DEVELOPMENT=false
```
| âšī¸ | In case you need to overwrite any of the variables defined, please do so creating a new `.env.local`. |
| --- | :---------------------------------------------------------------------------------------------------- |
In case of questions about `.env` management please refer to this link: [create-react-app env files](https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used)
## Custom Hashers for building connections
If any of the chains (or both) need to use a custom hasher function this one can be built and exported from the file: `src/configs/chainsSetup/customHashers.ts`. Then it is just a matter of referring the function name using variable `REACT_APP_CUSTOM_HASHER_CHAIN_` from `.env` file.
## Running the bridge
Please refer to this section of the Bridges project to run the bridge locally: [running-the-bridge](https://github.com/paritytech/parity-bridges-common#running-the-bridge)
## Development
### `yarn`
This will install all the dependencies for the project.
### `yarn start`
Runs the app in the development mode. Open [http://localhost:3001](http://localhost:3001) to view it in the browser.
### `yarn test`
Runs the test suite.
### `yarn lint`
Runs the linter & formatter.
## Execute E2E test
[Puppeteer](https://developers.google.com/web/tools/puppeteer/) is used for running E2E test for bridges (Only chrome for now).
##### Requirements:
a) Have chrome installed on your computer. (This test requires it and will not download it when running);
b) ensure that in your `env.local` file the `REACT_APP_IS_DEVELOPMENT` and `REACT_APP_KEYRING_DEV_LOAD_ACCOUNTS` are true;
c) Make sure all steps mentioned above have run in a seperate terminal (`yarn` - `yarn start`) and the application of bridges is running;
d) In a different terminal window run the following command:
#### `yarn run test:e2e-alone`
## customTypes config files process.
There is an automated process that downloads all the required types.json files available in the deployments section of [parity-bridges-common](https://github.com/paritytech/parity-bridges-common/tree/master/deployments) repository.
This hook is executed before the local development server starts and during the lint/test/build process during deployment.
In case there is an unexpected issue with this process you can test this process isolated by running:
### `yarn prestart`
## Learn More
For additional information about the Bridges Project please refer to [parity-bridges-common](https://github.com/paritytech/parity-bridges-common) repository.
## Docker
To build the image run the:
```
docker build -t parity-bridges-ui:dev .
```
Now that image is built, container can start with the following command, which will serve our app on port 8080.
```
docker run --rm -it -p 8080:80 parity-bridges-ui:dev
```