omni / bridge-ui

UI for TokenBridge, an interoperability solution between Ethereum networks for native and ERC tokens

Token Bridge User Interface (UI) Application

A DApp interface to transfer assets between networks running the Token Bridge contracts.

Due to reorganization of the token bridge repos into one monorepo the sources of the token bridge UI was moved to the TokenBridge repo.

What does it mean for you? If you would like

• to raise an issue against the UI, follow this link.
• to find if a new version of the UI is ready in the monorepo, visit the releases tab.
• to get access to the last changes made in this repo, check the release 2.1.1 or the master branch.

If you still have no clear understanding what you need to do, please visit the TokenBridge forum and raise your question there.

bridge-ui's Issues

Test issue

Integration test

Add indication for E2E script that web3 has fully loaded all balances

@patitonar

I'm thinking of adding some class to html or body tag like web3Loaded

Multiple Alerts on Connection Error

When the app cannot establish connection to Home/Foreign Network it shows a sweetalert for every request it fails. Example https://cl.ly/1n173908110w

it should not look like clickable link

also the style looks weird, feels like justify-content was used.

the Checkmark looks too close to the text.

Integrate Netlify

Problem: hard to review changes from PRs
Solution: Use netlify for each PR deployment

Disclaimer "Continue" button should be hidden complete if you dont't agree to the terms

Continue button should not be visible at all unless you tick the terms and conditions

Wrong error message if transfer without installed Metamask

Actual result: error message "Please switch to network ...."
Expected result: error message "You need to install metamask ...."

Wait for 8 block confirmations on Foreign

Deployment hangs when following the README instructions

It may be that I have used some incorrect information, as there is some ambiguity in the instructions. In particular, I have used the same account throughout, for 0xETH_ACCOUNT_VALIDATOR_SOKOL and the VALIDATORS and PROXY_OWNER parameters for running the deployment.

Another change I made, was to include this same account as the from field in each network configuration:

module.exports = {
  networks: {
    development: {
      host: "localhost",
      port: 7545,
      network_id: "*", // Match any network id
      from: "0xMY_ACCOUNT"
    },
    home: {
      host: "localhost",
      port: "8545", // check your sokol.toml [rpc] port section
      network_id: "*",
      from: "0xMY_ACCOUNT",
      gas: 4700000,
      gasPrice: 1000000000
    }
  }
}

This was because I was getting an error saying that the from parameter was missing.

With this setup, I have tried followed the instructions up to the bridge contract deployment:

$ VALIDATORS="0xMY_ACCOUNT" REQUIRED_NUMBER_OF_VALIDATORS=1 HOME_LIMIT=1000000000000000000 MAX_AMOUNT_PER_TX=100000000000000000 PROXY_OWNER="0xMY_ACCOUNT" NETWORK=home npm run deploy

But the process just hangs here:

> [email protected] deploy /Users/peter/dev/poa/sokol-kovan-bridge/poa-parity-bridge-contracts
> truffle migrate --reset --network $NETWORK

Using network 'home'.

Running migration: 1_initial_migration.js
  Deploying Migrations...

With Parity UI connected to Kovan, I do get a request for a signature, but this is on the wrong network. I believe this needs to be signed on the Sokol chain instead. However, I cannot get Parity UI to connect to me Sokol chain.

Wrong error message if Metamask isn't installed

if Metamask isn't installed wrong error message is repeatedly appears
Test URL :https://poabridge.netlify.com/

https://drive.google.com/open?id=15D7bKHLg-osqQ96EMv8Svb6F0Vsnyh9e

Console log:
getAcc.log

New loading screen

https://invis.io/R6HX55MHUW3

Add Zendesk widget to Bridge DApp

Problem
Add the embeddable zendesk widget.

Solution
Add the following to the head

		<!-- Start of poanet Zendesk Widget script -->
		<script>
			/*<![CDATA[*/
			window.zE || (function(e, t, s) {
				var n = window.zE = window.zEmbed = function() {
						n._.push(arguments)
					},
					a = n.s = e.createElement(t),
					r = e.getElementsByTagName(t)[0];
				n.set = function(e) {
					n.set._.push(e)
				}, n._ = [], n.set._ = [], a.async = true, a.setAttribute("charset", "utf-8"), a.src = "https://static.zdassets.com/ekr/asset_composer.js?key=" + s, n.t = +new Date, a.type = "text/javascript", r.parentNode.insertBefore(a, r)
			})(document, "script", "bb7f35c0-88a9-46f8-8807-01dd723665ea"); /*]]>*/
		</script>
		<!-- End of poanet Zendesk Widget script -->

update README related to Kovan hardfork

