Building Hedera web apps with Composer and Hash.js
Oct 21, 2019
by Pablo Peillard
Co-founder, Hashing Systems

Hashing Systems is a development studio focused on helping the Hedera ecosystem. We're excited to share more details about our newest release – Composer.

Those familiar may know that, historically, Hedera development has been largely Java-based. Now, with our open source Composer browser extension and JavaScript libraries, web and distributed ledger developers alike can have familiar experiences that they already know and love.

Composer

Composer is Hashing System’s browser extension, currently available for Google Chrome (Firefox support coming soon). Composer lets you build and quickly test on your Hedera-based applications without leaving your browser, removing friction and providing a drastically improved developer experience. This should be a very familiar experience for Ethereum developers and help make development on Hedera faster and easier.

r57FSZ-_EaHdeWMyf0a35YSBeSU6swrGV5SdQ9rDMmthyc4nMyh9bAuuwG0hqU6CNNzA4KPll9yN8Z0ewu4xAZOeNjWpPvivIpFXt439aOozAv9e6naaY3NIYOuv9cbApc2SoK1Z

Composer can now be used alongside the Hash.js and Assist.js frameworks, in order to act as a bridge between your user’s browsers and the Hedera network.

Hedera Wallet -> Hash.js -> Composer Extension -> Hedera

SXcGz82jgBGS2wnrmBKYotJTIqyCmTX5DLIheIOIfKd6dv9b5gmeIicSX-vIzOdSiLsqnJh-BZZn2GV8Oz1DCv2av-IYndnhkxNeX6r3uAOigPkC6WCKH5dHFw1LQAanxTAnF2ba

The new Hedera development stack

Supporting JavaScript libraries

Hash.js and Assist.js are JavaScript libraries that provide basic boilerplate functionality that many will need when developing for web3 on Hedera. Such functionalities include checking for a valid browser extension or active Hedera account ID with funds to spend.

It was intended to provide JavaScript environments to the Hedera API interface, currently supporting Cryptocurrency and Smart Contract services. We’ve also provided this to the community here, via CDN for those who wish to use it within their applications. If you don’t include hash.js in your project, Composer will inject it for you (if the user has it installed).

Hash.js

From our experience, there are very common, yet subtle differences for developers that are migrating from other ecosystems, and we’ve tried to abstract most of this away with these libraries. In doing so, we’ve provided some very simple, yet core functionality we think that developers will all find beneficial - such as sending cryptocurrency, or triggering smart contracts. For instance, most developers will need to ensure smart contracts utilize a valid HEX encoded ID format, and will additionally need to check users hbar balances ensure they have funds to cover a transaction.

Here are some basic examples of commonly used functionality provided in these libraries:

enable() - this allows websites to view the current account and enable triggers.

triggerSmartContract() - creates and sign transactions

triggerCheckBalance() - allows you to make hbar transactions.

ethAddressToAccountId(string) - converts from Solidity addresses to Hedera Account IDs

accountIdToEthAddress(string) - converts from Hedera Account IDs to Solidity addresses

triggerCheckBalance(string optional) - if no string added, returns current account

Assist.js

Another common problem we’ve experienced is onboarding users through using their browser extensions with a website. This is where Assist.js comes in - a JavaScript library, which reduces friction and increases development speed by providing boilerplates. In doing so, it enables developers to more easily onboard and walk users through transactions by utilizing Composer’s modals and notifications. Assist.js also facilitates communications with users through standard and familiar user interfaces, e.g. notifying them of their transaction status.

Again we’ve provided this via CDN for anyone who wishes to easily be able to use it in their applications. We’ll cover this library in future articles.

A look at using Composer

To give a sense of how this process will work for end users, setting up the mobile Hedera Wallet is how they can begin to interact with the platform. Remember though: your keys, your money.

FNcfLWcqpu9YEAjTU424eg79Duqa2sTlh5vVb2mfQomxeWhCjnaHeXbZeeB6jk9dB3aAeIAk9Yi73ZGMz0q1rWn22vp5fetfnDKzqDXUn_hUHGH3FUBKT2XNU-0ZMOzvhMRQ3335

To begin, users will have to transfer their keys by typing out your mnemonics (often a 22 or 24 word phrase) or pasting your account’s private key into the extension. It’s also worth noting that this currently doesn’t work with Java SDK-generated private keys yet, so you’ll have to use the Hedera Wallet or other HBAR-compatible mobile wallets.

LwTTApvOJOzGCzVhNAJy8cb4SVJGrhsenrXP_8wg-_gf3OC_SSrGZMQ5ZRZmjKZQ_D5UXrpoAUYVqw6wxUoWJyU7KweXIX61x-AlfeNTB-fBd6J_1qfnynU2-70O8BVwVK1-jJ8U

The extension will then safely encrypt your keys on your computer only and allow dapps to request transactions.

From a developer’s perspective, Hash.js makes this an easy process by providing standardized messaging functionality for the chrome extension. All that a developer really needs to do is instantiate `window.hash` and begin to make calls, which will then prompt the user to sign.

8Dxmc3q2BLYK62cZg3Z6LegwM8m-EXFcIL0T0njKXjB7nw7_A_tIiwz4_0cI0TXrgWKreJlnxVc-7vZsa97S3fpHSXWzjSv-m81OpAtFiGoHrrJRe62s7XaXEzheoJD3M0wWp8Dh

So what’s next?

Composer is just getting started, and we have created many open source demos for developers to use. However, we think that the toolkit provided and the ease of integrating into your existing web applications make this stack a no-brainer for developing on Hedera.

All in all, we feel like we have added a lot of much needed functionality to the community, but ultimately we need you to test it. We’ve tried many open source contracts, e.g. CryptoKitties, ForkDelta, etc., but realize the possibilities are endless.

Want to create new kitties? Want to transfer some tokens? You can today with Composer. Let us know what you think on twitter @hashingsystems! If you want to work with our team email us, [email protected] or our company chat found on hashingsystems.com!

Stay tuned for the next few weeks when we’ll make the smart contract deployments easier than ever.