Merge pull request #167 from poanetwork/develop

Merge the develop branch to the master branch

.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.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",

public/index.html

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

src/App.js

@@ -4,6 +4,7 @@ import { Route } from 'react-router-dom'
 import './assets/stylesheets/application.css';
 import { Disclaimer } from './components'
 import { ModalContainer } from './components'
+import { NoWallet } from './components'
 import { setItem, getItem, DISCLAIMER_KEY } from './components/utils/localstorage'
 
 export class App extends React.Component {
@@ -54,6 +55,7 @@ export class App extends React.Component {
           <Disclaimer
             onConfirmation={this.closeDisclaimer} />
         </ModalContainer>
+        <NoWallet showModal={!showDisclaimer} />
       </div>
     )
   }

src/assets/stylesheets/application/bridge.scss

@@ -707,6 +707,134 @@
   }
 }
 
+.noWallet-alert {
+  display: flex;
+  width: 540px;
+  height: 380px;
+  border-radius: 10px 8px 8px 10px;
+  background-color: #ffffff;
+
+  @media screen and (max-width: $small-mobile-width) {
+    padding-top: 60px;
+  }
+
+  @media screen and (max-width: $tablet-width) {
+    flex-direction: column;
+    width: 92%;
+    height: auto;
+    margin-left: 4%;
+  }
+
+  .noWallet-image-container {
+    width: 150px;
+    background-image: linear-gradient(to right, #7258b0, #5231a0);
+    border-radius: 8px 0 0 8px;
+
+    @media screen and (max-width: $tablet-width) {
+      display: none;
+    }
+
+    .noWallet-icon {
+      width: 150px;
+      margin-top: 0;
+    }
+  }
+
+  .noWallet-alert-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    width: 389px;
+    padding: 24px 30px;
+
+    @media screen and (max-width: $tablet-width) {
+      padding: 10px 0;
+      width: 88%;
+      align-self: center;
+    }
+
+    .noWallet-title {
+      font-size: 44px;
+      color: #5c34a2;
+      line-height: 1;
+
+      @media screen and (max-width: $tablet-width) {
+        font-size: 30px;
+        padding-top: 2%;
+        padding-bottom: 2%;
+      }
+
+    }
+
+    .noWallet-description {
+      font-size: 14px;
+      color: #666666;
+      padding-top: 10px;
+      padding-bottom: 10px;
+      line-height: 1.71;
+
+      @media screen and (max-width: $tablet-width) {
+        padding-left: 1%;
+        padding-right: 1%;
+      }
+    }
+  }
+
+  .noWallet-buttons {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: flex-end;
+    align-content: space-around;
+    height: 100%;
+
+    @media screen and (max-width: $small-mobile-width) {
+      flex-direction: column;
+    }
+
+    .noWallet-metamask {
+      width: 96px;
+      line-height: 36px;
+      text-align: center;
+      border-radius: 3px;
+      color: #ffffff;
+      background-color: #ffaa07;
+
+      @media screen and (max-width: $small-mobile-width) {
+        width: 100%;
+      }
+    }
+
+    .noWallet-niftyWallet {
+      width: 106px;
+      line-height: 36px;
+      text-align: center;
+      border-radius: 3px;
+      color: #ffffff;
+      background-color: #5c34a2;
+
+      @media screen and (max-width: $small-mobile-width) {
+        width: 100%;
+        margin: 10px 0;
+      }
+    }
+
+    .noWallet-cancel {
+      width: 72px;
+      height: 36px;
+      border-radius: 3px;
+      border: 1px solid #5c34a2;
+      color: #5c34a2;
+      background-color: #ffffff;
+
+      @media screen and (max-width: $small-mobile-width) {
+        width: 100%;
+      }
+    }
+  }
+}
+
 .disclaimer-alert {
   display: flex;
   width: 600px;

src/assets/stylesheets/application/header.scss

@@ -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/components/Bridge.js

@@ -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/components/Header.js

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