Problem: Kovan did hard hard fork to enable WASM
Solution: we need to change instruction

Lets ignore 50 blocks error from metamask

https://rstormsf.github.io/skdjfalskdjfhkjhldsjhf7278_23/

Transaction was not mined within 50 blocks, please make sure your transaction was properly sent. Be aware that it might still be mined!

if we see this issue, we should ignore it and keep waiting for confirmations/receipts

Refactor react components

This issue refers to the third and fourth item of #20 . Some components can be refactored to reusable components, splitting logic and stateless components.

Fix Warnings

This is the first item of #20. When running the app on dev mode there are a couple of warnings. Fixing them will help to easily notice new warnings while working on new features.

Update balances if metamask account is changed

https://github.com/MetaMask/faq/blob/master/DEVELOPERS.md#ear-listening-for-selected-account-changes

Should be validation of 'amount' field

Should be validation of input value :

1. Only numbers
2. Length should be limited by decimals(18 digits after comma)

Reflect in the documentation recent changes in bridge and contract deployment procedure

Please update the README.md file to reflect changes made under:

• omni/tokenbridge-contracts#23 - to add management ownership with multisig tools
• poanetwork/gnosis-deploy@d05d7cb - to introduce multisig tool
• omni/tokenbridge-contracts#21 - to change validator configuration in .env file
• omni/poa-bridge#46 - to add RPC support

Also I think it is not necessary to install and configure parity binary any more. So, it could be removed from documentation also.

HIGH Priority: Show correct txHash when it's being minted

so when tx deposit is done
wrong tx hash is being show to sweetalert
example:
The app is showing:
https://etherscan.io/tx/0x69efa6763588b4c932fda3066bb74538382ad906e3cab2dcf0ab120cf50437c7

should be next one:
https://etherscan.io/tx/0xaa3c04a06ef24da1d62328007984eeb2b34d7e7668c592386479c9252d1bae93

Last minute UI changes

Commas in number to make it more readable (2,999,999.5)

Remove the word “limit” on both info boxes.

• Actually instead of Current Deposit Limit, change to Daily Deposit Limit
• Instead of Token Contract Balance, Locked POA in Bridge Contract
• On the POA20 side instead of Current Withdrawal Limit, Daily Withdrawal Limit

Also, close the modal if clicked outside

Arrow doesn't change when submit tx and switching network

Add Travis and Coveralls

In order to make PRs easier to merge and improve code quality, I think we should add travis and Coveralls.
This will allow us to run tests on every PR.

Add token address and total supply to View More page

Token address and Foreign/Home Bridge Address should be clickable

Problem
Token address and Bridge Address are not clickable

Solution
Make them clickable and open a new a window in explorer

LOW PRIORITY: set GasPrice speed from .env variable

we should be able to setup gasPrice speed from .env var
fast, standard, instant, etc

similar to
https://github.com/poanetwork/bridge-monitor/blob/master/.env.example#L6

Refactoring

• Make it more modular by decoupling React components into tiny modules

• send sweetalert when the token is received on another chain

add sweetalert confirmation on transfer click

please show confirmation box with some information:

Please confirm that you would like to send 0.1 POA from POA.network to receive 0.1 POA20 on Ethereum Mainnet.
After confirmation, please allow metamask to submit transaction.
Cancel/Confirm buttons

Also, run validation checks on this click to make sure he is connected to right network.

Change language of the more info

Network (Instead of RPC URL)
Home Address - Bridge Home Address
Current Deposit Limit
Maximum Amount Per Transaction
Minimum Amount Per Transaction
Locked POA native tokens Amount
Your POA Balance (This should be the only value bolded)

Network (Instead of RPC URL)
Foreign Address - Bridge Foreign Address
Current Withdraw Limit -
Maximum Amount Per Transaction
Minimum Amount Per Transaction
Custom Token Address
POA20 tokens Amount
Your POA20 Balance (This should be the only value bolded)

update README.md with a description of the product

Problem:
README.md is missing the general description of the product. Would be good to add

• what is bridge-ui
• what a user could do with bridge-ui

Solutions:
add info

TX Hash should be clickable to the explorer window

Problem
On the confirmation window, the TX hash being displayed is just a string and not a link

Solution
The TX hash should be clickable to an external explorer window.

Home deposits should not wait 8 block from Foreign

Home deposits should only wait 8 block from HOME, not Foreign

Foreign withdrawals should wait 8 blocks on Foreign

Header icon looks funky

User cannot scroll disclaimer page on mobile devices

there is something wrong with overflow css on mobile views

Refactor mobx Stores

This refers to the second item of #20 . It would be nice to decouple the store logic from web3 and contracts functions. Also there are some functions that can be refactored to more reusable code.

