Tl;dr: The replatforming of Coinbase Pockets’s cell app displays our dedication to bettering entry to web3. On this weblog, we focus on why the transition to React Native marks a crucial turning level for each our customers and our technical groups.
By Chintan Turakhia, Director of Coinbase Pockets Engineering, and Dan Coffman, Coinbase Pockets React Native Lead
gm
This week, we introduced the debut of Coinbase Pockets’s new cell iOS and Android apps constructed utilizing React Native. This launch marks a crucial inflection level for Coinbase Pockets and its customers, and we’d wish to make clear the motivation and journey to get right here.
Our purpose with Coinbase Pockets is to be the default gateway to the web3 ecosystem. We debuted a cell app on iOS and Android in 2017 to make the advantages of crypto, self-custody, and the nascent dapp ecosystem accessible to all — no matter community or blockchain, nation or forex, crypto savvy or crypto newbie.
In 2021, we noticed an uptick in web3 engagement by way of desktop, pushed largely by NFTs and DeFi dapps. This led us to launch a Coinbase Pockets browser extension utilizing React, offering customers with the choice to interact with the crypto economic system on a desktop platform. This additionally gave our product, engineering, and design groups a possibility to thoroughly rethink how a self-custody product ought to appear and feel for energy customers in addition to newcomers to web3.
Launching the browser extension sadly meant that our engineering groups now wanted to code the identical options for 3 totally different platforms, since Pockets’s browser extension, iOS, and Android apps leveraged totally different codebases. And as a consequence, our delivery velocity on extension far exceeded our tempo on cell. We knew that this wasn’t a viable long run resolution to maintain up with the innovation in web3. So as to maximize effectivity of our builders and designers in addition to ship a persistently dependable, protected, and easy multi-chain pockets on all platforms, we would want emigrate our cell merchandise into a standard framework.
Enter React Native.
We embrace the mantra of construct as soon as and ship in all places. Replatforming Coinbase Pockets’s cell apps to React Native means we are able to extra simply ship new options to Pockets’s browser extension, iOS, and Android apps in tandem, streamlining workflows and permitting us to ship the identical nice consumer expertise throughout desktop and cell.
In 2020, the Coinbase app efficiently transitioned from native cell to React Native, a software program framework which permits us to ship the identical TypeScript code and React UI on each iOS and Android. Our purpose since then was easy: leverage these paved roads to ship a extremely performant cell app whereas affording customers a constant design expertise utilizing the Coinbase Design System (CDS). We had been in a position to shortly leverage paved roads together with react navigation, deeplinking, and configuration in code.
By unifying our Coinbase Pockets cell app and browser extension right into a single knowledge layer that handles all enterprise logic, we are able to proceed to ship merchandise shortly throughout three platforms. We moved away from class-based RxJS and shifted to practical context-based repos to allow better leverage of React core libraries. The extra problem was migrating the information layer whereas persevering with to construct and ship options on the Extension. Web3 pauses for no one, and so we fastidiously orchestrated the substitute of our total Pockets engine whereas nonetheless flying.
Pockets may even be capable to deliver new options to market in a fraction of the time. A current instance of that is our DeFi portfolio, which took two months to construct for the Pockets browser extension and solely 5 days to port to our new React Native cell app. The vast majority of advanced logic resided within the knowledge layer, and since these at the moment are shared between all platforms, we had been in a position to construct it as soon as and ship it to all platforms. Solely shopper UI for cell was remaining, and thankfully, with a standard CDS, porting UI components to cell was easy. Because of these kinds of efficiencies, we count on to see the speed at which Pockets launches new merchandise proceed to extend within the months to come back.
Not solely will customers profit from Pockets delivering options quicker, the cell expertise as an entire will probably be snappier, extra responsive, and extra dependable.
A number of of the options we launched over the previous yr had been constructed for the Pockets extension and have but to be launched to the Pockets cell app. With our migration to React Native, we’re launching now able to launch a number of nice options within the cell app for the primary time, together with help for storing, sending, and receiving Solana and SPL tokens, real-time value charts, an in-app dapp browser, token administration, and a DeFi portfolio view.
How do you port 110+ options on a brand new React Native tech stack, whereas including new performance to the prevailing Chrome Extension platform all of the whereas sustaining the prevailing Native cell product? The widespread knowledge layer was a power multiplier which enabled the workforce to maintain constructing options for extension which might seamlessly port to RN cell. We additionally prioritized characteristic parity of our current cell product whereas sustaining a excessive bar for high quality and efficiency via benchmarking.
The workforce constructed foundations for a scalable and extensible efficiency monitoring system to measure client-side efficiency of the brand new app, together with web page load, UI thread blocking time and app responsiveness for each commit. We optimized loading and display screen render instances utilizing a bespoke incremental rendering resolution, memoizing parts, and optimizing costly hook computations. We additionally shipped numerous enhancements to the information layer via batching state updates and optimizing caching methods, which benefited asset and NFT loading on each the brand new react native app and extension.
In case you’ve observed the brand new look-and-feel of the cell app, it displays far more than a recent coat of paint. Coinbase Pockets is now an integral a part of the Coinbase Design System.
Coinbase’s Design System is a strong structure of reusable design and movement parts constructed inside React. We’ve discovered that the CDS allows our product, engineering, and design groups to deal with constructing high-quality product experiences whereas guaranteeing a constant expertise for customers throughout Coinbase merchandise. Stunning design components, just like the motion-driven “heat welcome” that greets new customers, are only a small preview of how we’re offering a visually wealthy expertise for a worldwide viewers.
Since Coinbase Pockets’s browser extension was constructed utilizing this design system, desktop customers will now get pleasure from a extra constant expertise inside Pockets’s cell app. As an added bonus of this constant strategy, customers who’re conversant in Coinbase’s flagship app will instantly really feel at house in Coinbase Pockets’s new cell expertise.
One other thrilling results of this work is Pockets customers now have a possibility to personalize their cell expertise. Our analysis confirmed that customers want darkish mode, so the cell app will open in darkish mode by default. We’re additionally including the flexibility to pick out a theme colour for Coinbase Pockets, which might be chosen within the Settings tab.
The brand new Coinbase Pockets cell app started rolling out globally throughout iOS and Android this week, and we count on the rollout to be full over the subsequent few weeks. Make sure that your app is updated by visiting the App Retailer on iOS or Google Play on Android, and comply with @CoinbaseWallet on Twitter for the newest information and updates.
