[FEAT][LIVE-10174][LIVE-10173] add sepolia and holesky testnets #5722
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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
4 Ignored Deployments
|
live-github-bot
bot
added
desktop
chabroA
force-pushed
the
feat/LIVE-10173-add-ethereum-testnets
branch
from
6c2e958
to
7b1caef
Compare
chabroA
force-pushed
the
feat/LIVE-10173-add-ethereum-testnets
branch
from
32f8d40
to
923a2d9
Compare
20 tasks
r-czajkowski
added a commit
to threshold-network/token-dashboard
that referenced
this pull request
Dec 14, 2023
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).
[Bot] Testing with 'Nitrogen' ✅ 5 txs ($0.00) ⏲ 1min 45s
|
| Spec (accounts) | State | Remaining Runs (est) | funds? |
|---|---|---|---|
| Ethereum Sepolia (5) | 13 ops (+6), 0.25 𝚝ETH ($0.00) | 👍 63 | 0x60A4E7657D8df28594ac4A06CDe01E18E948a892 |
| Ethereum Holesky (2) | 5 ops (+4), 0.25 𝚝ETH ($0.00) | 💪 999+ | 0x60A4E7657D8df28594ac4A06CDe01E18E948a892 |
Ethereum Sepolia 1 cross: 0.0000276 𝚝ETH (3ops) (0x60A4E7657D8df28594ac4A06CDe01E18E948a892 on 44'/60'/0'/0/0) #0 js:2:ethereum_sepolia:0x60A4E7657D8df28594ac4A06CDe01E18E948a892:
Ethereum Sepolia 2: 0 𝚝ETH (1ops) (0x90bD48144e08b66490BcA9a756BDe9f004F17857 on 44'/60'/1'/0/0) #1 js:2:ethereum_sepolia:0x90bD48144e08b66490BcA9a756BDe9f004F17857:
Ethereum Sepolia 3: 0.0624735 𝚝ETH (3ops) (0xb6E8b0371A15CDadF1D8EdA34F78870A5e688B25 on 44'/60'/2'/0/0) #2 js:2:ethereum_sepolia:0xb6E8b0371A15CDadF1D8EdA34F78870A5e688B25:
Ethereum Sepolia 4: 0.12487 𝚝ETH (4ops) (0xe404f128644459C5A0F6FAc6824AdA8F94798c8f on 44'/60'/3'/0/0) #3 js:2:ethereum_sepolia:0xe404f128644459C5A0F6FAc6824AdA8F94798c8f:
Ethereum Sepolia 5: 0.0623921 𝚝ETH (2ops) (0x770aB35d6C2Bc4fe41f616be47B626Ef7a2810E9 on 44'/60'/4'/0/0) #4 js:2:ethereum_sepolia:0x770aB35d6C2Bc4fe41f616be47B626Ef7a2810E9:
Ethereum Holesky 1 cross: 0.187476 𝚝ETH (3ops) (0x60A4E7657D8df28594ac4A06CDe01E18E948a892 on 44'/60'/0'/0/0) #0 js:2:ethereum_holesky:0x60A4E7657D8df28594ac4A06CDe01E18E948a892:
Ethereum Holesky 2: 0.0624767 𝚝ETH (2ops) (0x90bD48144e08b66490BcA9a756BDe9f004F17857 on 44'/60'/1'/0/0) #1 js:2:ethereum_holesky:0x90bD48144e08b66490BcA9a756BDe9f004F17857:
Performance ⏲ 1min 45s
Time spent for each spec: (total across mutations)
| Spec (accounts) | preload | scan | re-sync | tx status | sign op | broadcast | test | destination test |
|---|---|---|---|---|---|---|---|---|
| TOTAL | 1009ms | 5s | 3.52ms | 3.8s | 13.9s | 369ms | 70.9s | 50.7s |
| Ethereum Sepolia (5) | 180ms | 3.2s | 2.77ms | 2313ms | 8.5s | 211ms | 50.5s | 30.4s |
| Ethereum Holesky (2) | 830ms | 1825ms | 0.75ms | 1488ms | 5.3s | 158ms | 20.3s | 20.3s |
What is the bot and how does it work? Everything is documented here!
hedi-edelbloute
approved these changes
Dec 14, 2023
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.
📝 Description
Add Ethereum sepolia and holesky testnet integrations.
Sepolia seems to have a token referenced in the CAL so this part is updated as well. Holesky does not.
❓ Context
✅ Checklist
Pull Requests must pass the CI and be code reviewed. Set as Draft if the PR is not ready.
npx changesetwas attached.🧐 Checklist for the PR Reviewers