Re-enable dapp reload on network change

We want to give devs some time to digest [this blog post](https://medium.com/metamask/breaking-change-no-longer-reloading-pages-on-network-change-4a3e1fd2f5e7) before we making a breaking change to our platform.

Makes it easy to re-implement the change.

3 files changed, 67 insertions, 1 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 40521c569..43302548b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,6 @@
 - Fix bug where account reset did not work with custom RPC providers.
 - Fix for Brave i18n getAcceptLanguages [#4270](https://github.com/MetaMask/metamask-extension/issues/4270)
 - Fix bug where nonce mutex was never released
-- Stop reloading browser page on Ethereum network change
 - Add phishing notice
 
 ## 4.7.4 Tue Jun 05 2018
diff --git a/app/scripts/inpage.js b/app/scripts/inpage.js
index 070f5d247..7dd7fda02 100644
--- a/app/scripts/inpage.js
+++ b/app/scripts/inpage.js
@@ -3,6 +3,7 @@ cleanContextForImports()
 require('web3/dist/web3.min.js')
 const log = require('loglevel')
 const LocalMessageDuplexStream = require('post-message-stream')
+const setupDappAutoReload = require('./lib/auto-reload.js')
 const MetamaskInpageProvider = require('./lib/inpage-provider.js')
 restoreContextAfterImports()
 
@@ -38,7 +39,11 @@ web3.setProvider = function () {
 }
 log.debug('MetaMask - injected web3')
 
+setupDappAutoReload(web3, inpageProvider.publicConfigStore)
+
 // export global web3, with usage-detection and deprecation warning
+
+/* TODO: Uncomment this area once auto-reload.js has been deprecated:
 let hasBeenWarned = false
 global.web3 = new Proxy(web3, {
   get: (_web3, key) => {
@@ -55,6 +60,7 @@ global.web3 = new Proxy(web3, {
     _web3[key] = value
   },
 })
+*/
 
 // set web3 defaultAccount
 inpageProvider.publicConfigStore.subscribe(function (state) {
diff --git a/app/scripts/lib/auto-reload.js b/app/scripts/lib/auto-reload.js
new file mode 100644
index 000000000..cce31c3d2
--- /dev/null
+++ b/app/scripts/lib/auto-reload.js
@@ -0,0 +1,61 @@
+module.exports = setupDappAutoReload
+
+function setupDappAutoReload (web3, observable) {
+  // export web3 as a global, checking for usage
+  let hasBeenWarned = false
+  let reloadInProgress = false
+  let lastTimeUsed
+  let lastSeenNetwork
+
+  global.web3 = new Proxy(web3, {
+    get: (_web3, key) => {
+      // show warning once on web3 access
+      if (!hasBeenWarned && key !== 'currentProvider') {
+        console.warn('MetaMask: web3 will be deprecated in the near future in favor of the ethereumProvider \nhttps://github.com/MetaMask/faq/blob/master/detecting_metamask.md#web3-deprecation')
+        hasBeenWarned = true
+      }
+      // get the time of use
+      lastTimeUsed = Date.now()
+      // return value normally
+      return _web3[key]
+    },
+    set: (_web3, key, value) => {
+      // set value normally
+      _web3[key] = value
+    },
+  })
+
+  observable.subscribe(function (state) {
+    // if reload in progress, no need to check reload logic
+    if (reloadInProgress) return
+
+    const currentNetwork = state.networkVersion
+
+    // set the initial network
+    if (!lastSeenNetwork) {
+      lastSeenNetwork = currentNetwork
+      return
+    }
+
+    // skip reload logic if web3 not used
+    if (!lastTimeUsed) return
+
+    // if network did not change, exit
+    if (currentNetwork === lastSeenNetwork) return
+
+    // initiate page reload
+    reloadInProgress = true
+    const timeSinceUse = Date.now() - lastTimeUsed
+    // if web3 was recently used then delay the reloading of the page
+    if (timeSinceUse > 500) {
+      triggerReset()
+    } else {
+      setTimeout(triggerReset, 500)
+    }
+  })
+}
+
+// reload the page
+function triggerReset () {
+  global.location.reload()
+}