support on && removeListener event for vsys (#31)

* support on && removeListener event for vsys

* extends EventEmitter

* update README.md for new features `on` and `removeListener`

Author: 0x100cc

README.md

@@ -213,6 +213,39 @@ GeneralContract
 
 If developers want to get user NFT list, he/she can filter the result with `NonFungibleContract` type only to get the user's NFT list.
 
+### Listen for AccountsChanged and ChainChanged Events
+
+The JS sample code of listening
+
+```javascript
+//Accounts Changed
+window.vsys.on('accountsChanged', (accounts) => {
+  // Handle the new accounts, or lack thereof.
+  // "accounts" will always be an array, but it can be empty.
+});
+
+// Chain Changed
+window.vsys.on('chainChanged', (chain) => {
+  // Handle the new chain.
+  // "chain" is an object which includes `networkType` and `nodeUrl` two keys
+});
+```
+
+Also, don't forget to remove listeners once you are done listening to them:
+
+```javascript
+function handleAccountsChanged(accounts) {
+  // ...
+}
+
+window.vsys.on('accountsChanged', handleAccountsChanged);
+
+// Later
+
+window.vsys.removeListener('accountsChanged', handleAccountsChanged);
+```
+
+
 ### Add Token to Watch List of Extension Wallet
 
 The JS sample code of request:

src/components/NavBar.vue

@@ -216,7 +216,8 @@ export default {
             return amount
         },
         select(index) {
-            this.$store.commit('account/updateSelectedAccount', index)
+            const newAccountInfo = { 'index': index, 'address': this.addresses[index]}
+            this.$store.commit('account/updateSelectedAccount', newAccountInfo)
         },
         changePage(data) {
             this.$refs.popover.$emit('close')

src/content/content.js

@@ -41,6 +41,17 @@ function listenForProviderRequest () {
     })
 }
 
+chrome.runtime.onMessage.addListener(
+    function(request, sender) {
+        if (sender.tab || !request.data || !request.notification) return
+        switch (request.notification) {
+            case 'accountsChanged': case 'chainChanged':
+                injectScript(`window.vsys.emit('${request.notification}', ${ JSON.stringify(request.data)})`)
+                break
+        }
+    }
+);
+
 listenForProviderRequest()
 
 function getSiteName (window) {

src/inpage/inpage.js

@@ -1,11 +1,18 @@
 
 
 let providerHandle
+let EventEmitter = require("events").EventEmitter
 const methodType = ["address", "publicKey", "amount", "tokenAmount", "watchedTokens", "depositToken", "withdrawToken", "lockToken", "send", "addToken",'webList', "info", "sendNFT", "execContractFunc", "signContent", "regContract"]
-class vsys {
+// const vsysEventEmitter = new EventEmitter()
+// const eventType = ["accountsChanged", "chainChanged"]
+// function vsysEventEmitterHandler({detail}) {
+//     vsysEventEmitter.emit(detail.notification, detail.data)
+// }
 
+class vsys extends EventEmitter{
     constructor() {
-        this.isInstalled = true
+        super();
+        this.isInstalled = true;
     }
 
     request(data) {
@@ -42,5 +49,18 @@ class vsys {
             window.postMessage(message, "*")
         })
     }
+    // on(eventName, callBack) {
+    //     if (!eventType.includes(eventName)) {
+    //         return { "result": false, "message": "Invalid event" }
+    //     }
+    //     vsysEventEmitter.on(eventName, callBack)
+    //     let listenerName = "vsys-on-" + eventName
+    //     window.removeEventListener(listenerName, vsysEventEmitterHandler)
+    //     window.addEventListener(listenerName, vsysEventEmitterHandler)
+    // }
+    // removeListener(eventName, callBack) {
+    //     let listenerName = "vsys-on-" + eventName
+    //     vsysEventEmitter.removeListener(eventName, callBack)
+    // }
 }
 window.vsys = new vsys()

src/store/API.js

@@ -11,8 +11,20 @@ export default {
     },
     mutations: {
         updateAPI(state, object) {
+            let isChanged = JSON.stringify(state.chain) !== "{}" && state.chain.host_ip !== object.nodeUrl
             state.chain = new Blockchain(object.nodeUrl, object.networkByte)
             state.account = new Account(object.networkByte)
+            if (isChanged) {
+                chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+                    chrome.tabs.sendMessage(tabs[0].id, {
+                        notification: "chainChanged",
+                        data: {
+                            nodeUrl: object.nodeUrl,
+                            networkType: String.fromCharCode(object.networkByte)
+                        }
+                    });
+                });
+            }
         }
     }
 }

src/store/account.js

@@ -13,8 +13,14 @@ export default {
         addAccount(state, account) {
             state.accountNames.push(account)
         },
-        updateSelectedAccount(state, index) {
-            state.selectedAccount = index
+        updateSelectedAccount(state, newAccountInfo) {
+            state.selectedAccount = newAccountInfo.index
+            chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+                chrome.tabs.sendMessage(tabs[0].id, {
+                    notification: "accountsChanged",
+                    data: [newAccountInfo.address]
+                });
+            });
         },
         updateToken(state, tokenRecordsInfo) {
             if (String.fromCharCode(tokenRecordsInfo.networkByte) === 'M') {