Allow connection only to authorized chain networks (#2734)

Add check to allow connection only to authorized chain networks

Refactor allowed networks value as separate constant

Remove unnecessary push to stakes websockets

Replace network restriction condition with function and restrict more stake operations

Refactor function that restrict network access in staking dapp

apps/block_scout_web/assets/js/pages/stakes.js

@@ -15,11 +15,13 @@ import { openMakeStakeModal } from './stakes/make_stake'
 import { openMoveStakeModal } from './stakes/move_stake'
 import { openWithdrawStakeModal } from './stakes/withdraw_stake'
 import { openClaimWithdrawalModal } from './stakes/claim_withdrawal'
+import { openWarningModal } from '../lib/modals'
 
 export const initialState = {
   channel: null,
   web3: null,
   account: null,
+  network: null,
   stakingContract: null,
   blockRewardContract: null,
   tokenDecimals: 0,
@@ -30,6 +32,9 @@ export const initialState = {
   stakingAllowed: false
 }
 
+// 100 - id of xDai network, 101 - id of xDai test network
+export const allowedNetworkIds = [100, 101]
+
 export function reducer (state = initialState, action) {
   switch (action.type) {
     case 'PAGE_LOAD':
@@ -50,6 +55,14 @@ export function reducer (state = initialState, action) {
         })
       })
     }
+    case 'NETWORK_UPDATED': {
+      return Object.assign({}, state, {
+        network: action.network,
+        additionalParams: Object.assign({}, state.additionalParams, {
+          network: action.network
+        })
+      })
+    }
     case 'FILTERS_UPDATED': {
       return Object.assign({}, state, {
         additionalParams: Object.assign({}, state.additionalParams, {
@@ -173,6 +186,11 @@ function initializeWeb3 (store) {
     store.dispatch({ type: 'WEB3_DETECTED', web3 })
 
     setInterval(async function () {
+      const networkId = await web3.eth.net.getId()
+      if (!store.getState().network || (networkId !== store.getState().network.id)) {
+        setNetwork(networkId, store)
+      }
+
       const accounts = await web3.eth.getAccounts()
       const account = accounts[0] ? accounts[0].toLowerCase() : null
 
@@ -191,6 +209,22 @@ function setAccount (account, store) {
   refreshPage(store)
 }
 
+function setNetwork (networkId, store) {
+  let network = {
+    id: networkId,
+    authorized: false
+  }
+
+  if (allowedNetworkIds.includes(networkId)) {
+    network.authorized = true
+  } else {
+    openWarningModal('Unauthorized', 'Connect to the xDai Chain for staking.<br /> <a href="https://docs.xdaichain.com" target="_blank">Instructions</a>')
+  }
+
+  store.dispatch({ type: 'NETWORK_UPDATED', network })
+  refreshPage(store)
+}
+
 async function loginByMetamask (event) {
   event.stopPropagation()
   event.preventDefault()

apps/block_scout_web/assets/js/pages/stakes/become_candidate.js

@@ -2,7 +2,7 @@ import $ from 'jquery'
 import { BigNumber } from 'bignumber.js'
 import { openModal, openErrorModal, openWarningModal, lockModal } from '../../lib/modals'
 import { setupValidation } from '../../lib/validation'
-import { makeContractCall } from './utils'
+import { makeContractCall, isSupportedNetwork } from './utils'
 
 export function openBecomeCandidateModal (store) {
   if (!store.getState().account) {
@@ -10,6 +10,8 @@ export function openBecomeCandidateModal (store) {
     return
   }
 
+  if (!isSupportedNetwork(store)) return
+
   store.getState().channel
     .push('render_become_candidate')
     .receive('ok', msg => {

apps/block_scout_web/assets/js/pages/stakes/claim_withdrawal.js

@@ -1,8 +1,10 @@
 import $ from 'jquery'
 import { openModal, lockModal } from '../../lib/modals'
-import { makeContractCall, setupChart } from './utils'
+import { makeContractCall, setupChart, isSupportedNetwork } from './utils'
 
 export function openClaimWithdrawalModal (event, store) {
+  if (!isSupportedNetwork(store)) return
+
   const address = $(event.target).closest('[data-address]').data('address')
 
   store.getState().channel

apps/block_scout_web/assets/js/pages/stakes/make_stake.js

@@ -2,7 +2,7 @@ import $ from 'jquery'
 import { BigNumber } from 'bignumber.js'
 import { openModal, openWarningModal, lockModal } from '../../lib/modals'
 import { setupValidation } from '../../lib/validation'
-import { makeContractCall, setupChart } from './utils'
+import { makeContractCall, setupChart, isSupportedNetwork } from './utils'
 
 export function openMakeStakeModal (event, store) {
   if (!store.getState().account) {
@@ -10,6 +10,8 @@ export function openMakeStakeModal (event, store) {
     return
   }
 
+  if (!isSupportedNetwork(store)) return
+
   const address = $(event.target).closest('[data-address]').data('address') || store.getState().account
 
   store.getState().channel

apps/block_scout_web/assets/js/pages/stakes/move_stake.js

@@ -2,9 +2,11 @@ import $ from 'jquery'
 import { BigNumber } from 'bignumber.js'
 import { openModal, lockModal } from '../../lib/modals'
 import { setupValidation } from '../../lib/validation'
-import { makeContractCall, setupChart } from './utils'
+import { makeContractCall, setupChart, isSupportedNetwork } from './utils'
 
 export function openMoveStakeModal (event, store) {
+  if (!isSupportedNetwork(store)) return
+
   const fromAddress = $(event.target).closest('[data-address]').data('address')
 
   store.getState().channel

apps/block_scout_web/assets/js/pages/stakes/remove_pool.js

@@ -1,7 +1,8 @@
 import { openQuestionModal } from '../../lib/modals'
-import { makeContractCall } from './utils'
+import { makeContractCall, isSupportedNetwork } from './utils'
 
 export function openRemovePoolModal (store) {
+  if (!isSupportedNetwork(store)) return
   openQuestionModal('Remove my Pool', 'Do you really want to remove your pool?', () => removePool(store))
 }
 

apps/block_scout_web/assets/js/pages/stakes/utils.js

@@ -1,7 +1,7 @@
 import $ from 'jquery'
 import Chart from 'chart.js'
 import { refreshPage } from '../../lib/async_listing_load'
-import { openErrorModal, openSuccessModal } from '../../lib/modals'
+import { openErrorModal, openSuccessModal, openWarningModal } from '../../lib/modals'
 
 export async function makeContractCall (call, store) {
   let gas, timeout
@@ -82,3 +82,13 @@ export function setupChart ($canvas, self, total) {
     }
   })
 }
+
+export function isSupportedNetwork (store) {
+  if (store.getState().network.authorized) {
+    return true
+  }
+
+  openWarningModal('Unauthorized', 'Connect to the xDai Chain for staking.<br /> <a href="https://docs.xdaichain.com" target="_blank">Instructions</a>')
+
+  return false
+}

apps/block_scout_web/assets/js/pages/stakes/withdraw_stake.js

@@ -2,9 +2,11 @@ import $ from 'jquery'
 import { BigNumber } from 'bignumber.js'
 import { openModal, openErrorModal, lockModal } from '../../lib/modals'
 import { setupValidation } from '../../lib/validation'
-import { makeContractCall, setupChart } from './utils'
+import { makeContractCall, setupChart, isSupportedNetwork } from './utils'
 
 export function openWithdrawStakeModal (event, store) {
+  if (!isSupportedNetwork(store)) return
+
   const address = $(event.target).closest('[data-address]').data('address')
 
   store.getState().channel