From 3139bc83e08686475c3e01cbda95357c72e1d5c3 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Thu, 16 Nov 2023 09:57:23 +0100 Subject: [PATCH] Connect the dApp with Ethereum account --- dapp/manifest-ledger-live-app.json | 4 +- dapp/src/assets/ethereum.svg | 16 ++++ dapp/src/components/Navbar/AccountInfo.tsx | 34 -------- dapp/src/components/Navbar/ConnectWallet.tsx | 84 ++++++++++++++++++++ dapp/src/components/Navbar/index.tsx | 4 +- dapp/src/constants/chains.ts | 3 + dapp/src/contexts/LedgerLiveAppProvider.tsx | 9 ++- dapp/src/hooks/account-hooks.ts | 23 +++++- 8 files changed, 136 insertions(+), 41 deletions(-) create mode 100644 dapp/src/assets/ethereum.svg delete mode 100644 dapp/src/components/Navbar/AccountInfo.tsx create mode 100644 dapp/src/components/Navbar/ConnectWallet.tsx diff --git a/dapp/manifest-ledger-live-app.json b/dapp/manifest-ledger-live-app.json index 18c856b6d..9844f13f1 100644 --- a/dapp/manifest-ledger-live-app.json +++ b/dapp/manifest-ledger-live-app.json @@ -13,7 +13,9 @@ ], "currencies": [ "bitcoin", - "bitcoin_testnet" + "bitcoin_testnet", + "ethereum", + "ethereum_goerli" ], "content": { "shortDescription": { diff --git a/dapp/src/assets/ethereum.svg b/dapp/src/assets/ethereum.svg new file mode 100644 index 000000000..4c179f420 --- /dev/null +++ b/dapp/src/assets/ethereum.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/dapp/src/components/Navbar/AccountInfo.tsx b/dapp/src/components/Navbar/AccountInfo.tsx deleted file mode 100644 index cfa9111b2..000000000 --- a/dapp/src/components/Navbar/AccountInfo.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react" -import { Box, Button, Image, Text } from "@chakra-ui/react" -import BitcoinIcon from "../../assets/bitcoin.svg" -import InfoIcon from "../../assets/info.svg" -import { truncateAddress } from "../../utils" -import { BITCOIN } from "../../constants" -import { useEmbedFeatureFlag, useRequestBitcoinAccount } from "../../hooks" - -export default function AccountInfo() { - const { isEmbed } = useEmbedFeatureFlag() - const { requestAccount, account } = useRequestBitcoinAccount() - - const requestBitcoinAccount = async () => { - if (isEmbed) await requestAccount() - } - - return ( - - - Balance - {!account ? "0.00" : account.balance.toString()} - {BITCOIN.token} - - - - ) -} diff --git a/dapp/src/components/Navbar/ConnectWallet.tsx b/dapp/src/components/Navbar/ConnectWallet.tsx new file mode 100644 index 000000000..95895c4c6 --- /dev/null +++ b/dapp/src/components/Navbar/ConnectWallet.tsx @@ -0,0 +1,84 @@ +import React, { useContext } from "react" +import { Box, Button, Image, Text } from "@chakra-ui/react" +import { Account } from "@ledgerhq/wallet-api-client" +import BitcoinIcon from "../../assets/bitcoin.svg" +import EthereumIcon from "../../assets/ethereum.svg" +import InfoIcon from "../../assets/info.svg" +import { truncateAddress } from "../../utils" +import { BITCOIN } from "../../constants" +import { + useEmbedFeatureFlag, + useRequestBitcoinAccount, + useRequestEthereumAccount, +} from "../../hooks" +import { LedgerLiveAppContext } from "../../contexts/LedgerLiveAppProvider" + +export type ConnectButtonsProps = { + leftIcon: string + rightIcon: string + account: Account | null + requestAccount: () => Promise +} + +function ConnectButton({ + leftIcon, + rightIcon, + account, + requestAccount, +}: ConnectButtonsProps) { + return ( + + ) +} + +function LedgerLiveAppConnectWallet() { + const requestBitcoinAccount = useRequestBitcoinAccount() + const requestEthereumAccount = useRequestEthereumAccount() + + return ( + <> + { + await requestBitcoinAccount.requestAccount() + }} + /> + { + await requestEthereumAccount.requestAccount() + }} + /> + + ) +} + +export default function ConnectWallet() { + const { isEmbed } = useEmbedFeatureFlag() + // TODO: If isEmbed is set to false, let's use a different context + const { btcAccount } = useContext(LedgerLiveAppContext) + + return ( + + + Balance + + {!btcAccount ? "0.00" : btcAccount.balance.toString()} + + {BITCOIN.token} + + {isEmbed && } + + ) +} diff --git a/dapp/src/components/Navbar/index.tsx b/dapp/src/components/Navbar/index.tsx index 40e0de588..ef0221cc7 100644 --- a/dapp/src/components/Navbar/index.tsx +++ b/dapp/src/components/Navbar/index.tsx @@ -1,11 +1,11 @@ import React from "react" import { Box } from "@chakra-ui/react" -import AccountInfo from "./AccountInfo" +import ConnectWallet from "./ConnectWallet" export default function Navbar() { return ( - + ) } diff --git a/dapp/src/constants/chains.ts b/dapp/src/constants/chains.ts index 594cfac32..57b08c0de 100644 --- a/dapp/src/constants/chains.ts +++ b/dapp/src/constants/chains.ts @@ -5,3 +5,6 @@ export const BITCOIN = { export const CURRENCY_ID_BITCOIN = import.meta.env.VITE_USE_TESTNET === "true" ? "bitcoin_testnet" : "bitcoin" + +export const CURRENCY_ID_ETHEREUM = + import.meta.env.VITE_USE_TESTNET === "true" ? "ethereum_goerli" : "ethereum" diff --git a/dapp/src/contexts/LedgerLiveAppProvider.tsx b/dapp/src/contexts/LedgerLiveAppProvider.tsx index 9a7d61c03..576462abe 100644 --- a/dapp/src/contexts/LedgerLiveAppProvider.tsx +++ b/dapp/src/contexts/LedgerLiveAppProvider.tsx @@ -4,11 +4,15 @@ import React, { createContext, useMemo, useState } from "react" type LedgerLiveAppContextValue = { btcAccount: Account | undefined setBtcAccount: React.Dispatch> + ethAccount: Account | undefined + setEthAccount: React.Dispatch> } export const LedgerLiveAppContext = createContext({ btcAccount: undefined, setBtcAccount: () => {}, + ethAccount: undefined, + setEthAccount: () => {}, }) export function LedgerLiveAppProvider({ @@ -17,14 +21,17 @@ export function LedgerLiveAppProvider({ children: React.ReactNode }): React.ReactElement { const [btcAccount, setBtcAccount] = useState(undefined) + const [ethAccount, setEthAccount] = useState(undefined) const contextValue: LedgerLiveAppContextValue = useMemo( () => ({ btcAccount, setBtcAccount, + ethAccount, + setEthAccount, }), - [btcAccount, setBtcAccount], + [btcAccount, setBtcAccount, ethAccount, setEthAccount], ) return ( diff --git a/dapp/src/hooks/account-hooks.ts b/dapp/src/hooks/account-hooks.ts index a2cace37d..72ea34466 100644 --- a/dapp/src/hooks/account-hooks.ts +++ b/dapp/src/hooks/account-hooks.ts @@ -2,7 +2,7 @@ import { Account, WalletAPIClient } from "@ledgerhq/wallet-api-client" import { useRequestAccount } from "@ledgerhq/wallet-api-client-react" import { useCallback, useContext, useEffect } from "react" import { LedgerLiveAppContext } from "../contexts/LedgerLiveAppProvider" -import { CURRENCY_ID_BITCOIN } from "../constants" +import { CURRENCY_ID_BITCOIN, CURRENCY_ID_ETHEREUM } from "../constants" type UseRequestAccount = { pending: boolean @@ -10,13 +10,14 @@ type UseRequestAccount = { error: unknown } -type RequestAccountParams = Parameters +export type RequestAccountParams = Parameters< + WalletAPIClient["account"]["request"] +> type UseRequestAccountReturn = { requestAccount: (...params: RequestAccountParams) => Promise } & UseRequestAccount -// eslint-disable-next-line import/prefer-default-export export function useRequestBitcoinAccount(): UseRequestAccountReturn { const { setBtcAccount } = useContext(LedgerLiveAppContext) const requestAccountResponse = useRequestAccount() @@ -32,3 +33,19 @@ export function useRequestBitcoinAccount(): UseRequestAccountReturn { return { ...requestAccountResponse, requestAccount: requestBitcoinAccount } } + +export function useRequestEthereumAccount(): UseRequestAccountReturn { + const { setEthAccount } = useContext(LedgerLiveAppContext) + const requestAccountResponse = useRequestAccount() + const { account, requestAccount } = requestAccountResponse + + useEffect(() => { + setEthAccount(account || undefined) + }, [account, setEthAccount]) + + const requestEthereumAccount = useCallback(async () => { + await requestAccount({ currencyIds: [CURRENCY_ID_ETHEREUM] }) + }, [requestAccount]) + + return { ...requestAccountResponse, requestAccount: requestEthereumAccount } +}