paritytech / parity-bridges-ui

bridge-ui-substrate-draft

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 Issues

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

Create global error & message popup

Create switch action component.

Missing LICENSE file

The code has a header which refers to a LICENSE file which I haven't been able to find.

We should also double check what license to use for this repo (is Apache fine, or should we be more conservative and go with GPL3 for example).

Fix dev accounts vs injected accounts

The signer thing needs to be fixed.

Display popover with information about transaction/call

Before the user hits the transfer button once all the mandatory values were provided there has to be a mechanism to inform the user what it will be executed:

("sending remark with payload 0x123", etc).

Best Target Finalized block is empty

There is no value displayed on both chains:

Build E2E testing basis with one happy path.

Babel configuration to permit three shaking on imports.

Babel configuration to permit three shaking on imports.

Discussion started on: https://github.com/paritytech/parity-bridges-ui/pull/69/files#r616063656

Swap chains is not working ( disconnection issues )

Use grandpa pallets to query the storage

Fix github actions and implement env.* files.

Display balances for source and target accounts.

.eslintcache should most likely not be part of the repo

Getting changes in that file only after running the code, seems it contains absolute paths.

$ git st
 M .eslintcache

Apply styles on Transfer component.

Transfer.tsx component need to apply the following design enclosed in the red square.

Also a little UX change is needed: Instead of showing the fee as soon as all the information is provided , the Calculate fees button needs to show the value when it is clicked.

Save history of executed transactions in the local storage.

Replace semantic UI for Material UI

Move repo to paritytech organisation.

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 account selector component (with derivation)

Create filter on account selector for accounts that only exist on specific chain

The account selector component should read the accounts that only exist on specific accounts and show it properly in the select component.

Display links to polkadot.js

Things that should be linked for easy inspection:

1. Block number - details of the block
2. Network name - block explorer
3. Account addresses - details of an account
4. 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)

Build list of existing components that need to be tested.

To build the list of components to start creating tests.
Define snapshot strategy.

Extract bridge* object pallet to a function.

Build Base Layout

Build a Custom Types tests

Adding tests to the CI

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

Avoid page breaking when the API is not connected.

Create execution steps for a transaction

Put icons on all app

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.

Add block / hash links to polkadotjs.

See #38 for references.

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?

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:

1. Wrapping this call into MessagePayload and sending on the Source chain.
2. Estimating the weight (sending transactionPayment.queryInfo RPC call with the encoded call).
3. 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.

Set up CI

The build should:

1. Run the linter / prettier
2. Test the code
3. Build the code.

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.

Apply design to the intro screen - detect extension, detect accounts

This task is for apply the proper design on the task described #55

Define typescript types for customTypes definition

Instructions in README

It would be good to explain what other components are required to run the dashboard.
I imagine it's rialto and millau nodes listening on specific ports, right?

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.

Show execution status flow.

Investigate node's abnormal closure connect issues.

In the developer console after some time the following errors start appearing:

index.js:1 2021-03-18 13:10:15 API-WS: disconnected from ws://127.0.0.1:19944: 1006:: Abnormal Closure

Intro screen - detect extension, detect accounts

When the UI is loading it has to follow the following behavior:

1. Check that polkadotJS extension is installed -> in case not, properly inform the user.
2. 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.

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.

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.

Apply design to dashboard cards

Move the existing top source / target dashboard to the right pane of the design:

Review Errors

Updating metadata in the extension (or a link to do that)

Switch source and target when an account from target is selected.

Apply styles on Remark component.

This is mainly the same design as #64 but without no receiver field.