update readme formatting (#156)

* update readme formatting
* update inpageAcct when acct balance changes too

README.md

@@ -3,17 +3,54 @@
 ## Get Qrypto
 Chome Web Store: https://chrome.google.com/webstore/detail/qrypto/hdmjdgjbehedbnjmljikggbmmbnbmlnd
 
-## Connecting Qrypto to your Web Dapp
-Connect to qrypto by calling 
-window.postMessage({ message: { type: 'CONNECT_QRYPTO' }}, '*')
+## Web Dapp Usage
 
-This will populate the window.qrypto.account object in your webpage.
+Your dapp can use Qrypto to get information about a user's account status (whether they are logged into Qrypto, their account address, and balance). Qrypto also enables your dapp to listen to a window event for any changes to the user's account status.
+Your dapp can also use qrypto to make callcontract and sendtocontract calls to the blockchain. 
+
+### Connecting Qrypto
+To receive information about a user's account status, your dapp will first need to initiate a long-lived connection between Qrypto's content script and background script.
+The code to do this is already in Qrypto, your dapp just needs to trigger the function by posting a window message.
+`window.postMessage({ message: { type: 'CONNECT_QRYPTO' }}, '*')`
+
+This will populate the `window.qrypto.account` object in your webpage. The values are automatically updated when a user logs in/out or the account balance changes.
+
+```
+// window.qrypto.account
+{ 
+	loggedIn: true, 
+	name: "2", 
+	network: "TestNet", 
+	address: "qJHp6dUSmDShpEEMmwxqHPo7sFSdydSkPM", 
+	balance: 49.10998413 
+}
+```
+
+
+### Qrypto User Account Status - Login/Logout
+After connecting Qrypto to your dapp, you can use an event listener to get notified of any changes to the user's account status(logging in/out, change in account balance).
+
+```
+function qryptoAcctChanged(event) {
+  if (event.data.message && event.data.message.type == "ACCOUNT_CHANGED") {
+  	if (event.data.message.payload.error){
+  		// handle error
+  	}
+    console.log("account:", event.data.message.payload.account)
+  }
+}
+window.addEventListener('message', qryptoAcctChanged, false);
+```
+
+Note that `window.qrypto.account` will still get updated even if you don't set up this event listener; your Dapp just won't be notified of the changes.
+
+### Using QryptoProvider
 
 RPC calls can be directly made via `QryptoProvider` which is injected into every webpage if you have Qrypto installed and running.
 
 **Make sure that `window.qrypto.rpcProvider` is defined before using it.**
 
-### Using QryptoProvider
+
 ```
 // callcontract
 const contractAddress = 'a6dd0b0399dc6162cedde85ed50c6fa4a0dd44f1';
@@ -57,20 +94,6 @@ function handleMessage(message) {
 window.addEventListener('message', handleMessage, false);
 ```
 
-### Qrypto User Account Status - Login/Logout
-After connecting qrypto to your dapp, you can use an event listener to get notified when a user has logged in or out of Qrypto.
-
-function qryptoAcctChanged(event){
-  if (event.data.message && event.data.message.type == "ACCOUNT_CHANGED" && !event.data.message.payload.error) {
-    console.log("account:", event.data.message.payload.account)
-    // account: InpageAccount { loggedIn: true, name: "2", network: "TestNet", address: "qJHp6dUSmDShpEEMmwxqHPo7sFSdydSkPM", balance: 49.10998413 }
-  }
-}
-window.addEventListener('message', qryptoAcctChanged, false);
-
-You can also access the account details from window.qrypto.account
-// InpageAccount { loggedIn: true, name: "myAcct", network: "TestNet", address: "qJHp6dUSmDShpEEMmwxqHPo7sFSdydSkPM", balance: 49.10998413 }
-
 ### Using Qweb3
 You may also use our Qweb3 convenience library to make `sendtocontract` or `callcontract` calls. See the instructions in the Github repo here: https://github.com/bodhiproject/qweb3.js
 

src/background/controllers/accountController.ts

@@ -339,7 +339,19 @@ export default class AccountController extends IController {
       return;
     }
 
+    let existingBalance;
+    if (this.loggedInAccount.wallet.info) {
+      existingBalance = this.loggedInAccount.wallet.info!.balance;
+    }
+
     await this.loggedInAccount.wallet.getInfo();
+    const newBalance = this.loggedInAccount.wallet.info!.balance;
+
+    // if the balance has changed, update the inpageAcct for all windows
+    if (existingBalance !== newBalance) {
+      this.main.inpageAccount.sendInpageAccountAllPorts();
+    }
+
     chrome.runtime.sendMessage({ type: MESSAGE_TYPE.GET_WALLET_INFO_RETURN, info: this.loggedInAccount.wallet.info });
   }