paritytech / parity-bridges-ui Goto Github PK

bridge-ui-substrate-draft

License: GNU General Public License v3.0

Shell 0.32% JavaScript 5.93% HTML 0.41% CSS 0.08% TypeScript 93.06% Dockerfile 0.20%

parity-bridges-ui's Introduction

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

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

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_<Chain number> from .env file.

Running the bridge

Please refer to this section of the Bridges project to run the bridge locally: 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 to view it in the browser.

`yarn test`

Runs the test suite.

`yarn lint`

Runs the linter & formatter.

Execute E2E test

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 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 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

parity-bridges-ui's People

Contributors

Stargazers

Watchers

Forkers

setheum-labs openweb3-foundation tomusdrw aadorian cryptopossum wirednkod hachikogeneral

parity-bridges-ui's Issues

Review Errors

Define typescript types for customTypes definition

Show execution status flow.

When transactions are running if source/target is switched the process get broken.

There is a known issue in the design that when a chain is switched and there is a transaction running the values might be updated incorrectly.

Display links to polkadot.js

Things that should be linked for easy inspection:

Block number - details of the block
Network name - block explorer
Account addresses - details of an account
Transaction hash - block at which the transaction was included.

The link should include the ?rpc parameter with current chain URL and also custom types (packed)

Apply styles on Custom call component.

There is a new component similar to Transfer or Remark that permits the user to send a custom call to the message lane.
User has two input fields where the first one is the input text where the call must be provided in a hex format and the weight value. If the user provides a correct call, the decoded call will be displayed bellow:

The CustomCall component is already doing all the logic, but with no design.

Add block / hash links to polkadotjs.

See #38 for references.

Support canceling from the extension.

When a transaction is cancelled from the extension , the UI still fire a transaction which of course it is wrong.

Build Base Layout

Account derivation viewing screen (paste address and see possible options).

From comment: https://github.com/paritytech/parity-bridges-ui/pull/20/files/92bab7b41ffd9ce2d2dd9ddf78d40d04cb0703e5..7cb96f6a75d266f5b2b211caaa713c83b379b7e8#r599534736

We should be more informative with this. I.e. we should parse the SS58 prefixes and display things like: "This address looks like a Polkadot address, not Rialto's.".
Also notice there are at least 3 different cases here:

Target chain provided - all good (receiver_address === provided_address)

Source chain provided - derivation (receiver_addresss === derive(provided_adddress))

SS58 does not match neither Target nor Source chain - a REALLY FAT warning and we should set receiver_address = provided_address (optionally with an option to derive account).

This is actually extremely crucial, so let's have this as a separate issue and make it work extremely well.

Create global error & message popup

Put icons on all app

Move repo to paritytech organisation.

Running dashboard on empty chains reports pending message

I've run the dashboard and two nodes in the background using:

$ ./target/release/rialto-bridge-node --dev --tmp --ws-port 9944
$ ./target/release/millau-bridge-node --dev --tmp --ws-port 9945

The dashboard displays pending messages, while there were no messages sent?

Fix github actions and implement env.* files.

Apply design on transaction Status Tracking

Apply design to the existing component transaction component:

Please take into account that at the moment we don't have the details of how many fee each transaction consumes.

Save history of executed transactions in the local storage.

Adding tests to the CI

Test queries and extrinsics calls in case runtime changes.
Test derived account.

Replace semantic UI for Material UI

Apply design on account selector.

This task is to apply the design when the account selector is open as well as when is closed with the account already selected.

Avoid page breaking when the API is not connected.

Sending user-defined calls

Currently in the UI you can send either a Remark or a Transfer, there are multiple other calls that can be dispatched on the target chain, however the UI will never be able to keep up with them.

To make it possible to send arbitrary messages we should introduce third (apart from Remark and Transfer) kind of interaction (Custom) and let the user put an encoded call themself. The UI would only be responsible for:

Wrapping this call into MessagePayload and sending on the Source chain.
Estimating the weight (sending transactionPayment.queryInfo RPC call with the encoded call).
Attempting to decode the call and displaying it to the user (non critical though).

I'm also okay if initially the weight has to be typed in by the user manually.

Run the linter / prettier
Test the code
Build the code.

$ git st
 M .eslintcache

Check that polkadotJS extension is installed -> in case not, properly inform the user.
In case there extension exists and there is no account below it : show a message to ask the user to create the corresponding account / accounts.