Web3

Enhancing React Native projects for Ledger

Services Provided

Engineering

Specialisms

Platforms

The Challenge

Ledger is known for overseeing digital assets, offering seamless avenues to buy, sell, and trade crypto. 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.

The Client

Ledger provides security and infrastructure solutions to critical digital assets for consumers and institutional investors.

Client’s Goal

Ledger aimed for web compatibility, allowing their secure wallet and services to integrate into decentralized apps (dApps). They wanted their buying, selling, and trading crypto services available across the web, accessible on any device and OS.

The 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.

The Deliverables

The 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.

‍