How to integrate with dApps

1. How to get the Hydrawallet

In order to get the Hydrawallet extension, please visit the following link: https://chrome.google.com/webstore/detail/hydrawallet/polcbnennmbhbdoafiicjgccofalcncl to add it to the browser and see more details/photos with information about the extension.

2. How to use Hydrawallet with DApps

Your DApp can use Hydrawallet to get information about a user’s account status (whether they are logged in the Hydrawallet, their account address and balance). Hydrawallet also enables your DApp to listen to a window event for any changes to the user’s account status. Your DApp can also use Hydrawallet to make callcontract and sendtocontract calls to the blockchain.

A) Connecting Hydrawallet

To use any of the above functionality, your DApp will first need to initiate a long-lived connection between Hydrawallet’s content script and background script. The code to do this is already in Hydrawallet, your DApp just needs to trigger the function by posting a window message.

window.postMessage({ message: { type: 'CONNECT_HYDRAWALLET' }}, '*')

This will populate the window.hydrawallet object in your webpage. The indow.hydrawallet.account values are automatically updated when a user logs in/out or the account balance changes.

// window.hydrawallet
{
  rpcProvider: HydrawalletRPCProvider,
  account: {
  loggedIn: true,
  name: "2",
  network: "TestNet",
  address: "HJHp6dUSmDShpEEMmwxqHPo7sFSdydSkPM",
  balance: 49.10998413
  }
}

B) Refreshing your page when Hydrawallet is installed or updated

You will probably want to refresh your DApp webpage when Hydrawallet is installed or updated. This allows your DApp to rerun window.postMessage({ message: { type: 'CONNECT_HYDRAWALLET' }}, '*') which would have previously failed to do anything while Hydrawallet was not yet installed. When Hydrawallet is installed or updated it will send all existing tabs an event message. To have that event message refresh your DApp and add the following event listener.

function handleHydrawalletInstalledOrUpdated(event) {
  if (event.data.message && event.data.message.type === 'HYDRAWALLET_INSTALLED_OR_UPDATED') {
  // Refresh the page
  window.location.reload()
  }
}
window.addEventListener('message', handleHydrawalletInstalledOrUpdated, false);

C) Hydrawallet user account status – login/logout

After connecting Hydrawallet 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 handleHydrawalletAcctChanged(event) {
  if (event.data.message && event.data.message.type === "HYDRAWALLET_ACCOUNT_CHANGED") {
         if (event.data.message.payload.error){
                // handle error
         }
  console.log("account:", event.data.message.payload.account)
  }
}
window.addEventListener('message', handleHydrawalletAcctChanged, false);

Note that window.hydrawallet.account will still get updated even if you don’t set up this event listener. Your DApp just won’t be notified about the changes.

D) Using HydrawalletRPCProvider

RPC calls callcontract and sendtocontract can be directly made via HydrawalletRPCProvider which is available to any webpage that connects to Hydrawallet.

Make sure that window.hydrawallet.rpcProvider is defined before using it.

// callcontract
const contractAddress = 'a6dd0b0399dc6162cedde85ed50c6fa4a0dd44f1';
const data = '06fdde03';
window.hydrawallet.rpcProvider.rawCall(
  'callcontract',
  [contractAddress, data]
).then((res) => console.log(res));
 
// sendtocontract
const contractAddress = '49a941c5259e4e6ef9ac4a2a6716c1717ce0ffb6';
const data = 'd0821b0e0000000000000000000000000000000000000000000000000000000000000001';
const hydraAmt = 1; // optional. defaults to 0.
const gasLimit = 200000; // optional. defaults to 200000.
window.hydrawallet.rpcProvider.rawCall(
  'sendtocontract',
  [contractAddress, data, hydraAmt, gasLimit],
);
 
// Handle incoming messages
function handleMessage(message) {
  if (message.data.target == 'hydrawallet-inpage') {
  // result: object
  // error: string
  const { result, error } = message.data.message.payload;
 
  if (error) {
  if (error === 'Not logged in. Please log in to Hydrawallet first.') {
  // Show an alert dialog that the user needs to login first
  alert(error);
  } else {
  // Handle different error than not logged in...
  }
  return;
  }
 
  // Do something with the message result...
  }
}
window.addEventListener('message', handleMessage, false);

E) Using Hydraweb3

You may also use our Hydraweb3 convenience library to make sendtocontract or callcontract calls. See the instructions in the Github repo here: https://github.com/Hydra-Chain/hydraweb3-js