Merge pull request #141 from poanetwork/support-rsk

Added support of work through public RPC nodes that do not support `eth_getLogs` call: e.g. Rootstock public RPC.

Author: akolotov

.env.example

@@ -7,6 +7,10 @@ REACT_APP_HOME_NATIVE_NAME=POA
 REACT_APP_HOME_NETWORK_NAME="POA Sokol"
 REACT_APP_FOREIGN_NETWORK_NAME=Kovan
 
+# Set to true if network doesn't support events
+REACT_APP_HOME_WITHOUT_EVENTS=false
+REACT_APP_FOREIGN_WITHOUT_EVENTS=false
+
 REACT_APP_HOME_EXPLORER_TX_TEMPLATE=https://blockscout.com/poa/sokol/tx/%s
 REACT_APP_FOREIGN_EXPLORER_TX_TEMPLATE=https://blockscout.com/eth/kovan/tx/%s
 REACT_APP_HOME_EXPLORER_ADDRESS_TEMPLATE=https://blockscout.com/poa/sokol/address/%s
@@ -21,3 +25,9 @@ REACT_APP_FOREIGN_GAS_PRICE_ORACLE_URL=https://gasprice.poa.network/
 REACT_APP_FOREIGN_GAS_PRICE_SPEED_TYPE=standard
 REACT_APP_FOREIGN_GAS_PRICE_FALLBACK=5000000000
 REACT_APP_FOREIGN_GAS_PRICE_UPDATE_INTERVAL=15000
+
+# Default
+REACT_APP_DESCRIPTION="The POA cross-chain bridge serves as a method of transferring POA native tokens from the POA Network to the Ethereum network in a quick and cost-efficient manner."
+
+# RSK
+#REACT_APP_DESCRIPTION="The TokenBridge serves as a method of transferring Bancor Network tokens between the Ethereum network to Rootstock network in a quick and cost-efficient manner."

README.md

@@ -1,8 +1,8 @@
 # POA Bridge - User Interface (UI) Application
 
