Save BTC account in context

We should be able to have global access to the account data. Let's add to this context.

dapp/src/DApp.tsx

@@ -1,20 +1,27 @@
-import React from "react"
-import { ChakraProvider, Box } from "@chakra-ui/react"
+import React, { useContext } from "react"
+import { ChakraProvider, Box, Text } from "@chakra-ui/react"
 import { useEmbedFeatureFlag, useDetectThemeMode } from "./hooks"
 import { LedgerWalletAPIProvider } from "./providers"
 import { getThemeConfig } from "./theme/utils/utils"
 import theme from "./theme/index"
 import Navbar from "./components/Navbar"
+import {
+  LedgerLiveAppContext,
+  LedgerLiveAppProvider,
+} from "./contexts/LedgerLiveAppProvider"
 
 function DAppContent() {
   const { isEmbed } = useEmbedFeatureFlag()
+  const { btcAccount } = useContext(LedgerLiveAppContext)
+
   let header = "Acre dApp"
   if (isEmbed === "true") header = "Ledger live - Acre dApp"
 
   return (
     <Box>
       <Navbar />
       <h1>{header}</h1>
+      {btcAccount && <Text>Account: {btcAccount.address}</Text>}
     </Box>
   )
 }
@@ -25,7 +32,9 @@ function DApp() {
   if (isEmbed === "true") {
     return (
       <LedgerWalletAPIProvider>
-        <DAppContent />
+        <LedgerLiveAppProvider>
+          <DAppContent />
+        </LedgerLiveAppProvider>
       </LedgerWalletAPIProvider>
     )
   }

dapp/src/components/Navbar/AccountInfo.tsx

@@ -1,16 +1,17 @@
 import React from "react"
 import { Box, Button, Image, Text } from "@chakra-ui/react"
-import { useRequestAccount } from "@ledgerhq/wallet-api-client-react"
 import BitcoinIcon from "../../assets/bitcoin.svg"
 import InfoIcon from "../../assets/info.svg"
 import { truncateAddress } from "../../utils"
-import { BITCOIN, CURRENCY_ID_BITCOIN } from "../../constants"
+import { BITCOIN } from "../../constants"
+import { useEmbedFeatureFlag, useRequestBitcoinAccount } from "../../hooks"
 
 export default function AccountInfo() {
-  const { account, requestAccount } = useRequestAccount()
+  const { isEmbed } = useEmbedFeatureFlag()
+  const { requestAccount, account } = useRequestBitcoinAccount()
 
   const requestBitcoinAccount = async () => {
-    await requestAccount({ currencyIds: [CURRENCY_ID_BITCOIN] })
+    if (isEmbed) await requestAccount()
   }
 
   return (

dapp/src/contexts/LedgerLiveAppProvider.tsx

@@ -0,0 +1,35 @@
+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>>
+}
+
+export const LedgerLiveAppContext = createContext<LedgerLiveAppContextValue>({
+  btcAccount: undefined,
+  setBtcAccount: () => {},
+})
+
+export function LedgerLiveAppProvider({
+  children,
+}: {
+  children: React.ReactNode
+}): React.ReactElement {
+  const [btcAccount, setBtcAccount] = useState<Account | undefined>(undefined)
+
+  const contextValue: LedgerLiveAppContextValue =
+    useMemo<LedgerLiveAppContextValue>(
+      () => ({
+        btcAccount,
+        setBtcAccount,
+      }),
+      [btcAccount, setBtcAccount],
+    )
+
+  return (
+    <LedgerLiveAppContext.Provider value={contextValue}>
+      {children}
+    </LedgerLiveAppContext.Provider>
+  )
+}

dapp/src/hooks/account-hooks.ts

@@ -0,0 +1,34 @@
+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"
+
+type UseRequestAccount = {
+  pending: boolean
+  account: Account | null
+  error: unknown
+}
+
+type RequestAccountParams = Parameters<WalletAPIClient["account"]["request"]>
+
+type UseRequestAccountReturn = {
+  requestAccount: (...params: RequestAccountParams) => Promise<void>
+} & UseRequestAccount
+
+// eslint-disable-next-line import/prefer-default-export
+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/index.ts

@@ -1,3 +1,4 @@
 export * from "./dom-hooks"
 export * from "./feature-hooks"
 export * from "./helpers-hooks"
+export * from "./account-hooks"