Ledger live implementation #515
Merged
Conversation
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
Create a Ledger Live connector
and also remove unnecessary `IFrameEthereumProvider` import
For both dark mode and light mode.
Adds four listeners to the ledger live procider: - networkChanged - chainChanged - accountsChanged - close Also removes them in `deactivate` method.
1 similar comment
There was an error which happened after clicking `Disconnect` while being connected with a Ledger wallet. To fix that we simply remove the `this.provider = undefined` line form the `deactivate` method as it is not necessary.
r-czajkowski
requested changes
May 18, 2023
We call `activate` method in the `WalletConnectionModalBase` already.
ledger_live -> ledgerLive
The `provider` is already marked as `optional` so we don't have to type it as possibly undefined.
r-czajkowski
requested changes
Jun 2, 2023
We should close Wallet Connection modal when activating the provider of LedgerLive, because it will open it's own modal.
Adds `shouldForceCloseModal` property to `WalletConnectionModalBase` component.
r-czajkowski
previously approved these changes
Jul 26, 2023
src/components/Modal/SelectWalletModal/components/WalletConnectionModalBase.tsx
Outdated
Show resolved
Hide resolved
michalsmiarowski
force-pushed
the
ledger-live-implementation
branch
3 times, most recently
from
2b058ba
to
98a6086
Compare
2 similar comments
Pass wallet connect project id through ledger live constructor.
1 similar comment
Update `@ledgerhq/connect-kit-loader` lib to 1.1.2.
Sometime there is an error "Cannot convert undefined or null to object" when trying to connect to walletconnect or ledger live. To reproduce it (before the fix in this commit of course) you should: 1. Connect through Ledger Live 2. Disconnect 3. Connect through Ledger Live again (with the same account) 4. Disconnect 5. Connect through WalletConnect (it should automatically connect with the same account that you used while connecting to Ledger Live) 6. Disconnect 7. Connect again through Ledger Live 8. The error should appear The similar issue was descibed here: WalletConnect/walletconnect-monorepo#3165 This commit fixes that issue by clearing out the local storage from the walleconnect realted data.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🔶 Ledger Live Implementation 🔶
This pull request introduces a new feature to support Ledger Live integration in web3 applications using the
@ledgerhq/connect-kit-loaderpackage. This newly created connector allows users to connect their wallets throughLedger Live app directly to the application and sign transactions securely. It also allows them to connect their Ledger Nano device directly to the web3 app by using Ledger Extension (available only on Safari).
Changes
LedgerConnectorclass in theconnectorsdirectory to handle the Ledger Live integration.@ledgerhq/connect-kit-loaderpackage as a dependency to facilitate communication with Ledger devices.LedgerConnectorclass to handle connection, account retrieval etc.Ledger Liveoption inSelectWalletModalcomponent so that theLedgerLiveis displayed as one of the options when connecting to the dApp.Ledger Live documentation
https://developers.ledger.com/docs/dapp-connect-kit/introduction/
Note: Most info down below are from the documentation. Check it out for more context!
The
@ledgerhq/connect-kit-loaderpackage provides a simple way to integrate Ledger Live into web3 applications. The package handles communication with Ledger devices, allowing users to manage accounts, sign transactions, and access other blockchain-related features. This pull request leverages the package to implement a web3-react connector for Ledger Live, providing a seamless experience for users with Ledger hardware wallets. For more info about the impementation see https://developers.ledger.com/docs/dapp-connect-kit/implementation/ (Custom integrationchapter)How it works
The DApp Connect Kit lets you connect your DApps to Ledger hardware wallets. It has two components:
Supported platforms
Ledger Extension: is available on Safari for all Apple devices (requires iOS16+ or MacOS 12+). Support for other desktop browsers will be added in 2023.
Ledger Live mobile app: Native mobile apps and other browsers on iOS and Android will trigger the Ledger Live app using a WalletConnect deeplink. Both Ledger Live on iOS and Android can also be used to connect on desktop via the WalletConnect QRcode.
Ledger Live desktop app: Used as a fall back on desktop browsers until the Ledger Extension support is added, and for USB connections.
If user is using Safari then he will be asked to use or install
Ledger Extension. If he uses any other browser then the modal will let him use or install eitherLedger Live mobile apporLedger Live desktop app.Example of usage
After clicking
Connect walletuser will see theLedger Liveoption as one of the methods to connect:Screenshot
Case 1 - Safari browser
Result: Display a modal to guide the user with the setup process of the browser extension, or the enable setting.
Screenshot
Result: On the first use, user is prompted to select and account to connect to dApp. Otherwise it autoconnects with the preciously used account. If you want the dApp to ask you again then you need to press
Clear storagein the extension options.Screenshot
Case 2 - Browser other than Safari
Result: Open a modal from which Ledger Live can be opened. If user is already connected through Ledger Live then we connect him automatically.
Screenshot
For more information about modal behaviour please check https://developers.ledger.com/docs/dapp-connect-kit/button-behaviour/