Browser-based Blockchain Framework

With dynamic hooks and filters, blockstrap provides a deterministic, modular, open source HTML5 framework that runs entirely in the browser and can be easily extended with themes and plugins

Download View on github

Introduction

The Blockstrap framework is an open source component of the Blockstrap stack. It provides a front-end HTML5 interface for web-applications to communicate and manipulate blockchains and other dynamic data stores via external APIs.

With hooks and filters at its core it is the only wallet framework that allows for themes and plugins, and as such can be customized or extended to perform multiple functions. The framework has been developed with modularity and flexibility as the focal point of each technical decision.

Think of it as like ‘WordPress for blockchains’ - if you have the technical talent to create a WordPress plugin, you can now get started on your very own blockchain web-application.

The entire framework is essentially nothing more than a powerful jQuery plugin that runs entirely in your browser. Every line of code is listed and maintained via GitHub and we welcome contributions and bug fixes from the community.

Screenshot of default wallet theme

Why we never see a private key

At no point does Blockstrap ever see or store your private keys. We are a developer stack, not a bank!

We take security seriously and believe that the encryption offered by the blockchain is far safer than any other means of value storage - if you know what you’re doing. If you want to keep control of your private keys with a third party there are a number of other services available. By using Blockstrap you and you alone are responsible for generating your private keys and accessing your wallet.

Using a method of ‘deterministic algorithms’ and ‘compounding encryption’ we’re pleased to offer one of the safest wallets imaginable. So safe, that if you can’t recreate the steps of the setup process or fail to backup your device, your coins will never, ever interact with the blockchain again! Therefore access to your wallet is your responsibility and yours alone. While cryptocurrencies can be complicated, it’s vital to properly educate yourself on the risks to truly appreciate the benefits.

When creating your Blockstrap wallet your data goes through two processes known as 'hashing' and 'salting'. Every piece of memorable information you enter, such as your name, date of birth, city, etc. gets turned into corresponding hashes. For example a chunk of data such as 'Your Name' would become 73100c0f13. Any data you enter doesn't need to be factual, but it does need to be memorable.

Every time you enter a new chunk of new data a hash is generated, combined with the hash of the previous chunk of data, and then hashed again. A salt is an extra layer of encryption added for good measure. It's by creating a string of hashes to generate a device salt that keeps your wallet so secure. Only you can answer the questions that generate the hashes that creates your device salt that grants access to your wallet.


Wallet Theme

Powerful jQuery plugin & suite of JSON-driven front-end components

Open Source

Our code is community built with every line available to view via GitHub

Easily Extendible

Hooks and filters at core allow you to add your own themes and plugins

Implicitly Secure

Keys are hashed in the browser and never leave your local storage

Customizable

Easily change the look and feel of your wallet with a few custom lines of CSS & HTML

Web-based

Built in HTML5 our framework works on anything with a browser - including mobile and tablets

Compounding Encryption

Use deterministic hashes to make your wallet as secure or as simple as you need it to be

Multiple Chains

Framework fully supports Bitcoin, Litecoin, Dogecoin, DashPay & their respective testnets

Getting Started

You should first download the framework. We also have a growing selection of SDKs to choose from.

To start the default wallet theme simply open the root folder from the server that is serving the files you just downloaded. Upon further investigation, you will see that all you need to do is include blockstrap core within the header of your HTML and have the default HTML element in the body waiting as follows:

<head>
    <script src="blockstrap/js/blockstrap.js"></script>
</head>
<body>
    <div id="blockstrap"></div>
</body>

The default application will be initiated automatically thanks to the blockstrap ID within the main document. It's that simple!


Manual Initiation

You can manually initiate the plugin while adding additional options as follows:

<head>
    <script src="blockstrap/js/blockstrap.js"></script>
</head>
<body>
    <div id="your-application"></div>
</body>
<script>
$(document).ready(function()
{
    $('#your-application').blockstrap({
        less: true
    });
});
</script>

This same configuration could also be achieved with:

