Connect wallet with ledger live app

dapp/.env

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

dapp/manifest-ledger-live-app.json

@@ -23,7 +23,7 @@
             "en": "Bitcoin Liquid Staking"
         }
     },
-    "permissions": [],
+    "permissions": ["account.request"],
     "domains": [
         "http://*"
     ]

dapp/src/DApp.tsx

@@ -1,19 +1,20 @@
 import React from "react"
-import { ChakraProvider, Button, Box } from "@chakra-ui/react"
+import { ChakraProvider, Box } 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"
 
 function DAppContent() {
   const { isEmbed } = useEmbedFeatureFlag()
   let header = "Acre dApp"
   if (isEmbed === "true") header = "Ledger live - Acre dApp"
 
   return (
-    <Box p={4}>
+    <Box>
+      <Navbar />
       <h1>{header}</h1>
-      <Button>Test button</Button>
     </Box>
   )
 }

dapp/src/components/Navbar/AccountInfo.tsx

@@ -0,0 +1,33 @@
+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"
+
+export default function AccountInfo() {
+  const { account, requestAccount } = useRequestAccount()
+
+  const requestBitcoinAccount = async () => {
+    await requestAccount({ currencyIds: [CURRENCY_ID_BITCOIN] })
+  }
+
+  return (
+    <Box display="flex" alignItems="center" gap="4">
+      <Box display="flex" gap="2">
+        <Text>Balance</Text>
+        <Text as="b">{!account ? "0.00" : account.balance.toString()}</Text>
+        <Text>{BITCOIN.token}</Text>
+      </Box>
+      <Button
+        variant="outline"
+        leftIcon={<Image src={BitcoinIcon} />}
+        rightIcon={!account ? <Image src={InfoIcon} /> : undefined}
+        onClick={requestBitcoinAccount}
+      >
+        {account ? truncateAddress(account.address) : "Not connected"}
+      </Button>
+    </Box>
+  )
+}

dapp/src/components/Navbar/index.tsx

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

dapp/src/constants/chains.ts

@@ -0,0 +1,7 @@
+export const BITCOIN = {
+  name: "Bitcoin",
+  token: "BTC",
+}
+
+export const CURRENCY_ID_BITCOIN =
+  import.meta.env.VITE_USE_TESTNET === "true" ? "bitcoin_testnet" : "bitcoin"

dapp/src/constants/index.ts

@@ -1 +1,2 @@
 export * from "./local-storage"
+export * from "./chains"

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),
+      backgroundColor: mode("black", "black")(props),
       color: "white",
     }),
+    outline: (props: StyleFunctionProps) => ({
+      color: mode("black", "black")(props),
+      borderColor: "black",
+    }),
   },
 }
 

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/index"
 
 export const defaultTheme = {
   colors,
+  styles: {
+    global: (props: StyleFunctionProps) => ({
+      "html, body, #root, #root > div": {
+        backgroundColor: mode("grey", "grey")(props),
+        minHeight: "100vh",
+      },
+    }),
+  },
   components: {
     Button,
   },

dapp/src/theme/utils/colors.ts

@@ -5,4 +5,6 @@ export const colors = {
   white: "#FFF",
   black: "#000",
   purple: "#7D00FF",
+  grey: "#ECECEC",
+  darkGrey: "#37393C",
 }

dapp/src/utils/index.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line import/prefer-default-export
+export function truncateAddress(address: string): string {
+  return `${address.slice(0, 6)}…${address.slice(-5)}`
+}