Building Cryptocurrency Agnostic Components in My-Wallet-V3 and My-Wallet-V3-Frontend

At Blockchain, we’re striving to write reusable, extendable, and flexible code. This practice has become even more important with the recent addition of Bitcoin Cash and ether to our wallet application. For our users, adhering to writing agnostic components makes project delivery speeds faster and more consistent. For our developers, it makes the code fun to work with and less buggy.

A few months ago, we added ether to the Blockchain wallet along with a crypto-to-crypto exchange integration. This feature was the first we’ve built that supports multiple cryptocurrencies (instead of just bitcoin to fiat or vice versa). In our efforts to build reusable, extendable, and flexible code we built it to support any digital currency our wallet currently offers or will offer in the future.

The components that make up our exchange integration are completely agnostic to the currencies the user wishes to shift. Any digital currency can be plugged into the integration as long as it’s “API” in the My-Wallet-V3 core supports a few basic functions. Let’s walk through how this works a little bit.

When the wallet initializes the exchange checkout process it passes the destination and origin wallets to the shift-create component from the shapeShiftCheckout controller:

My-Wallet-V3-Frontend/assets/js/controllers/shapeshift/shapeShiftCheckout.controller.js

...
this.wallets = Wallet.accounts().concat(Ethereum.defaultAccount);
...

And in My-Wallet-V3-Frontend/app/partials/shapeshift/checkout.pug

...
shift-create(wallets="vm.wallets")
...

Note: There are more attributes passed to the shift-create component, but for simplicity I’ve removed them.

The line in shapeShiftCheckout.controller.js (`this.wallets = Wallet.accounts().concat(Ethereum.defaultAccount);`) was for shifting between bitcoin and ether when we initially launched the ether integration. What it does is concatenate all the bitcoin wallets in your Blockchain wallet with the ether default wallet. In checkout.pug, we tell shift-create to load these wallets as possible origins and destinations in an exchange.

A few months later, we added full support of Bitcoin Cash to our wallet. We wanted to give users the ability to exchange their Bitcoin Cash to and from bitcoin and ether. Here is the commit that added Bitcoin Cash to our exchange integration: https://github.com/blockchain/My-Wallet-V3-Frontend/commit/0c44b5bca7951a9a298d5599d5fd872b0eff5de5.

-this.wallets = Wallet.accounts().concat(Ethereum.defaultAccount);
+this.wallets = Wallet.accounts().concat(Ethereum.defaultAccount).concat(MyWallet.wallet.bch.accounts);

Adding Bitcoin Cash was as easy as changing one line of code because we built cryptocurrency agnostic components for exchanging bitcoin <-> ether from the beginning.

