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:


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

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


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:

-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: ( 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:
    2. ether:
    3. Bitcoin Cash:
  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.

Meet our Team: November 2017

With less than two months left in 2017, we’re waiting (some more enthusiastically than others) for snow fort season to begin. In the meantime, we’ve kept a clear focus on enhancing our platform for our 18+ million users around the world. Here are some of the newer team members helping us do just that and then some.

Read more “Meet our Team: November 2017”

Meet our Team: May 2017

Can you believe it’s nearly summer already? Between the rising trends for global adoption and all the stellar price movement, 2017 has been a record-setting year so far for bitcoin. Joining us on this epic journey are three new Blockchain team members that we can’t wait for you to meet!

Read more “Meet our Team: May 2017”

Blockchain Internship Program 2017

At Blockchain, we’re committed to helping the next generation of bitcoin block chain-focused developers. Our Internship Program helps us make that commitment a reality.

Each year we welcome great young talents who impact Blockchain, and the bitcoin ecosystem as a whole, in significant and extremely meaningful ways. These interns are given significant responsibility from day 1. The work isn’t easy but it’s rewarded with mentorship and freedom, in equal parts. And that approach is why so many interns later return to Blockchain as valuable full-time members of our team.

Read more “Blockchain Internship Program 2017”

Meet our Interns: Summer 2016

For many, Labor Day is the sign of summer coming to an end. At Blockchain, we were hit with that reality last week when we said goodbye to (most of) our summer interns. These great young talents have, in the course of a couple of months, contributed to Blockchain and the bitcoin ecosystem as a whole in significant and extremely meaningful ways. Below, meet the folks who spent their summer helping us build. They could very well be the future of bitcoin.

Read more “Meet our Interns: Summer 2016”