-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: dapp browser v3 update [LIVE-11663] (#357)
- Loading branch information
Showing
7 changed files
with
317 additions
and
119 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,67 +1,108 @@ | ||
| --- | ||
| title: Turn your app into a Live App | ||
| description: If you want to embed your web app into Ledger's Live's Market place, also known as our Discover section, you've come to the right place. | ||
| description: If you want to embed your web app into Ledger's Live's Market place, also known as our Discover section, you've come to the right place. | ||
| --- | ||
|
|
||
| # Turn your app into a Live App | ||
|
|
||
| If you want to embed your web app into Ledger's Live's Market place, also known as our Discover section, you've come to the right place. | ||
| If you want to embed your web app into Ledger's Live's Market place, also known as our Discover section, you've come to the right place. | ||
|
|
||
| ## What are the Discover section and Live Apps | ||
|
|
||
| Ledger Live aims to be more than a keyholder— it’s a comprehensive platform crafted by Ledger. | ||
| Ledger Live aims to be more than a keyholder— it's a comprehensive platform crafted by Ledger. | ||
|
|
||
| It allows users to manage, transact, and nurture their digital assets securely. Both from Desktop and Mobile, it serves as a door to the broad crypto ecosystem. And this is where your apps and the Discover section comes into place. | ||
|
|
||
|  | ||
|  | ||
|
|
||
| Nested within the interface of Ledger Live, our Discover section offers a curated selection of apps, called Live Apps, to our audience. It provides the assurance to our user that those apps have been tested and can interact with their Ledger device. The curated apps are chosen by our business team. | ||
|
|
||
| All other applications are accessible through a **search Bar** with automatic connection to your wallet, clear signing with hardware wallet security. This service is free for users and for partners | ||
|
|
||
| A Live App incorporates the Wallet API, providing convenience and security for Ledger Live users when interacting with web3 projects. If you have or want to build a Web3 or Web2.5 app, then you’re eligible to turn your app into a Live App. | ||
|
|
||
| ## DApps, Web Apps, Web3 and Web2.5 apps? | ||
|
|
||
| <div style={{width: "80%"}} className="center desktop"> | ||
| <div style={{position: "relative", paddingBottom: "56.25%", paddingTop: 0, height: 0}}> | ||
| <iframe title="NFT Project Dev Journey" frameBorder="0" style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%"}} src="https://view.genial.ly/655cb18a21252300111c674a" type="text/html" allowscriptaccess="always" allowFullScreen={true} scrolling="yes" allownetworking="all"></iframe> | ||
| </div> | ||
| ## DApps, Web Apps, Web3 and Web2.5 apps? | ||
|
|
||
| <div style={{ width: "80%" }} className="center desktop"> | ||
| <div | ||
| style={{ | ||
| position: "relative", | ||
| paddingBottom: "56.25%", | ||
| paddingTop: 0, | ||
| height: 0, | ||
| }} | ||
| > | ||
| <iframe | ||
| title="NFT Project Dev Journey" | ||
| frameBorder="0" | ||
| style={{ | ||
| position: "absolute", | ||
| top: 0, | ||
| left: 0, | ||
| width: "100%", | ||
| height: "100%", | ||
| }} | ||
| src="https://view.genial.ly/655cb18a21252300111c674a" | ||
| type="text/html" | ||
| allowscriptaccess="always" | ||
| allowFullScreen={true} | ||
| scrolling="yes" | ||
| allownetworking="all" | ||
| ></iframe> | ||
| </div> | ||
| </div> | ||
|
|
||
| - **Traditional Web Applications (Web Apps or Web2 Apps)** | ||
|
|
||
| They function on centralized servers under the authority of singular entities. They follow a client-server architecture where the client (user) interacts with services provided by the server. | ||
| They function on centralized servers under the authority of singular entities. They follow a client-server architecture where the client (user) interacts with services provided by the server. | ||
|
|
||
| - **Decentralized Applications (DApps or Web3 Apps)** | ||
|
|
||
| The word DApps was popularized in the context of Ethereum. The famous blockchain was the first to offer smart contract capabilities, thus laying the foundation to a new world of Apps that would use the blockchain as their decentralized backend, instead of relying on usual centralized servers. Even though the scope of DApps has today evolved to encompass much more than the Ethereum blockchain, with a lot of chains now offering Smart Contract capabilities, the official [Ethereum documentation](https://ethereum.org/en/developers/docs/dapps/#definition-of-a-dapp) offers a comprehensive explanation to the caracteristics of a Decentralized Application (or Web3 App). | ||
| The word DApps was popularized in the context of Ethereum. The famous blockchain was the first to offer smart contract capabilities, thus laying the foundation to a new world of Apps that would use the blockchain as their decentralized backend, instead of relying on usual centralized servers. Even though the scope of DApps has today evolved to encompass much more than the Ethereum blockchain, with a lot of chains now offering Smart Contract capabilities, the official [Ethereum documentation](https://ethereum.org/en/developers/docs/dapps/#definition-of-a-dapp) offers a comprehensive explanation to the caracteristics of a Decentralized Application (or Web3 App). | ||
|
|
||
| - **Hybrid Applications (Hybrid Apps or Web2.5 Apps)** | ||
|
|
||
| DApps imply working with smart contracts which doesn’t come without any risks. Before taking that step, some developers will adopt a hybrid approach by relying on Wallet Authentication for their apps without adopting smart contracts. Thus, apps that offer the possibility to authenticate with a wallet while keeping a traditional Client-Server architecture for their services fall into this category. | ||
|
|
||
| ## Pathways to Integration: DAppBrowser vs. Wallet API | ||
|
|
||
| DApps imply working with smart contracts which doesn't come without any risks. Before taking that step, some developers will adopt a hybrid approach by relying on Wallet Authentication for their apps without adopting smart contracts. Thus, apps that offer the possibility to authenticate with a wallet while keeping a traditional Client-Server architecture for their services fall into this category. | ||
|
|
||
| ## Pathways to Integration: DAppBrowser vs. Wallet API | ||
|
|
||
| There are two options when it comes to integrating into Ledger Live | ||
|
|
||
| - **The dAppBrowser (EVM Only for now)** | ||
|
|
||
| This one is only available to EVM based dApps for now. By crafting a manifest, directing it to the DAppBrowser, and incorporating the Iframe Provider in their app, developers can quickly add their application to Ledger Live. | ||
| This one is only available to EVM based dApps for now. By crafting a manifest for the DAppBrowser, developers can quickly add their application to Ledger Live. | ||
|
|
||
| - **The Wallet API** | ||
|
|
||
| The Wallet API pathway is more code-intensive, requiring a deeper engagement from developers. However, it grants a more granular control over the core wallet features within Ledger Live. A thorough understanding of the Wallet API can be gleaned from the official documentation. | ||
|
|
||
|
|
||
| <div style={{width: "100%"}} className="center"> | ||
| <div style={{position: "relative", paddingBottom: "56.25%", paddingTop: 0, height: 0}}> | ||
| <iframe title="Live App Structure" frameBorder="0" style={{position: "absolute", top: 0, left: 0, width: "100%", height: "100%"}} src="https://view.genial.ly/65241621e3a92300127e47e8" type="text/html" allowscriptaccess="always" allowFullScreen={true} scrolling="yes" allownetworking="all"></iframe> | ||
| </div> | ||
| The Wallet API pathway is more code-intensive, requiring a deeper engagement from developers. However, it grants a more granular control over the core wallet features within Ledger Live. A thorough understanding of the Wallet API can be gleaned from the official documentation. | ||
|
|
||
| <div style={{ width: "100%" }} className="center"> | ||
| <div | ||
| style={{ | ||
| position: "relative", | ||
| paddingBottom: "56.25%", | ||
| paddingTop: 0, | ||
| height: 0, | ||
| }} | ||
| > | ||
| <iframe | ||
| title="Live App Structure" | ||
| frameBorder="0" | ||
| style={{ | ||
| position: "absolute", | ||
| top: 0, | ||
| left: 0, | ||
| width: "100%", | ||
| height: "100%", | ||
| }} | ||
| src="https://view.genial.ly/65241621e3a92300127e47e8" | ||
| type="text/html" | ||
| allowscriptaccess="always" | ||
| allowFullScreen={true} | ||
| scrolling="yes" | ||
| allownetworking="all" | ||
| ></iframe> | ||
| </div> | ||
| </div> | ||
|
|
||
| The path you chose is yours to decide, we'll provide you guidelines for both roads. | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,6 @@ | ||
| { | ||
| "dapp-customisation": "Add a provider", | ||
| "manifest": "Write and load the manifest", | ||
| "plugin": "Write a plugin for clear signing" | ||
| } | ||
| { | ||
| "dapp-customisation": "Update your DApp", | ||
| "manifest": "Write and load the manifest", | ||
| "plugin": "Write a plugin for clear signing", | ||
| "migration": "DApp Browser migration" | ||
| } |
36 changes: 10 additions & 26 deletions
36
apps/docs/pages/docs/discover/dapp-browser/dapp-customisation.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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. | ||
|
|
||
| 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…). | ||
| - Please make sure basic cases are handled. | ||
|
|
||
| * 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.) | ||
| 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 injected provider or redirected to the standard list of providers (Metamask, connect wallet, and such…). | ||
|
|
||
| * 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](../developer-mode/).) | ||
|
|
||
| * 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. |
Oops, something went wrong.