<head>
    <script src="blockstrap/js/blockstrap.js"></script>
</head>
<body>
    <div id="blockstrap" data-less="true"></div>
</body>

In both cases, LESS.css would be activated as all options can be provided via JavaScript or HTML5 data attributes.


Modules

This then provides access to core from where you can pick and choose from a host of modules. To learn more about a particular module, please visit the relevant documentation below:

Example JavaScript Source: (get information for a Bitcoin address)

var api = $.fn.blockstrap.api;
api.address('1121cQLqCsDsLPAkJW5ddTCREZ7Bp4ufrk', ‘btc’, function(results)
{
    // Your callback
    console.log(results)
});                             
            

Expected JSON Results:

{
    address: “1121cQLqCsDsLPAkJW5ddTCREZ7Bp4ufrk”,
    balance: 0,
    currency: “btc”,
    hash: “0030ececbad05ffcdff89f3f26e38ca3d735a8de”,
    received: 5000000000,
    tx_count: 2
}                               
            

Example JavaScript Source: (manually generate and relay raw transaction to self with data encoded)

var api = $.fn.blockstrap.api;
var blockchains = $.fn.blockstrap.blockchains;
var blockchain = 'btc';
var data = 'Testing Data Encoding';
var keys = blockchains.keys('SECRET_SALTED_HASH', blockchain);
var change_address = keys.pub;
var address_to_send_tx_too = 'OPTIONAL_ADDRESS';
if(!address_to_send_tx_too) address_to_send_tx_too = keys.pub;
api.unspents(keys.pub, blockchain, function(unspents)
{
    if($.isArray(unspents) && blockstrap_functions.array_length(unspents) > 0)
    {
        var total = 0;
        var inputs = [];
        var fee = $.fn.blockstrap.settings.blockchains[blockchain].fee;
        $.each(unspents, function(k, unspent)
        {
            inputs.push({
                txid: unspent.txid,
                n: unspent.index,
                script: unspent.script,
                value: unspent.value,
            });
            total = total + unspent.value
        });
        var outputs = [{
            address: address_to_send_tx_too,
            value: total - fee
        }];
        var amount_to_send_back = total - fee;
        var raw_tx = blockchains.raw(
            keys.pub,
            keys.priv,
            inputs,
            outputs,
            fee,
            amount_to_send,
            data
        );
        api.relay(raw_tx, blockchain, function(results)
        {
            // Your callback
            console.log(results);
        });
    }
});

Expected JSON Results:

{
    txid: 57068f4ffba9f08308ef2c2728f425233a68c11199e872336232d2a08e6a4e8f
}                               
            

Looking up that transaction via an API should result in seeing outputs similar to the following:

outputs: [
    {
        pos: 0,
        script_pub_key: "76A9145EBC3C0FF4955F96E3F4940B0749CCEAA1E5186888AC",
        pubkey_hash: "5EBC3C0FF4955F96E3F4940B0749CCEAA1E51868"
    },
    {
        pos: 1,
        script_pub_key: "6A4C4F7B226E223A224D61726B20536D616C6C6579222C227077223A22333736643762626261386266386563613736333235623135316164623739666135343730643635653364333465383132373837227D",
        pubkey_hash: null
    }
]

Please notice the script_pub_key on line 09. When decoded, it reads:

OP_RETURN 7b226e223a224d61726b20536d616c6c6579222c227077223a22333736643762626261386266386563613736333235623135316164623739666135343730643635653364333465383132373837227d

When the hex value following the op_return is decoded you will find your encoded message.

Please note there is a 40 to 80 bytes limit on data depending on the blockchain used.

For more examples please visit http://docs.blockstrap.com/en/framework/examples/.

Below is a demonstration of the Blockstrap wallet framework beggining at the setup process. We ask you read our beta disclaimer before getting started.

Any information you enter is only ever stored in your browsers LocalStorage. Please clear your cache or or press the RESET button to refresh the demo.


Skip to toolbar