-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into feat/LIVE-8078-doc-simulator
- Loading branch information
Showing
7 changed files
with
479 additions
and
16 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
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 |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "start": "Start here", | ||
| "configuration": "Configuration", | ||
| "hooking-up": "Hooking up", | ||
| "manifest": "Import your app in Ledger Live" | ||
| } |
105 changes: 105 additions & 0 deletions
105
apps/docs/pages/examples/live-app-creation/configuration.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 |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| import { Callout } from "nextra/components"; | ||
|
|
||
| ### 4. **Configuring Ledger's Wallet API** | ||
|
|
||
| To interact with Ledger Live, you'll need to configure the Ledger's Wallet API. The first step is to install the necessary packages, and then set up the appropriate configuration through a transport layer named "Transport". This transport layer will enable communication with the Wallet API. | ||
|
|
||
| - **Installing Packages**: | ||
| Install the necessary packages using npm: | ||
|
|
||
| ```sh | ||
| npm install @ledgerhq/wallet-api-client @ledgerhq/wallet-api-client-react | ||
| ``` | ||
|
|
||
| - **Creating Transport Provider**: | ||
| Create a file named `TransportProvider.tsx`. This file will contain a component that utilizes the Ledger Wallet API client to create a communication transport Higher Order Component (HOC). | ||
|
|
||
| ```jsx | ||
| // src/TransportProvider.tsx | ||
| import { WalletAPIProvider } from "@ledgerhq/wallet-api-client-react"; | ||
| import { Transport, WindowMessageTransport } from "@ledgerhq/wallet-api-client"; | ||
|
|
||
| function TransportProvider({ children }) { | ||
| function getWalletAPITransport(): Transport { | ||
| if (typeof window === "undefined") { | ||
| return { | ||
| onMessage: undefined, | ||
| send: () => {} | ||
| }; | ||
| } | ||
|
|
||
| const transport = new WindowMessageTransport(); | ||
| transport.connect(); | ||
| return transport; | ||
| } | ||
|
|
||
| const transport = getWalletAPITransport(); | ||
|
|
||
| return ( | ||
| <WalletAPIProvider transport={transport}>{children}</WalletAPIProvider> | ||
| ); | ||
| } | ||
|
|
||
| export default TransportProvider; | ||
| ``` | ||
|
|
||
| - **Wrapping App with TransportProvider**: | ||
| In your root file, wrap your `<App />` with the `TransportProvider`: | ||
|
|
||
| ```jsx | ||
| // src/index.tsx or src/index.js | ||
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import App from './App'; | ||
| import TransportProvider from './TransportProvider'; | ||
|
|
||
| ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( | ||
| <React.StrictMode> | ||
| <TransportProvider> | ||
| <App /> | ||
| </TransportProvider> | ||
| </React.StrictMode> | ||
| ); | ||
| ``` | ||
|
|
||
| With this setup, your entire application can access Ledger's Wallet API and communicate with it via the `TransportProvider`. | ||
|
|
||
| ### 5. **Setting Up The Simulator** | ||
|
|
||
| During the development and testing phases, the Ledger Wallet API simulator can help you develop without requiring to run Ledger Live in parallel. | ||
| You can modify your `TransportProvider.tsx` file to use the `getSimulatorTransport` function provided by the simulator library. | ||
|
|
||
| ```jsx | ||
| // src/TransportProvider.tsx | ||
| import { WalletAPIProvider } from "@ledgerhq/wallet-api-client-react"; | ||
| import { getSimulatorTransport, profiles } from "@ledgerhq/wallet-api-simulator"; | ||
| import type { Transport } from "@ledgerhq/wallet-api-core"; | ||
|
|
||
| function TransportProvider({ children }) { | ||
| function getWalletAPITransport(): Transport { | ||
| if (typeof window === "undefined") { | ||
| return { | ||
| onMessage: undefined, | ||
| send: () => {}, | ||
| }; | ||
| } | ||
|
|
||
| // Use Simulator transport | ||
| const transport = getSimulatorTransport(profiles.STANDARD); | ||
|
|
||
| return transport; | ||
| } | ||
|
|
||
| const transport = getWalletAPITransport(); | ||
|
|
||
| return ( | ||
| <WalletAPIProvider transport={transport}>{children}</WalletAPIProvider> | ||
| ); | ||
| } | ||
|
|
||
| export default TransportProvider; | ||
| ``` | ||
|
|
||
| <Callout emoji="💡"> | ||
| For more informations regarding the simulator, please checkout out [the simulator subsection](/react/simulator) | ||
| </Callout> |
123 changes: 123 additions & 0 deletions
123
apps/docs/pages/examples/live-app-creation/hooking-up.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 |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| ### 6. **Fetching Account Information** | ||
|
|
||
| With your environment set up, you can now start interacting with the Ledger Wallet API. Create a new file under the `/hooks` directory named `useAccounts.tsx`. This file will house a custom hook to fetch user account information using the `useAccounts` hook provided by Ledger. | ||
|
|
||
| ```jsx | ||
| // src/hooks/useAccounts.tsx | ||
| import { useAccounts } from "@ledgerhq/wallet-api-client-react"; | ||
|
|
||
| function useUserAccounts() { | ||
| const { accounts, loading, error } = useAccounts(); | ||
|
|
||
| return { | ||
| accounts, | ||
| loading, | ||
| error, | ||
| }; | ||
| } | ||
|
|
||
| export default useUserAccounts; | ||
| ``` | ||
|
|
||
| Now, you can use this custom hook in your components to fetch and display user account information. | ||
|
|
||
| ### 7. **Creating Transaction Signing Functionality** | ||
|
|
||
| Now that you can fetch account information, the next step is to facilitate transaction signing within your app. Create a new file under the `/hooks` directory named `useSignTransaction.tsx`. This file will contain a custom hook to sign transactions using the `useSignTransaction` hook provided by Ledger. | ||
|
|
||
| ```jsx | ||
| // src/hooks/useSignTransaction.tsx | ||
| import { useSignTransaction, useRequestAccount } from '@ledgerhq/wallet-api-client-react'; | ||
| import { useCallback, useState, useEffect } from 'react'; | ||
| import BigNumber from 'bignumber.js'; | ||
|
|
||
| function useTransactionSigner() { | ||
| const { requestAccount, account } = useRequestAccount(); | ||
| const { signTransaction, pending, signature, error } = useSignTransaction(); | ||
| const [response, setResponse] = useState(null); | ||
|
|
||
| useEffect(() => { | ||
| requestAccount(); | ||
| }, [requestAccount]); | ||
|
|
||
| const handleSignTransaction = useCallback(async () => { | ||
| if (!account) return; | ||
|
|
||
| const ethereumTransaction = { | ||
| family: 'ethereum', | ||
| amount: new BigNumber(1000000000000000), // 0.001 ETH in wei | ||
| recipient: '0xRecipientAddressHere', | ||
| gasPrice: new BigNumber(20000000000), // 20 Gwei | ||
| gasLimit: new BigNumber(21000), | ||
| nonce: 0, // Replace with the correct nonce | ||
| }; | ||
|
|
||
| try { | ||
| const signature = await signTransaction(account.id, ethereumTransaction); | ||
| setResponse(signature); | ||
| } catch (e) { | ||
| console.error(e); | ||
| } | ||
| }, [account, signTransaction]); | ||
|
|
||
| return { | ||
| handleSignTransaction, | ||
| pending, | ||
| response, | ||
| error | ||
| }; | ||
| } | ||
|
|
||
| export default useTransactionSigner; | ||
| ``` | ||
|
|
||
| ### 8. **Building User Interface** | ||
|
|
||
| Now it's time to create the UI where users will interact with your app. Create a new file named `App.tsx` under the `/src` directory. | ||
|
|
||
| ```jsx | ||
| // src/App.tsx | ||
| import React from 'react'; | ||
| import useUserAccounts from './hooks/useAccounts'; | ||
| import useTransactionSigner from './hooks/useSignTransaction'; | ||
|
|
||
| function App() { | ||
| const { accounts, loading, error } = useUserAccounts(); | ||
| const { handleSignTransaction, pending, response, error: signError } = useTransactionSigner(); | ||
|
|
||
| return ( | ||
| <> | ||
| <h1>User's Crypto Accounts</h1> | ||
| {loading ? ( | ||
| <p>Loading...</p> | ||
| ) : error ? ( | ||
| <p>Error: {error.message}</p> | ||
| ) : ( | ||
| <ul> | ||
| {(accounts ?? []).map(({ id, name, address, currency, balance }) => ( | ||
| <li key={id}> | ||
| <p>id: {id}</p> | ||
| <p>name: {name}</p> | ||
| <p>address: {address}</p> | ||
| <p>currency: {currency}</p> | ||
| {/* Make sure to parse BigNumber */} | ||
| <p>balance: {balance.toString()}</p> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| )} | ||
| <button onClick={handleSignTransaction} disabled={pending}> | ||
| Sign Ethereum Transaction | ||
| </button> | ||
| {pending && <p>Signing...</p>} | ||
| {signError && <p>Error: {signError.toString()}</p>} | ||
| {response && <p>Transaction signed successfully: {response.toString('hex')}</p>} | ||
| </> | ||
| ); | ||
| } | ||
| export default App; | ||
| ``` |
Oops, something went wrong.