-[![Build Status](https://travis-ci.org/patitonar/bridge-ui.svg?branch=master)](https://travis-ci.org/patitonar/bridge-ui)
+[![Build Status](https://travis-ci.org/poanetwork/bridge-ui.svg?branch=master)](https://travis-ci.org/poanetwork/bridge-ui)
 [![Gitter](https://badges.gitter.im/poanetwork/poa-bridge.svg)](https://gitter.im/poanetwork/poa-bridge?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
-[![Coverage Status](https://coveralls.io/repos/github/patitonar/bridge-ui/badge.svg?branch=master)](https://coveralls.io/github/patitonar/bridge-ui?branch=master)
+[![Coverage Status](https://coveralls.io/repos/github/poanetwork/bridge-ui/badge.svg?branch=master)](https://coveralls.io/github/poanetwork/bridge-ui?branch=master)
 [![dependencies Status](https://david-dm.org/poanetwork/bridge-ui/status.svg)](https://david-dm.org/poanetwork/bridge-ui)
 
 Welcome to the POA Bridge! Following is an overview of the POA Bridge and Bridge UI Application, as well as [basic instructions for getting started](#getting-started).
@@ -165,6 +165,8 @@ REACT_APP_HOME_HTTP_PARITY_URL | http public rpc node for Foreign Network
 REACT_APP_HOME_NATIVE_NAME | name of the home native coin
 REACT_APP_HOME_NETWORK_NAME | name to be displayed for home network
 REACT_APP_FOREIGN_NETWORK_NAME | name to be displayed for foreign network
+REACT_APP_HOME_WITHOUT_EVENTS | `true` if home network doesn't support events
+REACT_APP_FOREIGN_WITHOUT_EVENTS | `true` if foreign network doesn't support events 
 REACT_APP_HOME_EXPLORER_TX_TEMPLATE | template link to transaction on home explorer. `%s` will be replaced by transaction hash
 REACT_APP_FOREIGN_EXPLORER_TX_TEMPLATE | template link to transaction on foreign explorer. `%s` will be replaced by transaction hash
 REACT_APP_HOME_EXPLORER_ADDRESS_TEMPLATE | template link to address on home explorer. `%s` will be replaced by address
@@ -177,6 +179,7 @@ REACT_APP_FOREIGN_GAS_PRICE_ORACLE_URL | The URL used to get a JSON response fro
 REACT_APP_FOREIGN_GAS_PRICE_SPEED_TYPE | Gas Price speed (slow, standard, fast, instant)
 REACT_APP_FOREIGN_GAS_PRICE_FALLBACK | The gas price (in Wei) that is used if both the oracle and the fall back gas price specified in the Foreign Bridge contract are not available.
 REACT_APP_FOREIGN_GAS_PRICE_UPDATE_INTERVAL | An interval in milliseconds used to get the updated gas price value either from the oracle or from the Foreign Bridge contract.
+REACT_APP_DESCRIPTION | The meta description for the deployed bridge page
 
   * Run `npm run start`
   * Make sure your web3 wallet (Nifty Wallet or MetaMask) is funded and connected to the POA Sokol Network (see step 2)

package-lock.json

@@ -21,6 +21,7 @@
     "react-app-rewired": "^1.5.0",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.2.0",
+    "react-router": "^4.3.1",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.1",
     "react-transition-group": "^2.2.1",

package.json

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <meta name="theme-color" content="#000000">
         <meta property="og:title" content="POA Bridge UI" />
-        <meta property="og:description" content="The POA cross-chain bridge serves as a method of transferring POA native tokens from the POA Network to the Ethereum network in a quick and cost-efficient manner. " />
+        <meta property="og:description" content="%REACT_APP_DESCRIPTION%" />
         <meta property="og:url" content="https://poanetwork.github.io/bridge-ui" />
         <meta property="og:type" content="website" />
         <meta property="og:image" content="/images/bridgeogimage.jpg">

public/index.html

@@ -32,7 +32,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    width: 600px;
+    max-width: 700px;
 
     @media screen and (max-width: $mobile-width) {
       display: none;
@@ -57,7 +57,7 @@
   }
 
   .link {
-    margin-left: 30px;
+    margin: 0 15px;
     line-height: 16px;
     text-decoration: none;
     font-weight: bold;

src/assets/stylesheets/application.css

@@ -94,11 +94,13 @@ export class Bridge extends React.Component {
             tokenAddress: homeStore.tokenAddress
           })
         } else {
+          const value = Web3Utils.toHex(Web3Utils.toWei(amount))
           return txStore.doSend({
             to: homeStore.HOME_BRIDGE_ADDRESS,
             from: web3Store.defaultAccount.address,
-            value: Web3Utils.toHex(Web3Utils.toWei(amount)),
-            data: '0x'
+            value,
+            data: '0x',
+            sentValue: value
           })
         }
       } catch (e) {

src/assets/stylesheets/application/header.scss

@@ -6,42 +6,53 @@ import menuOpenIcon from '../assets/images/icons/icon-close.svg'
 import { Wallet } from './Wallet'
 import { DailyQuotaModal } from './DailyQuotaModal'
 import { inject, observer } from 'mobx-react/index'
+import yn from './utils/yn'
 
-const getMobileMenuLinks = (onMenuToggle) =>
+const getMobileMenuLinks = (onMenuToggle, withoutEvents) =>
   (<div className="links_container_mobile">
-    <Link to='/events' className="link" onClick={onMenuToggle}>
-      <i className="icon_events" /><span className='link_text'>Events</span>
-    </Link>
+    {withoutEvents ? null :
+      <Link to='/events' className="link" onClick={onMenuToggle}>
+        <i className="icon_events" /><span className='link_text'>Events</span>
+      </Link>
+    }
     <Link to='/status' className="link" onClick={onMenuToggle}>
       <i className="icon_status" /><span className='link_text'>Status</span>
     </Link>
-    <Link to='/statistics' className="link" onClick={onMenuToggle}>
-      <i className="icon_statistics" /><span className='link_text'>Statistics</span>
-    </Link>
+    {withoutEvents ? null :
+      <Link to='/statistics' className="link" onClick={onMenuToggle}>
+        <i className="icon_statistics" /><span className='link_text'>Statistics</span>
+      </Link>
+    }
   </div>)
 
 
 @inject("RootStore")
 @observer
 export class Header  extends React.Component {
   render () {
-    const {showMobileMenu, onMenuToggle, RootStore: {alertStore}} = this.props
+    const { showMobileMenu, onMenuToggle, RootStore: { alertStore, web3Store } } = this.props
+    const { REACT_APP_HOME_WITHOUT_EVENTS: HOME, REACT_APP_FOREIGN_WITHOUT_EVENTS: FOREIGN } = process.env
+    const withoutEvents = web3Store.metamaskNet.id === web3Store.homeNet.id.toString() ? yn(HOME) : yn(FOREIGN)
     return (
       <header className="header">
-        {showMobileMenu && (<div className="header-mobile-menu-container">{getMobileMenuLinks(onMenuToggle)}</div>)}
+        {showMobileMenu && (<div className="header-mobile-menu-container">{getMobileMenuLinks(onMenuToggle, withoutEvents)}</div>)}
         <div className="container">
           <Link to="/" onClick={showMobileMenu ? onMenuToggle : null}><img className="header-logo" src={logo}
                                                                            alt=""/></Link>
           <div className="links_container">
-            <Link to='/events' className="link">
-              <i className="icon_events"/><span className='link_text'>Events</span>
-            </Link>
+            {withoutEvents ? null :
+              <Link to='/events' className="link">
+                <i className="icon_events"/><span className='link_text'>Events</span>
+              </Link>
+            }
             <Link to='/status' className="link">
               <i className="icon_status"/><span className='link_text'>Status</span>
             </Link>
-            <Link to='/statistics' className="link">
-              <i className="icon_statistics"/><span className='link_text'>Statistics</span>
-            </Link>
+            {withoutEvents ? null :
+              <Link to='/statistics' className="link">
+                <i className="icon_statistics"/><span className='link_text'>Statistics</span>
+              </Link>
+            }
             <Wallet/>
           </div>
           <div className="mobile-menu">

src/components/Bridge.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { inject, observer } from "mobx-react";
 import { EventsListHeader } from './index'
 import { Event } from './index'
+import yn from './utils/yn'
+import { Redirect } from 'react-router'
 
 
 const WAIT_INTERVAL = 700;
@@ -132,12 +134,14 @@ export class RelayEvents extends React.Component {
   }
 
   render(){
-    const { homeStore, foreignStore } = this.props.RootStore
+    const { homeStore, foreignStore, web3Store } = this.props.RootStore
     const { selectedList } = this.state
     const home = this.getHomeEvents(homeStore, foreignStore)
     const foreign = this.getForeignEvents(foreignStore, homeStore)
+    const { REACT_APP_HOME_WITHOUT_EVENTS: HOME, REACT_APP_FOREIGN_WITHOUT_EVENTS: FOREIGN } = process.env
+    const withoutEvents = web3Store.metamaskNet.id === web3Store.homeNet.id.toString() ? yn(HOME) : yn(FOREIGN)
 
-    return(
+    return withoutEvents ? (<Redirect to="/" />) : (
       <div className="events-page">
         <div className="events-container">
           <EventsListHeader