Coder Social home page Coder Social logo

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

azerella avatar goldsteinsveta avatar hbulgarini avatar sergejparity avatar tomusdrw avatar wirednkod avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

parity-bridges-ui's Issues

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)

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:

Screen Shot 2021-04-20 at 15 34 40

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

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.

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?

image

Apply design on transaction Status Tracking

Apply design to the existing component transaction component:

Screen Shot 2021-04-20 at 15 40 48

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

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.

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 styles on Transfer component.

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

Screen Shot 2021-04-20 at 15 37 18

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.

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

Set up CI

The build should:

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

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.