Merge pull request #295 from LedgerHQ/feat/new-earn-section

Feat/new earn section

pages/docs/ledger-live/exchange.mdx

@@ -49,6 +49,14 @@ To see if this integration is a good fit for your service, please get in touch w
     /> 
     <Image src={"/blockchain-cover.jpg"} />
   </Cards.Card>
+  <Cards.Card 
+    image
+    arrow
+    title="Earn Integration" 
+    href="/docs/exchange/earn">
+    /> 
+    <Image src={"/blockchain-cover.jpg"} />
+  </Cards.Card>
   <Cards.Card 
     image
     arrow

pages/docs/ledger-live/exchange/_meta.js

@@ -2,6 +2,7 @@ export default {
 	swap: "Swap Integration",
 	sell: "Sell Integration",
 	buy: "Buy Integration",
+	earn: "Earn Integration",
 	card: "Card Integration",
 	glossary: "Glossary"
 }

pages/docs/ledger-live/exchange/earn.mdx

@@ -0,0 +1,25 @@
+import "react-medium-image-zoom/dist/styles.css";
+import { Steps } from "nextra/components";
+import { Callout } from 'nextra/components'
+
+# What do we need
+
+Ledger Live users can stake their crypto assets to earn rewards.
+
+To integrate an application into Ledger Live that allows users to stake their assets, three key components are required:
+
+1. A **LiveApp**: a LiveApp is a web application loaded within Ledger Live that can interact with Ledger wallet devices (for instance, to sign a transaction) and access information from the connected Ledger wallet (such as the wallet address). 
+Your LiveApp provides a user interface that displays information, accepts user inputs, and communicates with your application's backend and smart contracts.
+2. A **plugin**: ensures that instead of signing raw and often unintelligible blockchain data (blind signing), the user will be provided with a clear, human-readable summary of the transaction details on his Ledger device (clear signing). 
+To integrate clear signing in your LiveApp, you must write a specific Ledger plugin that translates raw blockchain transaction data into understandable summaries, displaying it on the Ledger device itself. This step is required for your LiveApp to be integrated in Ledger Live.
+3. **Earn dashboard integration**: The Earn section in Ledger Live allows users to track their staking positions (APY, rewards, etc.). Users staking assets through your service must be able to view their positions in the Earn dashboard.
+
+<Callout type="info" emoji="ℹ️">
+Each component can be developed simultaneously. For example, you can work on your plugin even if your LiveApp isn't finished yet. However, all components must be fully developped (and tested) for your Earn application to be deployed to Ledger Live.
+</Callout>
+
+In the following pages, you will find:
+
+- [LiveApp](earn/liveapp): details on your LiveApp specifities.
+- [Plugin](earn/plugin): details on what a plugin is, and how to create your own.
+- [Earn Dashboard](earn/earn-dashboard): details on how to integrate your Staking services into the Ledger Live's Earn Dashboard.

pages/docs/ledger-live/exchange/earn/_meta.js

@@ -0,0 +1,5 @@
+export default {
+  'liveapp': "LiveApp",
+  'plugin': "Plugin",
+  'earn-dashboard': "Earn Dashboard"
+}

pages/docs/ledger-live/exchange/earn/earn-dashboard.mdx

@@ -0,0 +1,30 @@
+import { Callout } from 'nextra/components'
+
+# Earn dashboard integration
+
+The Earn section in Ledger Live allows users to track their staking positions. Users staking assets through Ledger Live must be able to view their positions for each account used for staking:
+<br />
+
+<img alt="Earn section screenshot" src="/exchange/screen-ledger-live-earn-dashboard.png" />
+
+To display such information, Ledger Live's backend needs to communicate with your service through standardised APIs.
+
+## Endpoints needed
+
+For each account used for staking, the Earn section in Ledger Live provides users with the following information:
+- **The staked amount**: total staked assets in the account.
+- **The rewards %**: can be APY or APR, depending on the assets and the blockchain.
+- **Rewards earned**: total reward earned to date. Includes any rewards that were claimed.
+
+These information must be accessible through your API.
+Moreover, depending on the staking protocols, this data should be exposed by your API for each validator address and/or pool ID, along with a detailed breakdown of rewards for specified periods (e.g., 24 hours, last 7 days, etc.).
+
+<Callout type="info" emoji="🔗">
+You will find all the information regarding the Earn endpoints here: https://exchange-integration-earn.redoc.ly/
+</Callout>
+
+In addition, Ledger also needs to know:
+
+- The base url of the API,
+- Any backend authentication information needed to use the api (token in header…),
+- Any API limits that are in place

pages/docs/ledger-live/exchange/earn/liveapp.mdx

