Connect wallet with ledger live app (#36)

This PR adds the possibility to request access to a user’s account in
the ledger live app. To do this, we need to extend the permissions in
the manifest file - `account.request`. When the user has selected an
account, let's save it in a special context for global access.

### What has been done

- Create an environment variable to switch the test network to the
regular one - `VITE_USE_TESTNET`
- Create a context for an account to have global access to it.
- Change the style for a button - Styles are still not perfect but let's
correct that in a separate task.
- Update global styles
- Add functions to format the token amount

### UI

![Screenshot 2023-11-17 at 13 04
06](https://github.com/thesis/acre/assets/23117945/a7f5d7c4-f351-4377-bcc0-5c9b028f2e2e)

dapp/.env

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

dapp/manifest-ledger-live-app.json

@@ -9,7 +9,7 @@
   "manifestVersion": "1",
   "branch": "stable",
   "categories": ["buy"],
-  "currencies": ["bitcoin", "bitcoin_testnet"],
+  "currencies": ["bitcoin", "bitcoin_testnet", "ethereum", "ethereum_goerli"],
   "content": {
     "shortDescription": {
       "en": "Bitcoin Liquid Staking"
@@ -18,6 +18,6 @@
       "en": "Bitcoin Liquid Staking"
     }
   },
-  "permissions": [],
+  "permissions": ["account.request"],
   "domains": ["http://*"]
 }

dapp/src/DApp.tsx

@@ -1,25 +1,33 @@
 import React from "react"
-import { ChakraProvider, Button, Box } from "@chakra-ui/react"
-import { useDetectThemeMode } from "./hooks"
-import { LedgerWalletAPIProvider } from "./providers"
+import { ChakraProvider, Box, Text } from "@chakra-ui/react"
+import { useDetectThemeMode, useWalletContext } from "./hooks"
 import theme from "./theme"
+import { LedgerWalletAPIProvider, WalletContextProvider } from "./contexts"
+import Navbar from "./components/Navbar"
 
 function DApp() {
   useDetectThemeMode()
+
+  const { btcAccount, ethAccount } = useWalletContext()
+
   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>
+      <WalletContextProvider>
+        <ChakraProvider theme={theme}>
+          <DApp />
+        </ChakraProvider>
+      </WalletContextProvider>
     </LedgerWalletAPIProvider>
   )
 }

dapp/src/components/Navbar/ConnectWallet.tsx

@@ -0,0 +1,77 @@
+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"
+import EthereumIcon from "../../assets/ethereum.svg"
+import InfoIcon from "../../assets/info.svg"
+import { BITCOIN } from "../../constants"
+import {
+  useRequestBitcoinAccount,
+  useRequestEthereumAccount,
+  useWalletContext,
+} from "../../hooks"
+import { formatSatoshiAmount, truncateAddress } from "../../utils"
+
+export type ConnectButtonsProps = {
+  leftIcon: string
+  rightIcon: string
+  account: Account | undefined
+  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 { requestAccount: requestBitcoinAccount } = useRequestBitcoinAccount()
+  const { requestAccount: requestEthereumAccount } = useRequestEthereumAccount()
+  const { btcAccount, ethAccount } = useWalletContext()
+
+  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.symbol}</Text>
+      </Box>
+      <ConnectButton
+        leftIcon={BitcoinIcon}
+        rightIcon={InfoIcon}
+        account={btcAccount}
+        requestAccount={async () => {
+          await requestBitcoinAccount()
+        }}
+      />
+      <ConnectButton
+        leftIcon={EthereumIcon}
+        rightIcon={InfoIcon}
+        account={ethAccount}
+        requestAccount={async () => {
+          await requestEthereumAccount()
+        }}
+      />
+    </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/currency.ts

@@ -0,0 +1,19 @@
+import { Currency } from "../types"
+
+export const BITCOIN: Currency = {
+  name: "Bitcoin",
+  symbol: "BTC",
+  decimals: 8,
+}
+
+export const ETHEREUM: Currency = {
+  name: "Ethereum",
+  symbol: "ETH",
+  decimals: 18,
+}
+
+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 "./currency"

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 +1,4 @@
 export * from "./useDetectThemeMode"
+export * from "./useRequestBitcoinAccount"
+export * from "./useRequestEthereumAccount"
+export * from "./useWalletContext"

dapp/src/hooks/useRequestBitcoinAccount.ts

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

dapp/src/hooks/useRequestEthereumAccount.ts

@@ -0,0 +1,20 @@
+import { useRequestAccount } from "@ledgerhq/wallet-api-client-react"
+import { useCallback, useContext, useEffect } from "react"
+import { CURRENCY_ID_ETHEREUM } from "../constants"
+import { UseRequestAccountReturn } from "../types"
+import { WalletContext } from "../contexts"
+
+export function useRequestEthereumAccount(): UseRequestAccountReturn {
+  const walletContext = useContext(WalletContext)
+  const { account, requestAccount } = useRequestAccount()
+
+  useEffect(() => {
+    walletContext?.setEthAccount(account || undefined)
+  }, [account, walletContext])
+
+  const requestEthereumAccount = useCallback(async () => {
+    await requestAccount({ currencyIds: [CURRENCY_ID_ETHEREUM] })
+  }, [requestAccount])
+
+  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/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,18 @@
-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) => ({
+      body: {
+        backgroundColor: mode("lightGrey", "darkGrey")(props),
+        color: mode("black", "grey.80")(props),
+      },
+    }),
+  },
   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/currency.ts

@@ -0,0 +1,5 @@
+export type Currency = {
+  name: string
+  symbol: string
+  decimals: number
+}

dapp/src/types/index.ts

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