In Blockchain, we are trying to write reusable, extensible and flexible code. This practice became even more important with recent addition of Bitcoin Cash and Ether to our portfolio application. For our users, adhering to writing agnostic components makes project delivery faster and more consistent. For our developers, the code is fun to use and less buggy.

A few months ago, we added ether to the Blockchain portfolio with a crypto-crypto integration. This feature was the first one we built that supports multiple cryptocurrencies (instead of just bitcoin to fiat or vice versa). As part of our efforts to create a reusable, extensible and flexible code, we have designed it to support any digital currency that our portfolio offers or will offer in the future.

The components that make up our trading integration are completely agnostic to the currencies that the user wishes to move. Any digital currency can be plugged into the integration as long as it's "API" in the kernel My-Wallet-V3 supports some basic functions. Let's see how it works a little.

When the wallet initiates the exchange extraction process, it forwards the portfolios of destination and origin to the SHIFT-CREATE component of 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 deleted them.

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

A few months later, we added the full support of Bitcoin Cash to our portfolio. We wanted to give users the opportunity to exchange their Bitcoin Cash against bitcoin and ether. Here is the commit that added Bitcoin Cash to our trading 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);

The addition of Bitcoin Cash was as simple as changing a line of code because we built cryptocurrency agnostic components to exchange the bitcoin ether from the beginning .

If you check the shift-create component where portfolios are passed, you will not find any reference to a specific cryptocurrency: https://github.com/blockchain/ My -Wallet-V3-Frontend / blob / master / assets / js / components / shapeshift / shift-create.component.js ). You will only see the functions called on the wallets that the API in the My-Wallet-V3 kernel asks them to have.

`getAvailableBalance` -> How the component calculates the total amount that the outgoing portfolio can send / exchange. Here are the functions for each cryptocurrency: Ether: https://github.com/blockchain/My-Wallet-V3/blob/master/src/eth/eth-account.js#L138 bitcoin: https://github.com/blockchain/My-Wallet-V3/blob/master/src/hd-account.js#L311[19459005Äù19459012] ]] Bitcoin Cash: https://github.com/blockchain/My-Wallet-V3/blob/master/src/bch/bch-account.js#L68 coinCode -> CoinCode of the wallet to use later in the cryptoCurrencyMap. Bitcoin: & btc & # 39; Ether: & # 39; eth & # 39; Bitcoin Cash: "bch & # 39; Balance -> Used to check for balance updates in the wallet. If the balance of a user changes, the component calls getAvailableBalance. cryptoCurrencyMap -> Used to calculate conversions between each digital currency and their fiat values.

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

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

In version 1 of our Exchange Integration, there was no state of loading to tell users that the component was working on getting a quote. In good network conditions, requests like these may seem instantaneous and a state of loading may even seem a little discordant. However, due to the high traffic on digital currency networks, requests can take up to 5 seconds to be resolved. Bitcoin, Ether, Bitcoin Cash and other digital currencies handle more transactions than ever before. High record transaction volumes lead to network congestion, resulting in slow loading times from services such as ShapeShift.

Depending on the duration of the request, the component could appear frozen or something broke and no error was returned. In reality, a request was made and we did not correctly indicate it to the user. We decided to add a load state to the component as you can see in version 1 compared to version 2 below.

<img class="wp-image-12998" src="https://businessdigit.com/wp-content/uploads/2018/01/construction-of-cryptocurrency-agnostic-components-in-my-wallet-v3-and-my-wallet-v3-frontend.gif" alt=" GIF showing Blockchain initial exchange integration using agnostic components with a loading screen "data-recalc-dims =" 1 "/>

<img class="wp-image-12997" src="https://businessdigit.com/wp-content/uploads/2018/01/1515428309_324_construction-of-cryptocurrency-agnostic-components-in-my-wallet-v3-and-my-wallet-v3-frontend.gif" alt=" Integration of initial blockchain exchange using agnostic components without a loading screen "data-recalc-dims =" 1 "/>

Users were relieved to see an indication of the application that works to get a quote after the launch of version 2. Our trading volume increased by 10% the week after the deployment of these changes. weeks later, and 75% in the following month. Apparently, small improvements like this make great difference for users.

The creation of resilient components with rapid growth of cryptocurrency and constant change is one of many ways to ensure our users an optimal experience on our platform. We hope you enjoyed learning more about our process and we look forward to continuing to offer new and innovative solutions in our efforts to create an open, fair and accessible financial future.

Its exciting? Discover our Available Positions Available to join our incredible UX development team.