UI/UX Guidelines

Introduction

These guidelines will help you to use existing UI/UX Flows for Ledger Live Desktop. In addition, it contains instructions to create new Flows, where existing ones are similar so that they can be used as a template. If you have any questions or comments please feel free to contact us on Discord.

Glossary

These terms are capitalized in the text below

Preliminary warning

Careful attention is required to verify and ensure code (Components) really need to be created. Keep in mind, any unnecessary duplication of code, will entail a tech debt, which means your code will take longer to be integrated by the Ledger teams.

Although the Ledger Live Desktop (LLD) and Ledger Live Mobile (LLM) code is similar, you cannot swap the code around. The code for LLD doesn’t work on LLM and vice versa.

A - Check if Ledger Live already has the Flow you need

If it does, there is nothing to do. You do not need to use those Components in your MyCoin code, the Ledger Live code will do what is necessary.

If it does not, follow step B.

B - Customization

1. Check if Live already supports the customization you need.

The list of Components that can already be customized is in the LLDCoinFamily type here (opens in a new tab). You can consider any Component from any Family Member. In the Existing code, identify the Component that are the closest to what you are going to develop.

When they are customisable, you can create your own Component, with the same name. By using the correct name, the Component will be created in the right place and it will override the standard Component. (If you delete your Component, the Standard Component will taken as default)

On running pnpm i, MyCoin will be added in apps/ledger-live-desktop/src/renderer/families/generated.ts if it doesn’t already exist (as an example, see Algorand (opens in a new tab)).

Therefore this list of Components is enriched over time with the different updates and changes of Ledger Live.

2. Create the folder structure in MyCoin

In /apps/ledger-live-desktop/src/renderer/families/MyCoin/

1. Create Index: follow the structure of other Index files you can find
2. Optionally create Types. If you have specific (Coin) type definitions put them here In each folder (of each coin), you’ll find code related to the UI of that coin only. For example, in the Polkadot family (opens in a new tab), there are many examples of UI custom Components:

• token bond (BondFlowModal),
• validator nomination (NominationFlowModal), These two Components are used in the Staking Flow of Polkadot

3. Follow with case 3a or 3b

3a - Ledger Live already supports the customization you need

You just need to write your custom Component. It must be in the set of Components listed in LLDCoinFamily. If it isn’t then goto Case 3b.

3b - Ledger Live does not support the customization you need

You also need to write your custom Component. But in this case, it is not in LLDCoinFamily. You need to declare it there by adding the definition of the type of the Component you want to Customize.

Then you need to integrate the custom Component at the right place in Ledger Live code. Add a Link to the common code, in the corresponding section. For example with apps/ledger-live-desktop/src/renderer/screens/account/AccountStakeBanner.tsx, find an appropriate place in renderer:

import { getLLDCoinFamily } from "~/renderer/families";
   const Comp = getLLDCoinFamily(account.currency.family)?.MyComponent;
   if (Comp) return <Comp account={account} />;
   return null;