Introduction

Considering the lack of standardisation for adding native bitcoin support into browsers, it comes as now surprised that there are initiatives trying to overcome this problem through extensions. In this tutorial, we will be exploring a promising web browser extension built using a set of open source libraries by a team called Liquality. This extension has some exciting features which simplify adding bitcoin support into any existing web applications or sites.

Preparation

There is currently a version of the wallet available from the google chrome store. Developers might however prefer to download and build the wallet from source though as follows.

1. Clone the wallet source code

git clone https://github.com/liquality/wallet
cd wallet
npm install

2. Build the wallet

npm run build

We can now enable the extension through chrome.

1. Open a chromium compatible browser
2. Select "Window" > "Extensions" or visit chrome://extensions/
3. Ensure you have the "Developer mode" option toggled on
4. Select the "Load unpacked" option
5. Browser to the extension folder and select "dist"

You should now have a copy of the liquality wallet installed. You can access it via the browsers extension tabs.

Next, we need to initialise the wallet.

1. Open the extension
2. Accept the Terms and Conditions
3. Select "Create a new wallet"
4. Provide a password
5. Select Continue

Important: Make sure to backup your mnemonic.

Next, I'd suggest toggling the wallet to testnet for the purposes of this tutorial. The wallet itself has a fully functional user interface, but we'll be exploring the plumbing from the console for the rest of this tutorial.

Enabling wallet for a domain

Before we can invoke any calls with the wallet, we need to request access from the domain. The liquality wallet is currently restricted to working from https://liquality.io and its sub domains. You can remove this restriction by editing the manifest file.

      "matches": [
        "*://*/*"
      ],

We'll however be accessing the rest of the tutorial from their domain here.

1. Visit https://cross-chain-apps.liquality.io/
2. Open the developer console
3. Execute the following

window.providerManager.enable()

On selecting allow, we have authorised the domain to invoke functions from the wallet. Next we will get an unused address from the wallet.

Getting a new Bitcoin address

Before we can continue, we will need to retrieve the bitcoin wallet provider from the wallet API.

var bitcoin = window.providerManager.getProviderFor("BTC")

Now we can invoke any of the permitted methods. The one for retrieving an unused address is wallet.getUnusedAddress.

bitcoin.getMethod('wallet.getUnusedAddress')().then((address) => console.log(address.address))

Sending a Bitcoin transaction

Before we can send bitcoin, we'll need to get some testnet coins. Do so by using the address from the previous step from any testnet bitcoin faucet. Here is one which seems to work at the time of writing this tutorial.

https://testnet-faucet.mempool.co/

You can confirm your balance as follows. Be sure to replace the address here with the one you retrieved before.

await bitcoin.getMethod('chain.getBalance')('tb1qur3wpy6p54kc89arzz29lltrkxmedsgdy8efcj')

We can now send this bitcoin back to the faucet.

await bitcoin.getMethod('chain.sendTransaction')('mkHS9ne12qx9pS9VojpwU5xtRd4T7X7ZUt',990000)

Here we can see the transaction on the blockstream testnet explorer.

https://blockstream.info/testnet/tx/eac97f52eb1e3e557046bb9d31ceaefcee00bbdb3c933e9963f4a236d5375214

Conclusion

The tutorial is a very simple demonstration of some of the simple things you can do with the liquality bitcoin wallet. The wallet has been built as an application using their very own chain abstraction library http://chainstackjs.org. For more information on how to get involved visit their github repository or engage with them on telegram.