From 1070e2334ac25df614bf8b38110e80ccfc6cb9a0 Mon Sep 17 00:00:00 2001 From: "Shane (Sosho) Chang" Date: Fri, 14 Sep 2018 17:20:49 -0700 Subject: [PATCH] update readme formatting (#156) * update readme formatting * update inpageAcct when acct balance changes too --- README.md | 61 +++++++++++++------ .../controllers/accountController.ts | 12 ++++ 2 files changed, 54 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 9692b6df..b08a1942 100644 --- a/README.md +++ b/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 diff --git a/src/background/controllers/accountController.ts b/src/background/controllers/accountController.ts index 99795b71..9049ec24 100644 --- a/src/background/controllers/accountController.ts +++ b/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 }); }