Add matching query for CollectedSignatures Event

Solution:
Every event CollectedSignated & SignedForWithdraw has messageHash param,
so I have to call message method on the contract and substract txHash from it by doing the following:

message =

0x0039f22efb07a647557c7c5d17854cfd6d489ef3000000000000000000000000000000000000000000000000016345785d8a00002aba426015916079a2a10306fa1bb2edd18ed030a1a04cd9dcba2d1bd77b096c000000000000000000000000000000000000000000000000000000003b9aca00

txHash = '0x' + message.substring(106,170)

Update favicon

Problem:
Bridge has old favicon for POA.

Solution:
Update to this favicon:

Parity Bridge is corrupting the database file

I'm running Parity-bridge, based on the current version of the README, using:

./parity-bridge/target/release/bridge --config config.toml --database db.toml

And my db.toml file is like this:

home_contract_address = "0x74A71bFb6C4903d79EbDd77C556D2d43A9346BdD"
foreign_contract_address = "0xD6fE4c32ADDe8e4b5eD6272Ecb5c434Dc7b120c4"
home_deploy = 2025251 # block number at which the contract was created for home contract you can find in `bridgeDeploymentResults.json`
foreign_deploy = 6923247 # block number at which the contract was created for foreign contract you can find in `bridgeDeploymentResults.json`
checked_deposit_relay = 2025251 # last checked deposits events on Home network
checked_withdraw_relay = 6923247 # last checked withdraw events on Foreign network
checked_withdraw_confirm = 6923247 # last checked withdraw events on Foreign network

However, once the parity-bridge process starts, the file gets corrupted. It looks like this:

home_contract_address = "0x74a71bfb6c4903d79ebdd77c556d2d43a9346bdd"
foreign_contract_address = "0xd6fe4c32adde8e4b5ed6272ecb5c434dc7b120c4"
home_deploy = 2025251
foreign_deploy = 6923247
checked_deposit_relay = 2026365
checked_withdraw_relay = 6924041
checked_withdraw_confirm = 6924041
loy = 6923247 # block number at which the contract was created for foreign contract you can find in `bridgeDeploymentResults.json`
checked_deposit_relay = 2025251 # last checked deposits events on Home network
checked_withdraw_relay = 6923247 # last checked withdraw events on Foreign network
checked_withdraw_confirm = 6923247 # last checked withdraw events on Foreign network

The Home and Foreign account balances show as zero, even though I transferred ETH into them, and I suspect this is the cause.

UI Arrow shouldn't be displayed if there is unknown network

We need to indicate to the user via alert that he is on unknown to the bridge network and tell him that he needs to specify a particular network (Sokol or Kovan) in order to communicate with the bridge

If transfer triggered from wrong network, loading still apprears

https://cl.ly/16131h2p2k05

E2E script

Problem: We need to make sure each PR satisfies our requirements to send tx via metamask from Home to Foreign and from Foreign to Home
Solution: Write end to end test script

add find by txid

allow users to show all events when search query has txHash

make it mobile responsive

After open the bridge web page the transfer direction doesn't match the selected network in Metamask

Steps to reproduce:

1. Open browser, activate Metamask, select Kovan network
2. Open https://bridge.poa.net/
3. Observe arrow direction, try to transfer tokens

Expected result:

• after open the bridge web page the transfer direction should be according with selected network in Metamask

Actual result:

• direction by default from Home to Foreign account
• disable to transfer tokens from Foreign to Home
• error message: "Please switch metamask network to Sokol"

Events: searching crashes the page

Reproduce:

1. Open URL https://bridge.poa.net/
2. Perform several transaction through the bridge
3. Open tab 'Events'
4. Start to search any existed transaction by Tx Hash

Expected result:

• search results should be available for short time

Actual result:

• loader is displayed for a long time(I've waited more than 2 minutes)
• page is crashed after reloading

https://drive.google.com/open?id=1ZMCr3L8UezFSnWy5II89lpq59lApjHEY

Optimize design to work on mobile

Browser: Trust Wallet.

switch to http rpc vs websockets

The arrow / confirmation box are not obvious method for transferring Eth to POA

Problem:
When changing to Ethereum / Kovan network, it is not obvious to the user that the arrow has changed direction and that you can transfer POA20 to POA.

Solution:
In my opinion, the tokens to transfer should always be on the left side. No need to change the arrows when changing the network, just swap the texts.

Example: https://www.xe.com/currencyconverter/

Don't Math.ceil, it's better to Math.floor

the balance is actually 0.0554321

Change text in alerts about wrong network

Now "Please switch metamask network to Sokol"
Should be "Please switch Metamask to Sokol network"