Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #655 from threshold-network/ledger-live-app
Ledger Live App <h1 align="center" fontSize="30">Ledger Live App</h1> Closes: #649 ~Blocked by: #654~ This PR allows to run our dApp as Live App withing Ledger Live. The Live Apps are displayed in the Discover section of Ledger Live on Desktop (Windows, Mac, Linux) and mobile (Android and iOS). The main purpose of it would be to complete the whole Mint & Unmint flow, without the need to leave the Ledger Live application and do a bitcoin transaction to generated deposit address. All transactions are done within the application. # Overall Description When running as Ledger Live App, our Token Dashboard is embedded into it and displayet differently than in the website. We are checking that with our `isEmbed` query parameter, that I've put in the manifest file. Only tbtc section is needed for this, so that's why onli this section is displayed and the rest are hidden. The user can connect his ethereum account from Ledger to communicate with eth contracts. He can also choose which of his bitcoin addresses he wants to use to send the bitcoins from. # Technical Details ### Overview The code was written based on the [Ledger Live App documentations](https://developers.ledger.com/docs/live-app/start-here/). As you can see there are two sections in the documentation: [DApp](https://developers.ledger.com/docs/dapp/process/) and [Non-DApp](https://developers.ledger.com/docs/non-dapp/introduction/) - both describe two different ways of embedding an application into the Ledger Live Discover section. A first natural choice in our case would be the `DApp` section, since our website is a Dapp. Unfortunately, that is not the case, because from my experience and research it looks like it was not possible to do a bitcoin transaction there. This is why we choose the second option, which allows to use [Wallet-API](https://wallet.api.live.ledger.com/). With the help of this API we are able to do bitcoin and eth transactions, and also interact with eth contracts. The Wallet-API also has two sections in the docs: [Core-API](https://wallet.api.live.ledger.com/core) and [React-API](https://wallet.api.live.ledger.com/react), that uses Core-API under the hood. In our case we actually use both: React-API for connecting the eth/btc accounts and sending bitcoin transactions from one account to another (in our case to deposit address) and Core-Api to interact with eth contracts. Why? The answer is that using only React-API would require us to reorganize [tBTC v2 SDK](https://github.com/keep-network/tbtc-v2/tree/main/typescript) just for the Ledger Live App functionality. The API for reacts needs raw data format of the ethereum transaction when we interact with the contract, and that can be obtained using [populateTransaction method](https://docs.ethers.org/v5/api/contract/contract/#contract-populateTransaction) from `ethers` lib, but we are not returning it in such form in our SDK. This is why we've decided to create a separate signer for this purpose - to avoid doing any changes in the SDK just for that feature and to not unnecessarily extend SDK responsibility. ### Ledger Live Ethereum Signer (wallet-api-core) TBTC v2 SDK allows us to pass signer when initiating it. The signer must extend the `Signer` class from `ethers` lib and this is exactly what our Ledger Live Ethereum Signer do. It uses `wallet-api-core` lib under the hood. The signer [was placed in tbtc-v2 repo](https://github.com/keep-network/tbtc-v2/blob/releases/mainnet/typescript/v2.3.0/typescript/src/lib/utils/ledger.ts) You can see a more detailed description of that signer, its purpose and explanation of how it works in keep-network/tbtc-v2#743. In our dApp we are requesting an eth account using `wallet-api-core-react` (see the subsection below) and then pass the account to the signer using [`setAccount` method](https://github.com/keep-network/tbtc-v2/blob/releases/mainnet/typescript/v2.3.0/typescript/src/lib/utils/ledger.ts#L65-L67). ### Connecting wallets and doing simple transactions (wallet-api-core-react) The Ledger Live Ethereum Signer is used to integrate with eth contracts, but what about connecting the account to our dApp and sending some tokens from one account to another? This is where we use `wallet-api-core-react` and it's hooks. In our dApp we have three custom hooks that use hooks from `wallet-api-core-react` under the hood: - `useRequestBitcoinAccount`, - `useRequestEthereumAccount`, - `useSendBitcoinTransaction`. The first two are pretty similar to the original ones (from the lib), but I've had to write a wrapper to it so that I can connect and disconnect `walletApiReactTransport` there. This is needed because our Ledger Live Ethereum Signer uses different instance of the transport there, so if we won't disconnect one or another, a `no ongoing request` error might occur. Based on [the dosc](https://wallet.api.live.ledger.com/core/configuration#initializing-the-wallet-api-client) the transport should be disconnected when we are done to ensure the communication is properly closed. The third one, `useSendBitcoinTransaction`, is used to create a bitcoin transaction in a proper format that is required by `wallet-api-core-react`. The format for our bitcoin transaction looks like this: ``` const bitcoinTransaction = { family: "bitcoin", amount: new BigNumber(100000000000000), recipient: "<bitcoin_address>", }; ``` Fields: - `family` (string): The cryptocurrency family to which the transaction belongs. This could be 'ethereum', 'bitcoin', etc. - `amount` (BigNumber): The amount of cryptocurrency to be sent in the transaction, represented in the smallest unit of the currency. For instance, in Bitcoin, an amount of 1 represents 0.00000001 BTC. - `recipient` (string): The address of the recipient of the transaction. - `nonce` (number, optional): This is the number of transactions sent from the sender's address. - `data` (Buffer, optional): Input data of the transaction. This is often used for contract interactions. - `gasPrice` (BigNumber, optional): The price per gas in wei. - `gasLimit` (BigNumber, optional): The maximum amount of gas provided for the transaction. - `maxPriorityFeePerGas `(BigNumber, optional): Maximum fee per gas to be paid for a transaction to be included in a block. - `maxFeePerGas` (BigNumber, optional): Maximum fee per gas willing to be paid for a transaction. _Source: https://wallet.api.live.ledger.com/appendix/transaction_ In our case, for our bitcoin transaction, we only need `family`, `amount` and `recipient`. We only use that to send bitcoins to deposit address, so we will use the deposit address as a `recipient` here. Finally, to execute the transaction, we just pass the transaction object and id of the connected bitcoin account to [`useSignAndBroadcastTransaction` hook](https://wallet.api.live.ledger.com/react/hooks/useSignAndBroadcastTransaction). ### LedgerLiveAppContext Connecting account in Ledger Live App is quite different than our actual one in the website. Normally, we use `web3react` for that, but in this case we need to use [`useRequestAccount` hook](https://wallet.api.live.ledger.com/react/hooks/useRequestAccount) form `wallet-api-client-react`. Because of that we need to store those accounts somewhere in our dApp, so I decided to create a `LedgerLiveAppContext` for that. The context contain 5 properties: ``` interface LedgerLiveAppContextState { ethAccount: Account | undefined btcAccount: Account | undefined setEthAccount: (ethAccount: Account | undefined) => void setBtcAccount: (btcAccount: Account | undefined) => void ledgerLiveAppEthereumSigner: LedgerLiveEthereumSigner | undefined } ``` As you can see we have `ethAccount` and `btcAccount` to store the connected accounts there. We can also set those account using `setEthAccount` and `setBtcAccount` methods, after we request it using our hook. The `ledgerLiveAppEthereumSigner` is an additional property that contains our signer for Ledger Live App. This way we will be able to set the account also in the signer. ### `useIsEmbed` hook Like I said earlier, we use `isEmbed` query parameter to determine if the dApp is used in Ledger Live or not. I've created an `useIsEmbed` hook that saves that query parameter to local storage and the use it to detect if we should use all the functionalities for Ledger Live App or not. ### `useIsActive` hook This is also a new hook here. His main purpose is to determine if, and what account is active. Up to this point we've used `useWeb3React` hook for that purpose, but in this case it won't work. So, under the hook, the `useIsActive` returns similar values to `useWeb3React` hook if the app is not embed, but if it is, then we return proper values based on the `LedgerLiveAppContext`. ### How it works with `threshold-ts` lib I've actually manage to not do any changes in our `threshold-ts` lib. The way it works now is that when the `isEmbed` flag is set to true, we pass the Ledger Live Ethereum Signer as a `providerOrSigner` property. This required me to change `getContract` and `getBlock` method though, so that they return the proper values when tthe `providerOrSigner` is and instance of `LedgerLiveEthereumSigner`. # Read More - [Ledger Live App documentation](https://developers.ledger.com/docs/live-app/start-here/) - [Wallet-Api documentation](https://wallet.api.live.ledger.com/) # How To Test Steps to Run it in as Ledger Live App: 1. Pull the newest changes from this branch 2. Run Ledger Live on your device 3. [Enable the developer mode](https://developers.ledger.com/docs/live-app/developer-mode/) 4. Go to Settings -> Developer 5. Go to `Add a local app` row and click `Browse` 6. Got to your project directory and choose [manifest-ledger-live-app.json](https://github.com/threshold-network/token-dashboard/blob/ledger-live-app/manifest-ledger-live-app.json) 6. Click `Open` In the future: - [ ] Write [Ledger Live App Plugin](https://developers.ledger.com/docs/dapp/requirements/) so we can display proper information on the Ledger device when revealing a deposit or requesting a redemption - [ ] Implement/check if the plugin works on Sepolia. It's currently [under development](LedgerHQ/ledger-live#5722).
- Loading branch information
