Connect wallet with ledger live app

dapp/.env

@@ -0,0 +1 @@
+VITE_USE_TESTNET=true

dapp/manifest-ledger-live-app.json

@@ -13,7 +13,9 @@
     ],
     "currencies": [
         "bitcoin",
-        "bitcoin_testnet"
+        "bitcoin_testnet",
+        "ethereum",
+        "ethereum_goerli"
     ],
     "content": {
         "shortDescription": {
@@ -23,7 +25,9 @@
             "en": "Bitcoin Liquid Staking"
         }
     },
-    "permissions": [],
+    "permissions": [
+        "account.request"
+    ],
     "domains": [
         "http://*"
     ]

dapp/src/DApp.tsx

@@ -1,25 +1,37 @@
-import React from "react"
-import { ChakraProvider, Button, Box } from "@chakra-ui/react"
+import React, { useContext } from "react"
+import { ChakraProvider, Box, Text } from "@chakra-ui/react"
 import { useDetectThemeMode } from "./hooks"
 import { LedgerWalletAPIProvider } from "./providers"
 import theme from "./theme"
+import {
+  LedgerLiveAppContext,
+  LedgerLiveAppProvider,
+} from "./contexts/LedgerLiveAppContext"
+import Navbar from "./components/Navbar"
 
 function DApp() {
   useDetectThemeMode()
+
+  const { btcAccount, ethAccount } = useContext(LedgerLiveAppContext)
+
   return (
-    <Box p={4}>
+    <Box>
+      <Navbar />
       <h1>Ledger live - Acre dApp</h1>
-      <Button>Test button</Button>
+      {btcAccount && <Text>Account: {btcAccount.address}</Text>}
+      {ethAccount && <Text>Account: {ethAccount.address}</Text>}
     </Box>
   )
 }
 
 function DAppProviders() {
   return (
     <LedgerWalletAPIProvider>
-      <ChakraProvider theme={theme}>
-        <DApp />
-      </ChakraProvider>
+      <LedgerLiveAppProvider>
+        <ChakraProvider theme={theme}>
+          <DApp />
+        </ChakraProvider>
+      </LedgerLiveAppProvider>
     </LedgerWalletAPIProvider>
   )
 }

dapp/src/components/Navbar/ConnectWallet.tsx

@@ -0,0 +1,77 @@
+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 { BITCOIN } from "../../constants"
+import {
+  useRequestBitcoinAccount,
+  useRequestEthereumAccount,
+} from "../../hooks"
+import { LedgerLiveAppContext } from "../../contexts/LedgerLiveAppContext"
+import { formatSatoshiAmount, truncateAddress } from "../../utils"
+
+export type ConnectButtonsProps = {
+  leftIcon: string
+  rightIcon: string
+  account: Account | null
+  requestAccount: () => Promise<void>
+}
+
+function ConnectButton({
+  leftIcon,
+  rightIcon,
+  account,
+  requestAccount,
+}: ConnectButtonsProps) {
+  const styles = !account ? { color: "error", borderColor: "error" } : undefined
+  return (
+    <Button
+      variant="outline"
+      sx={styles}
+      leftIcon={<Image src={leftIcon} />}
+      // TODO: Add a tooltip here
+      rightIcon={!account ? <Image src={rightIcon} /> : undefined}
+      onClick={requestAccount}
+    >
+      {account ? truncateAddress(account.address) : "Not connected"}
+    </Button>
+  )
+}
+
+export default function ConnectWallet() {
+  const requestBitcoinAccount = useRequestBitcoinAccount()
+  const requestEthereumAccount = useRequestEthereumAccount()
+  const { btcAccount } = useContext(LedgerLiveAppContext)
+
+  return (
+    <Box display="flex" alignItems="center" gap="4">
+      <Box display="flex" gap="2">
+        <Text>Balance</Text>
+        <Text as="b">
+          {!btcAccount || btcAccount?.balance.isZero()
+            ? "0.00"
+            : formatSatoshiAmount(btcAccount.balance.toString())}
+        </Text>
+        <Text>{BITCOIN.token}</Text>
+      </Box>
+      <ConnectButton
+        leftIcon={BitcoinIcon}
+        rightIcon={InfoIcon}
+        account={requestBitcoinAccount.account}
+        requestAccount={async () => {
+          await requestBitcoinAccount.requestAccount()
+        }}
+      />
+      <ConnectButton
+        leftIcon={EthereumIcon}
+        rightIcon={InfoIcon}
+        account={requestEthereumAccount.account}
+        requestAccount={async () => {
+          await requestEthereumAccount.requestAccount()
+        }}
+      />
+    </Box>
+  )
+}

dapp/src/components/Navbar/index.tsx

@@ -0,0 +1,11 @@
+import React from "react"
+import { Box } from "@chakra-ui/react"
+import ConnectWallet from "./ConnectWallet"
+
+export default function Navbar() {
+  return (
+    <Box p={4} display="flex" justifyContent="end">
+      <ConnectWallet />
+    </Box>
+  )
+}

dapp/src/constants/chains.ts

@@ -0,0 +1,10 @@
+export const BITCOIN = {
+  name: "Bitcoin",
+  token: "BTC",
+}
+
+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"

dapp/src/constants/index.ts

@@ -0,0 +1 @@
+export * from "./chains"

dapp/src/contexts/LedgerLiveAppContext.tsx