If you check the shift-create component where the wallets are passed, you won’t find any reference towards a specific cryptocurrency itself: (https://github.com/blockchain/My-Wallet-V3-Frontend/blob/master/assets/js/components/shapeshift/shift-create.component.js). You’ll only see functions called on the wallets that the API in My-Wallet-V3 core requires them to have.

  1. `getAvailableBalance` -> How the component calculates the total amount the outgoing wallet has available to send/exchange. Below are the functions for each cryptocurrency:
    1. bitcoin: https://github.com/blockchain/My-Wallet-V3/blob/master/src/hd-account.js#L311
    2. ether: https://github.com/blockchain/My-Wallet-V3/blob/master/src/eth/eth-account.js#L138
    3. Bitcoin Cash: https://github.com/blockchain/My-Wallet-V3/blob/master/src/bch/bch-account.js#L68
  2. coinCode -> The wallet’s coinCode to be used later in the cryptoCurrencyMap.
    1. bitcoin: ‘btc’
    2. ether: ‘eth’
    3. Bitcoin Cash: ‘bch’
  3. Balance -> Used to check for balance updates in the wallet. If a user’s balance changes, the component calls getAvailableBalance.
  4. cryptoCurrencyMap -> Used to calculate conversions between each digital currency and their fiat values.

When everything comes together, the final result looks like this:

Screenshot of initial Blockchain exchange integration using agnostic components

Despite the ease of adding new currencies, we wanted to continue improving the exchange experience for our users.

In version 1 of our exchange integration, there was no loading state to tell users that the component was working on getting a quote. Under good network conditions requests like these can seem instantaneous and a loading state might even seem a little jarring. However, because of the high traffic on digital currency networks, requests can take up to 5 seconds to resolve. Bitcoin, ether, Bitcoin Cash, and other digital currencies are handling more transactions than they ever have before. Record high transaction volumes are leading to network congestion, in turn leading to slow loading times from services like ShapeShift.

Depending on how long a request took to make, it could look like the component was frozen or that something broke and no error was returned. In reality, a request was being made and we weren’t correctly indicating that to the user. We decided to add a loading state to the component as you can see in version 1 vs version 2 below.

GIF showing Blockchain's initial exchange integration using agnostic components with a loading screen
Version 2
GIF showing Blockchain's initial exchange integration using agnostic components without a loading screen
Version 1

 

 

 

 

 

 

 

Users were relieved to see an indication of the app working to get a quote after the launch of version 2. Our transaction volume increased by 10% the week after we rolled out these changes, ~30% over the 2 weeks after, and 75% over the following month. Seemingly small improvements like this make a big difference to users.

Building components that are resilient to cryptocurrency’s rapid growth and constant change is just one of the many ways we ensure our users are getting a best-in-class experience on our platform. We hope you’ve enjoyed learning a little more about our process and look forward to continuing to deliver new and innovative solutions in our effort to create an open, fair, and accessible financial future.

Sound exciting? Check out our open positions available to join our incredible UX development team.

An intro to bitcoin-focused web development: build your first web app

Careers in bitcoin development are all the rage right now, but it’s an unfortunate misconception that the chance of landing these opportunities are a hundred-to-one unless you’re on a first-name basis with industry pioneers like Nick Szabo or Adam Back. Today’s guest blogger, Kyle Honeycutt, is here to debunk these myths of exclusivity. He’ll also show you step-by-step how to create your very first bitcoin web app, and leaves you with extra resources so you can hone your new skills. Take it away, Kyle.

Read more “An intro to bitcoin-focused web development: build your first web app”

Using the Blockchain API to determine the time left until the next bitcoin block halving

Countdown clock image via Tony Webster/Wikimedia
Countdown clock image via Tony Webster/Wikimedia

Earlier this year, we did a featured spotlight on a bitcoin developer Kyle Honeycutt who does tutorials focused on helping explain how to build exciting new tools leveraging the Blockchain suite of services, including our API.

Kyle has impressed us again, by coming up with a novel way to calculate the amount of time left until the bitcoin block reward halving happens in real-time. For those unfamiliar with the bitcoin halving, here is a quick explanation pulled from our 10 commonly used bitcoin terms article.

Bitcoins have a finite supply, which makes them scarce. The total amount that will ever be issued is 21 million. The number of bitcoins generated per block is decreased 50% every four years. This is called “halving.” The final halving will take place in the year 2140.

If you’d like a deeper understanding of the bitcoin halving, you can read Block Reward Halving: A Guide written by Vitalik Buterin, who is the founder of Ethereum. There is also another more recent article which talks about the different aspects of the bitcoin halving which is a good read.

Read more “Using the Blockchain API to determine the time left until the next bitcoin block halving”

Blockchain API Developer Spotlight: Tim Su

timothysu1

The talent we encounter at hackathons always keeps us energized from one event to the next!

Our most recent hackathon we attended was Hack The Planet, which was designed by Major League Hacking as their finale to end the spring season of hacking. Coming in second place overall and claiming our prize for Best Bitcoin Hack was Tim Su, a developer and student from Northeastern University. Tim created Shuttlepay, an app that unites payment methods like bitcoin, Venmo and PayPal into one neat little app.

This developer spotlight goes into more detail about Tim’s future plans for Shuttlepay and his experience as a developer eager to build bitcoin-friendly software.

Read more “Blockchain API Developer Spotlight: Tim Su”