@@ -0,0 +1,51 @@
+import Zoom from 'react-medium-image-zoom'
+import 'react-medium-image-zoom/dist/styles.css'
+import { Tabs } from 'nextra/components'
+import { Callout } from 'nextra/components'
+import BackendIntro from '../../../../../public/exchange/import/backend-intro.mdx'
+import PayloadAndSignature from '../../../../../public/exchange/import/payload-and-signature.mdx'
+
+# Earn Provider's LiveApp
+
+A LiveApp is your dapp (web application) running within Ledger Live's embedded browser. 
+
+A LiveApp offering Ledger Live users staking services can be accessible through various entry points in Ledger Live:
+- The **Accounts** section: where users can view the list of their accounts and are provided with options to stake available assets.
+- The **Discover** section: where users can explore a curated catalog of dapps.
+- The **Earn** section: where users can track their current staking positions and stake additional assets on eligible accounts.
+
+## How to create your LiveApp
+There are two ways to integrate your dapp into Ledger Live:
+1. **dAppBrowser (EVM only)**: by creating a manifest, pointing it to the dAppBrowser, you can easily integrate your dApp into Ledger Live.
+2. **The Ledger Services Kit**: a Javascript library allowing your dapp to interact with Ledger wallet devices (for instance, to sign a transaction) and access information from the connected Ledger wallet (such as the wallet address).
+
+To learn how to create (or embed if already existing) your user interface for Ledger Live, please follow the [Discover documentation](https://developers.ledger.com/docs/ledger-live/discover/getting-started).
+
+## LiveApp UX requirements
+
+Your LiveApp must respect some UX requirements:
+- 0-click connect to the wallet (users wallet must be automatically connected when opening your LiveApp)
+- Login through other wallets must not be possible
+- Design must be responsive for optimal display on all devices
+- After a successful transaction (staking/unstaking, delegation, rewards claiming..), a confirmation page with the transaction hash must be displayed to users, allowing them to easily confirm its status.
+- If applicable, the staking method (such as native staking, liquid staking, etc.) should be displayed to users, along with the names of the validators to whom the assets are delegated to.
+
+The Ledger team will review and validate your LiveApp’s user flow and ensure compliance with the guidelines mentioned above.
+
+<Callout type="info" emoji="👉">
+If a token (wether it is liquid or not) representing the staking position is issued to users, please inform Ledger of the token's name and address.
+</Callout>
+
+## Manifest update
+
+In some cases, your LiveApp might interact with third-party smart contracts that you don't own and are already clear signed. If that is the case, you must update your manifest to specify this dependency. 
+
+For example, if your LiveApp interacts with eigenlayer smart contracts (that are already clear signed and used by other LiveApps), then your LiveApp's manifest must include the following:
+
+```json
+"dependency": [
+  "eigenlayer"
+]
+```
+
+Please contact the Ledger team to confirm whether a third-party smart contract is already clear signed, and which value to use in your manifest for it.

pages/docs/ledger-live/exchange/earn/plugin.mdx

@@ -0,0 +1,37 @@
+import { Tabs } from "nextra/components";
+import { Callout } from "nextra/components";
+import Zoom from "react-medium-image-zoom";
+import "react-medium-image-zoom/dist/styles.css";
+import Image from 'next/image';
+
+
+# Earn Provider's plugin
+
+A plugin (or Leger device plugin) ensures that, instead of signing raw and often confusing blockchain data (blind signing), the user receives a clear, human-readable summary of the transaction details on their Ledger device (clear signing). 
+
+To implement clear signing in your LiveApp, you need to develop your own dedicated Ledger plugin. This is a requirement for your LiveApp to be integrated with Ledger Live.
+
+<Callout type="info" emoji="👉">
+All smart contracts your LiveApp interacts with must be clear signed (staking/unstaking, rewards claiming, or any delegation operations).
+</Callout>
+
+
+## How to create your own plugin
+
+To create your own plugin, please refer to the documentation available in the [Plugin section](https://developers.ledger.com/docs/device-app/explanation/device-app-role) of the Developer Portal.
+
+Here is the overall process:
+1. Plugin development is done by your team.
+2. Once the plugin is developed, an external security lab conducts the plugin security audit (you must contact the auditor yourself).
+3. You submit the Audit security report to Ledger. 
+4. Ledger will then perform a review and complete the final validation before releasing the plugin in production.
+
+Note: a plugin can be developed for EVM-compatible blockchains, as it works in tandem with the Ethereum App installed on Ledger devices. If your LiveApp allows staking on non-EVM blockchains, please reach out to the Ledger team for assistance with this process.
+
+
+## Ressources
+
+- Plugin technical documentation: https://ethereum-plugin-sdk.ledger.com/ 
+- Plugin boilerplate: https://github.com/LedgerHQ/app-plugin-boilerplate 
+- Kiln plugin example: https://github.com/LedgerHQ/app-plugin-kiln
+