Enhancing React Native Projects for Ledger

Ledger

Enhancing React Native Projects for Ledger

Services provided

Specialities involved

Services provided

Specialities involved

Project Challenge 

Ledger is known for overseeing digital assets, offering seamless avenues to buy, sell, and trade cryptocurrency. They recognised the need to embrace new technologies and turned to YLD for our expertise. We partnered and helped them elevate their existing React Native projects to align with their growth objectives and fuse practicality with innovation. Their overall ambition is to be web-compatible to allow their secure wallet interface and related services to be integrated into other decentralised apps (dApps). In addition, they also aim for their services, such as buying, selling, and trading crypto, to be independently available on the web, therefore on any device and OS. 

Our Approach

Ledger oversees a substantially centralised monorepo that is split into two primary super-apps: Desktop (Electron/React) and mobile apps (utilising React Native for iOS and Android).

Despite sharing some functions and components across the sub-repositories, there is significant duplication of logic, components, screens, navigation, and other elements in both desktop and mobile apps.

They wanted to disassemble this extensive monorepo, segregating business services into independent microservices wherever possible, all while preserving central common security features. The project also expanded across diverse niche products, all focused on React Native, as our teams consistently worked to enhance the end-user journey.

Serving web-app microservices through React Native enhances the user experience compared to a progressive web-app, offering a more native approach to leverage the frequent emergence of new features in React Native.

To optimise Ledger’s range of distinct products, we devised web-apps that function independently and seamlessly within a React Native app. This strategic approach facilitates independent and parallel work by multiple teams, streamlining processes and creating efficiencies.

Seamless Cross-platform Compatibility

Being a microservices architecture, with web views for each screen, it made sense to utilise React Native with a shared codebase. This allowed us to seamlessly cover web, desktop, and mobile environments with enhanced cross-platform compatibility.

React Native was already being used in Ledger’s codebase to achieve cross-platform compatibility across both iOS and Android mobile devices. This also allowed us to share JavaScript logic and React logic across both the desktop electron app and the mobile apps.

Building webviews allowed us to not only extend into the web but also enabled our teams to build independently deployable, secure, isolated services. These microservices are loosely coupled to the React Native super-app that allows the user to smoothly navigate between services within a single, secure application.

OTA (Over The Air) Updates

Our teams have utilised Expo's OTA updates to quickly respond to bugs and issues, as well as deliver new features rapidly and steadily. By using Expo’s OTA updates, all targets are updated simultaneously through CodePush, ensuring a seamless process without any mention of rollout bottlenecks that could impact the app store reviews.

Robust Ecosystem

Within the React Native ecosystem, we used Detox to end-to-end test the app. Our teams benefited from this approach by enhancing their E2E testing capabilities to validate diverse user flows while also “smoke testing”. In addition, we integrated Fastlane which enabled seamless OTA deployments to multiple environments and targets, through infrastructure as code. Finally, visual regression testing through automated screenshots reduced manual UI testing, highlighted the side effects of any new code on other screens and showed a preview of the changes before they were merged and deployed.

Efficiency in Cost and Time

With a common language for all environments, everything became very resource-efficient. The same features could be developed for web, and then deployed across all platforms, via web views in React Native and Electron. This meant that every engineer was able to contribute to all environments and that we could push new features and improvements live quickly.

Our Impact

Our approach unlocked efficiencies in cost and time, allowing engineers to contribute seamlessly across various environments. This streamlined development sped up new features and enhanced the app for users. Our efforts included:

  • Gradually released the new “Earn” dashboard for staking Ethereum and other currencies in return for financial rewards. This has made Ledger’s app more customer-centric which has increased engagement.
  • Delivering a unified user experience across desktop and mobile. Our teams released the mobile version of the “Earn” dashboard, which was possible through component adaptation and implementing responsive design.
  • Promoting synergy among diverse teams and products using React Native. This empowered Ledger’s teams to iterate and innovate rapidly.
  • Demonstrating efficiency by creating an initial web-app for staking using modern web technologies like Next.JS. This greenfield web-app utilised new, independent APIs and seamlessly integrated into both Electron and React Native apps. This showcased the ability to develop once, save developer time and costs, and release performant, native-feeling apps for both mobile and web.
  • The new apps follow an independent release process, allowing us to deploy fixes rapidly without relying on the App Store or Play Store. This enables more frequent delivery of new features and supports efficient, feature-driven development in smaller, service-focused, full-stack teams. We maintain a single source for core logic, common UI components, and secure key management API protocols between web and mobile.

Featured work


FYE

Empowering a US Retail Chain with React Native

Empowering a US Retail Chain with React Native

We partnered with a leading US retailer to create a custom internal tool, boosting efficiency and customer service.


Candy Illustration

Candy

Streamlined Marketplace for Digital Collectible Fans

Candy

Streamlined Marketplace for Digital Collectible Fans

YLD and Candy developed a cutting-edge platform, changing how fans and collectors engage with their favourite sports, music, art, and cultural icons.


CONDE

How Kubernetes and DevOps Streamlined Publishing for a Multibillion-Dollar Client

How Kubernetes and DevOps Streamlined Publishing for a Multibillion-Dollar Client

A global powerhouse in the publishing industry sought YLD's help to migrate several of their high-profile brand sites onto a single, scalable platform.

Find us

London - HQ

9 Dallington Street

London

EC1V 0LN

+44(0) 203 514 4678

hello@yld.io

Lisbon

Rua Ramalho Ortigão 8

3º Esquerdo

1070-230

Lisboa

Porto

Rua Sá da Bandeira 819

2º Esquerdo

4000-438

Porto