Skip to content

Commit

Permalink
docs: dapp browser v3 update [LIVE-11663]
Browse files Browse the repository at this point in the history
  • Loading branch information
Justkant committed May 15, 2024
1 parent 5a78716 commit 4689d5c
Show file tree
Hide file tree
Showing 6 changed files with 69 additions and 70 deletions.
8 changes: 4 additions & 4 deletions pages/docs/discover/dapp-browser.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@
title: How to add a DApp with the DApp Browser?
---

# How to add a DApp with the DApp Browser?
# How to add a DApp with the DApp Browser v3 ?

To integrate a DApp with the DApp Browser, you need to:

- Read the [submission guidelines](./guidelines)
- Add a [Web3 provider](./dapp-browser/dapp-customisation/)
- Update [your DApp](./dapp-browser/dapp-customisation/)
- Write a [manifest](./dapp-browser/manifest/)
- Create a [DApp Plugin](/docs/device-app/introduction/plugins/)
- Create a [DApp Plugin](./dapp-browser/plugin/)

# Already using the DApp Browser ?

We are in the process of deprecating the DApp Browser.
We are in the process of deprecating the DApp Browser live-app v1 and v2.

Ledger Live will now support injecting a compatible provider in the webview.

Expand Down
2 changes: 1 addition & 1 deletion pages/docs/discover/dapp-browser/_meta.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"dapp-customisation": "Add a provider",
"dapp-customisation": "Update your DApp",
"manifest": "Write and load the manifest",
"plugin": "Write a plugin for clear signing",
"migration": "DApp Browser migration"
Expand Down
34 changes: 9 additions & 25 deletions pages/docs/discover/dapp-browser/dapp-customisation.mdx
Original file line number Diff line number Diff line change
@@ -1,40 +1,24 @@
---
title: Add a provider
description: "It consists of two steps: updating your DApp server, and smooth out the user experience"
title: Update your DApp
description: "It consists of two steps: updating your DApp, and smooth out the user experience"
---

# Add a provider

## 1. Update your DApp server

Ledger has a [DApp browser](https://github.com/LedgerHQ/eth-dapp-browser) to host your web3 DApp.
# Update your DApp

One of the most useful features of this DApp Browser is to be able to log-in automatically from a Ledger Live Ethereum account, therefore obviating the step to manually “Connect a Wallet”.

As a DApp developer, you must add the specific iframe provider from Ledger as web3 provider.

The server must allow DApps to be embedded into iframes. To know more on how to proceed, have a look at [this documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors). This explains how to easily authorize your DApp to be embedded only by Ledger Live DApp Browser by specifying the DApp Browser URL without using wildcards.

There is a useful [reference article](https://blog.ledger.com/paraswap-defi/) on the Ledger Blog.

The package to add a [new web3 provider](https://www.npmjs.com/package/@ledgerhq/iframe-provider) is available here. This simply diverts all RPC calls made from the DApp to the parent window using the PostMessage API. It does not do any Ledger-specific computing. It could in the future become a development standard to work out-of-the-box with other wallets.

A DApp must run differently if it is called from within an iframe or not. If it is, then directly initialize the web3 instance with the iframe provider. In this way, there is no web3modal connect flow at all, and users are automatically connected to the wallet of the parent window. To detect if a call is made from within an iframe or not, use a query param such as `?embed=true`.

Feel free to check out how Lido did it [here](https://github.com/lidofinance/ledgerhq-frame-connector), it is later used in their sdk [here](https://github.com/lidofinance/lido-js-sdk/search?q=web3-ledgerhq-frame-connector), Yearn impl can be found [her](https://github.com/yearn/yearn-finance-v3/blob/develop/src/core/frameworks/blocknative/IframeWallet.ts).
As a DApp developer, you can check if the `isLedgerLive` boolean is truthy in the injected provider (`window.ethereum` or from EIP-6963).

The DApp can submit a tx with or without gas fee set. If it is set, Ledger Live will use it as is, otherwise, Ledger Live will propose low/medium/high based on gas fee estimations.

# Smooth out user experience

## 2. Smooth out user experience

* Please make sure basic cases are handled.
- Please make sure basic cases are handled.

For instance, check what happens when you click on the **log out** or **disconnect** button in your Dapp. The user may be automatically logged back in Ledger Live iframe provider or redirected to the standard list of providers (Metamask, connect wallet, and such…).

* We currently supports Ethereum mainnet, BSC and Polygon POS chains. We also support the Goerli testnet: to use it, make sur you have a Goerli testnet account available in Ledger Live. (To enable testnet networks, head over to Settings -> Experimental features and turn on the Developer mode setting.)

* Please **remove any references to third-party services** that are not part of the current Ledger environment. You are free however to redirect to Ledger Live Buy or Swap services.
- We currently supports Ethereum mainnet, BSC, arbitrum, optimism, base, fantom and Polygon chains. We also support the Sepolia testnet: to use it, make sur you have a Sepolia testnet account available in Ledger Live. (To enable testnet networks, head over to Settings -> Experimental features and turn on the Developer mode setting.)

* UI must be **responsive** and available for both **Desktop** and **Mobile** screen sizes.
- Please **remove any references to third-party services** that are not part of the current Ledger environment. You are free however to redirect to Ledger Live Buy or Swap services.

- UI must be **responsive** and available for both **Desktop** and **Mobile** screen sizes.
Loading

0 comments on commit 4689d5c

Please sign in to comment.