Update an approach to the contexts

- Remove a dir for providers and move it to contexts dir.
- Create a wrapper for context.
- Use a more abstract context name - `WalletContext`
- Small improvements

dapp/src/DApp.tsx

@@ -1,18 +1,14 @@
-import React, { useContext } from "react"
+import React from "react"
 import { ChakraProvider, Box, Text } from "@chakra-ui/react"
-import { useDetectThemeMode } from "./hooks"
-import { LedgerWalletAPIProvider } from "./providers"
+import { useDetectThemeMode, useWalletContext } from "./hooks"
 import theme from "./theme"
-import {
-  LedgerLiveAppContext,
-  LedgerLiveAppProvider,
-} from "./contexts/LedgerLiveAppContext"
+import { LedgerWalletAPIProvider, WalletContextProvider } from "./contexts"
 import Navbar from "./components/Navbar"
 
 function DApp() {
   useDetectThemeMode()
 
-  const { btcAccount, ethAccount } = useContext(LedgerLiveAppContext)
+  const { btcAccount, ethAccount } = useWalletContext()
 
   return (
     <Box>
@@ -27,11 +23,11 @@ function DApp() {
 function DAppProviders() {
   return (
     <LedgerWalletAPIProvider>
-      <LedgerLiveAppProvider>
+      <WalletContextProvider>
         <ChakraProvider theme={theme}>
           <DApp />
         </ChakraProvider>
-      </LedgerLiveAppProvider>
+      </WalletContextProvider>
     </LedgerWalletAPIProvider>
   )
 }

dapp/src/components/Navbar/ConnectWallet.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import React from "react"
 import { Box, Button, Image, Text } from "@chakra-ui/react"
 import { Account } from "@ledgerhq/wallet-api-client"
 import BitcoinIcon from "../../assets/bitcoin.svg"
@@ -8,14 +8,14 @@ import { BITCOIN } from "../../constants"
 import {
   useRequestBitcoinAccount,
   useRequestEthereumAccount,
+  useWalletContext,
 } from "../../hooks"
-import { LedgerLiveAppContext } from "../../contexts/LedgerLiveAppContext"
 import { formatSatoshiAmount, truncateAddress } from "../../utils"
 
 export type ConnectButtonsProps = {
   leftIcon: string
   rightIcon: string
-  account: Account | null
+  account: Account | undefined
   requestAccount: () => Promise<void>
 }
 
@@ -41,9 +41,9 @@ function ConnectButton({
 }
 
 export default function ConnectWallet() {
-  const requestBitcoinAccount = useRequestBitcoinAccount()
-  const requestEthereumAccount = useRequestEthereumAccount()
-  const { btcAccount } = useContext(LedgerLiveAppContext)
+  const { requestAccount: requestBitcoinAccount } = useRequestBitcoinAccount()
+  const { requestAccount: requestEthereumAccount } = useRequestEthereumAccount()
+  const { btcAccount, ethAccount } = useWalletContext()
 
   return (
     <Box display="flex" alignItems="center" gap="4">
@@ -59,17 +59,17 @@ export default function ConnectWallet() {
       <ConnectButton
         leftIcon={BitcoinIcon}
         rightIcon={InfoIcon}
-        account={requestBitcoinAccount.account}
+        account={btcAccount}
         requestAccount={async () => {
-          await requestBitcoinAccount.requestAccount()
+          await requestBitcoinAccount()
         }}
       />
       <ConnectButton
         leftIcon={EthereumIcon}
         rightIcon={InfoIcon}
-        account={requestEthereumAccount.account}
+        account={ethAccount}
         requestAccount={async () => {
-          await requestEthereumAccount.requestAccount()
+          await requestEthereumAccount()
         }}
       />
     </Box>

dapp/src/providers/LedgerWalletAPIProvider.tsx → dapp/src/contexts/LedgerWalletAPIProvider.tsx

@@ -19,7 +19,7 @@ type LedgerWalletAPIProviderProps = {
   children: React.ReactElement
 }
 
-export default function LedgerWalletAPIProvider({
+export function LedgerWalletAPIProvider({
   children,
 }: LedgerWalletAPIProviderProps): JSX.Element {
   const transport = getWalletAPITransport()

dapp/src/contexts/WalletContext.tsx

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

dapp/src/contexts/index.tsx

@@ -0,0 +1,2 @@
+export * from "./WalletContext"
+export * from "./LedgerWalletAPIProvider"

dapp/src/hooks/index.ts

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

dapp/src/hooks/useRequestBitcoinAccount.ts

@@ -1,21 +1,20 @@
 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"
+import { WalletContext } from "../contexts"
 
 export function useRequestBitcoinAccount(): UseRequestAccountReturn {
-  const { setBtcAccount } = useContext(LedgerLiveAppContext)
-  const requestAccountResponse = useRequestAccount()
-  const { account, requestAccount } = requestAccountResponse
+  const walletContext = useContext(WalletContext)
+  const { account, requestAccount } = useRequestAccount()
 
   useEffect(() => {
-    setBtcAccount(account || undefined)
-  }, [account, setBtcAccount])
+    walletContext?.setBtcAccount(account || undefined)
+  }, [account, walletContext])
 
   const requestBitcoinAccount = useCallback(async () => {
     await requestAccount({ currencyIds: [CURRENCY_ID_BITCOIN] })
   }, [requestAccount])
 
-  return { ...requestAccountResponse, requestAccount: requestBitcoinAccount }
+  return { requestAccount: requestBitcoinAccount }
 }

dapp/src/hooks/useRequestEthereumAccount.ts

@@ -1,21 +1,20 @@
 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"
+import { WalletContext } from "../contexts"
 
 export function useRequestEthereumAccount(): UseRequestAccountReturn {
-  const { setEthAccount } = useContext(LedgerLiveAppContext)
-  const requestAccountResponse = useRequestAccount()
-  const { account, requestAccount } = requestAccountResponse
+  const walletContext = useContext(WalletContext)
+  const { account, requestAccount } = useRequestAccount()
 
   useEffect(() => {
-    setEthAccount(account || undefined)
-  }, [account, setEthAccount])
+    walletContext?.setEthAccount(account || undefined)
+  }, [account, walletContext])
 
   const requestEthereumAccount = useCallback(async () => {
     await requestAccount({ currencyIds: [CURRENCY_ID_ETHEREUM] })
   }, [requestAccount])
 
-  return { ...requestAccountResponse, requestAccount: requestEthereumAccount }
+  return { requestAccount: requestEthereumAccount }
 }

dapp/src/hooks/useWalletContext.ts

@@ -0,0 +1,12 @@
+import { useContext } from "react"
+import { WalletContext } from "../contexts"
+
+export function useWalletContext() {
+  const context = useContext(WalletContext)
+
+  if (!context) {
+    throw new Error("WalletContext used outside of WalletContext component")
+  }
+
+  return context
+}

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

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