@@ -0,0 +1,42 @@
+import { Account } from "@ledgerhq/wallet-api-client"
+import React, { createContext, useMemo, useState } from "react"
+
+type LedgerLiveAppContextValue = {
+  btcAccount: Account | undefined
+  setBtcAccount: React.Dispatch<React.SetStateAction<Account | undefined>>
+  ethAccount: Account | undefined
+  setEthAccount: React.Dispatch<React.SetStateAction<Account | undefined>>
+}
+
+export const LedgerLiveAppContext = createContext<LedgerLiveAppContextValue>({
+  btcAccount: undefined,
+  setBtcAccount: () => {},
+  ethAccount: undefined,
+  setEthAccount: () => {},
+})
+
+export function LedgerLiveAppProvider({
+  children,
+}: {
+  children: React.ReactNode
+}): React.ReactElement {
+  const [btcAccount, setBtcAccount] = useState<Account | undefined>(undefined)
+  const [ethAccount, setEthAccount] = useState<Account | undefined>(undefined)
+
+  const contextValue: LedgerLiveAppContextValue =
+    useMemo<LedgerLiveAppContextValue>(
+      () => ({
+        btcAccount,
+        setBtcAccount,
+        ethAccount,
+        setEthAccount,
+      }),
+      [btcAccount, setBtcAccount, ethAccount, setEthAccount],
+    )
+
+  return (
+    <LedgerLiveAppContext.Provider value={contextValue}>
+      {children}
+    </LedgerLiveAppContext.Provider>
+  )
+}

dapp/src/hooks/index.ts

@@ -1 +1,3 @@
 export * from "./useDetectThemeMode"
+export * from "./useRequestBitcoinAccount"
+export * from "./useRequestEthereumAccount"

dapp/src/hooks/useRequestBitcoinAccount.ts

@@ -0,0 +1,21 @@
+import { useRequestAccount } from "@ledgerhq/wallet-api-client-react"
+import { useCallback, useContext, useEffect } from "react"
+import { LedgerLiveAppContext } from "../contexts/LedgerLiveAppContext"
+import { CURRENCY_ID_BITCOIN } from "../constants"
+import { UseRequestAccountReturn } from "../types"
+
+export function useRequestBitcoinAccount(): UseRequestAccountReturn {
+  const { setBtcAccount } = useContext(LedgerLiveAppContext)
+  const requestAccountResponse = useRequestAccount()
+  const { account, requestAccount } = requestAccountResponse
+
+  useEffect(() => {
+    setBtcAccount(account || undefined)
+  }, [account, setBtcAccount])
+
+  const requestBitcoinAccount = useCallback(async () => {
+    await requestAccount({ currencyIds: [CURRENCY_ID_BITCOIN] })
+  }, [requestAccount])
+
+  return { ...requestAccountResponse, requestAccount: requestBitcoinAccount }
+}

dapp/src/hooks/useRequestEthereumAccount.ts

@@ -0,0 +1,21 @@
+import { useRequestAccount } from "@ledgerhq/wallet-api-client-react"
+import { useCallback, useContext, useEffect } from "react"
+import { LedgerLiveAppContext } from "../contexts/LedgerLiveAppContext"
+import { CURRENCY_ID_ETHEREUM } from "../constants"
+import { UseRequestAccountReturn } from "../types"
+
+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 }
+}

dapp/src/theme/Button.ts

@@ -2,11 +2,18 @@ import { mode } from "@chakra-ui/theme-tools"
 import type { StyleFunctionProps } from "@chakra-ui/styled-system"
 
 const Button = {
+  baseStyle: {
+    rounded: "none",
+  },
   variants: {
     solid: (props: StyleFunctionProps) => ({
       backgroundColor: mode("black", "purple")(props),
       color: "white",
     }),
+    outline: (props: StyleFunctionProps) => ({
+      color: mode("black", "grey.80")(props),
+      borderColor: mode("black", "grey.50")(props),
+    }),
   },
 }
 

dapp/src/theme/index.ts

@@ -1,9 +1,19 @@
-import { extendTheme } from "@chakra-ui/react"
+import { StyleFunctionProps, extendTheme } from "@chakra-ui/react"
+import { mode } from "@chakra-ui/theme-tools"
 import Button from "./Button"
 import { colors } from "./utils"
 
 const defaultTheme = {
   colors,
+  styles: {
+    global: (props: StyleFunctionProps) => ({
+      "html, body, #root, #root > div": {
+        backgroundColor: mode("lightGrey", "darkGrey")(props),
+        color: mode("black", "grey.80")(props),
+        minHeight: "100vh",
+      },
+    }),
+  },
   components: {
     Button,
   },

dapp/src/theme/utils/colors.ts

@@ -4,4 +4,11 @@ export const colors = {
   white: "#FFF",
   black: "#000",
   purple: "#7D00FF",
+  error: "#F00",
+  grey: {
+    50: "rgba(255, 255, 255, 0.50)",
+    80: "rgba(255, 255, 255, 0.80)",
+  },
+  lightGrey: "#ECECEC",
+  darkGrey: "#1A1B1D",
 }

dapp/src/types/index.ts

@@ -0,0 +1 @@
+export * from "./ledger-live-app"

dapp/src/types/ledger-live-app.ts

@@ -0,0 +1,13 @@
+import { Account, WalletAPIClient } from "@ledgerhq/wallet-api-client"
+
+type UseRequestAccount = {
+  pending: boolean
+  account: Account | null
+  error: unknown
+}
+
+type RequestAccountParams = Parameters<WalletAPIClient["account"]["request"]>
+
+export type UseRequestAccountReturn = {
+  requestAccount: (...params: RequestAccountParams) => Promise<void>
+} & UseRequestAccount

dapp/src/utils/address.ts

@@ -0,0 +1,3 @@
+export function truncateAddress(address: string): string {
+  return `${address.slice(0, 6)}…${address.slice(-5)}`
+}

dapp/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./numbers"
+export * from "./address"