hybrix Feature Friday | August 6th
Every week we highlight a hybrix feature. This week we dive into: 99 Lines of Code
A Multi Ledger Wallet in 99 Lines
Using hybrix, you can build a single webpage to manage over 400 different crypto currencies with just 99 lines of HTML, CSS and Javascript. It helps if you’re familiar with these, but even if you are a beginner we will guide you through it step by step.
Hybrix is a powerful platform allowing you to host your own wallet, to be your own bank and have a powerful multi- blockchain system at your fingertips. And you can build just about anything with it in terms of digital finance.
We start by creating a basic HTML page and add an appropriate title.
<html>
<head>
<title>my multi ledger wallet | hybrix</title>Next we include the hybrix javascript library for web applications.
<script src="https://api.hybrix.io/s/resources/hybrix-lib.web.js"></script>This Javascript library can be used to connect software to leverage the capabilities of the hybrix platform. It serves two purposes: first to facilitate the logistics of interfacing with the hybrixd API, and secondly to handle all client-side operations securely and privately. This ensures that keys required for transactions never leave the user’s device and communication happens over an encrypted channel.
For detailed documentation please visit our hybrix-jslib documentation.
Now let’s dive into the coding part. For the purpose of this example we will include the script and CSS definitions in the header as well using the <script> respectively <style> tags.
We prepare a variable hybrix in which we will load the hybrix interface. This is done using our onLoad function. It creates a new hybrix interface and uses that interface to create a connection to the host: https://api.hybrix.io.
<script>
let hybrix; function onLoad(){
hybrix = new Hybrix.Interface();
hybrix.addHost({host:'https://api.hybrix.io'},()=>{},onError);
}
Every method of the hybrix interface accepts four parameters: data, onSuccess, onError and onProgress. The first is used to pass parameters and options to the function. The last three are callback functions: onSuccess is called once when the method has finished successfully. onError is called once when an error is encountered. onProgress is called whenever a progress update is available.
We define some functions to provide feedback to the user:
function displayMessage(text, color = 'inherit'){
document.getElementById('message').style.color = color;
document.getElementById('message').innerHTML = text;
}function onError(error){
displayMessage('Error: ' + error, 'red');
}function onProgress(progress){
displayMessage('Busy'+('.'.repeat(progress*20))); // render dots...
}
To create a session we pass the username and password to the hybrix.session method. If it succeeds it will continue with the afterLogin function, onError otherwise.
function doLogin(){
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
hybrix.session({username, password}, afterLogin, onError, onProgress);
}
If the login was successful we’ll display a message to the user, hide the login window and retrieve a list of available assets from the host. The hybrix.rout method is used to do a direct API call to the host.
function afterLogin(){
displayMessage('Log in succesfull!');
document.getElementById('login').style.display = "none";
hybrix.rout({query:'/list/asset/names'}, listAssets, onError);
}This will return a list of asset names by their symbol. We will transform those into options for an HTML SELECT element as follows from: {"btc":"Bitcoin",…} to [[“btc","Bitcoin"],…] to '<option value="btc">Bitcoin (btc)</option>…'. and display the asset user interface:
function listAssets(assetNamesBySymbol){
document.getElementById('symbols').innerHTML = `<option disabled>Choose your asset</option>`
+ Object.entries(assetNamesBySymbol).map(([symbol,name]) => `<option value="${symbol}">${name} (${symbol})</option>`);
document.getElementById('asset').style.display = "block";
}If a symbol is selected the hybrix.refreshAsset method is used to retrieve the wallet details for the selected asset. The symbol is retrieved from SELECT element and until the refreshing is done the send interface is hidden.
function selectSymbol(){
const symbol = document.getElementById('symbols').value;
document.getElementById('send').style.display = "none";
hybrix.refreshAsset({symbol}, refreshAsset, onError, onProgress);
}The asset data that is received will contain, amongst other things, the address and the balance. For example: {"btc": {"address" : "1EgAef288oE9pjiYJJKTauc5hjgbabjT1L","balance" : "0.00000000",…}}
We clear the message screen, display the address and balance in the info element and display the send interface.
function refreshAsset(data){
displayMessage('');
const asset = Object.values(data)[0];
document.getElementById('info').innerHTML = asset.address + '<br/>' + asset.balance + ' ' + asset.symbol.toUpperCase();
document.getElementById('send').style.display="block";
}
When the send button is clicked the symbol is retrieved from the SELECT element target and the address and amount are retrieved from their corresponding INPUT elements. The hybrix.transaction method will execute the transaction and call the completeTransaction function when successful.
function send(){
const symbol = document.getElementById('symbols').value;
const target = document.getElementById('target').value;
const amount = document.getElementById('amount').value;
hybrix.transaction({symbol,target,amount}, completeTransaction, onError, onProgress);
}The completeTransaction function wraps up our code section. It will show a simple message with the transaction id of the transaction that was constructed, signed and pushed to the network.
function completeTransaction(transactionId){
displayMessage ('Success! Transaction send. The transaction id is: ' + transactionId);
} </script>A bit of CSS to do some styling. This can be omitted for a raw HTML look or tweaked to your own liking.
<style>
body {background-image: linear-gradient(to bottom right,grey,#666);font-family: sans-serif;}
#main {display:table; margin: 0 auto; margin-top:100px;background-color:white; padding: 10px; border-radius:10px;}
input {display:block; margin:5px; width:90%; background-color:#EEE; border-radius:5px; border-style:none;padding:5px;}
input[type=submit] {background-color:lightblue;}
#asset, #send {display:none;}
#info {text-align:center; margin:10px; line-height:1.5;}
img {width:100px;display:table;margin: 20px auto 0;}
</style>
</head>All that remains is the HTML code to define the user interface. A wrapper main containing the login and asset user interfaces.
<body onload="onLoad()">
<div id="main">
<div id="message"></div>
<div id="login">
<input placeholder="username" id="username" type="username"/>
<input placeholder="password" id="password" type="password"/>
<input type="submit" value="Sign in" onclick="doLogin()"/>
</div>
<div id="asset">
<select id="symbols" onchange="selectSymbol()"></select>
<div id="info"></div>
<div id="send">
<input placeholder="Address to send to" id="target"/>
<input placeholder="Amount to send" id="amount"/>
<input type="submit" value="Send" onclick="send()"/>
</div>
</div>
<a href="https://hybrix.io">
<img alt="powered by hybrix" src="https://api.hybrix.io/s/resources/powered-by-hybrix.svg"/>
</a>
</div>
</body>
</html>Creating a set of keys is not included in this example. You can use wallet.hybrix.io to create them or use the test “credentials” DUMMYDUMMYDUMMY0 (for both user and password).
Further reading
We hope your found this manual useful to making your own applications built on hybrix. More documentation is available at: https://api.hybrix.io/help/introduction
