Basic configuration for chakra UI

dapp/.eslintrc

@@ -2,7 +2,7 @@
   "root": true,
   "extends": ["@thesis-co"],
   "rules": {
-    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
+    "import/no-extraneous-dependencies": "off",
     "import/prefer-default-export": "off"
   }
 }

dapp/package.json

@@ -15,8 +15,12 @@
     "lint:config:fix": "prettier -w '**/*.@(json|yaml|toml)'"
   },
   "dependencies": {
+    "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@ledgerhq/wallet-api-client": "^1.2.1",
     "@ledgerhq/wallet-api-client-react": "^1.1.2",
+    "framer-motion": "^10.16.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

dapp/src/DApp.tsx

@@ -1,16 +1,27 @@
 import React from "react"
+import { ChakraProvider, Button, Box } from "@chakra-ui/react"
+import { useDetectThemeMode } from "./hooks"
 import { LedgerWalletAPIProvider } from "./providers"
+import theme from "./theme"
 
 function DApp() {
-  return <h1>Ledger live - Acre dApp</h1>
+  useDetectThemeMode()
+  return (
+    <Box p={4}>
+      <h1>Ledger live - Acre dApp</h1>
+      <Button>Test button</Button>
+    </Box>
+  )
 }
 
-function DAppWrapper() {
+function DAppProviders() {
   return (
     <LedgerWalletAPIProvider>
-      <DApp />
+      <ChakraProvider theme={theme}>
+        <DApp />
+      </ChakraProvider>
     </LedgerWalletAPIProvider>
   )
 }
 
-export default DAppWrapper
+export default DAppProviders

dapp/src/hooks/index.ts

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

dapp/src/hooks/useDetectThemeMode.ts

@@ -0,0 +1,21 @@
+import { useEffect } from "react"
+import { useColorMode } from "@chakra-ui/react"
+
+export function useDetectThemeMode(): string | null {
+  const { colorMode, toggleColorMode } = useColorMode()
+  // The ledger live passes the theme mode via url.
+  // Let's detect the theme set by the user and toggle the color mode
+  const params = new URLSearchParams(window.location.search)
+  const themeMode = params.get("theme")
+
+  useEffect(() => {
+    if (
+      (themeMode === "dark" || themeMode === "light") &&
+      colorMode !== themeMode
+    ) {
+      toggleColorMode()
+    }
+  }, [colorMode, themeMode, toggleColorMode])
+
+  return themeMode
+}

dapp/src/main.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import ReactDOM from "react-dom/client"
-import DAppWrapper from "./DApp"
+import DAppProviders from "./DApp"
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <DAppWrapper />
+    <DAppProviders />
   </React.StrictMode>,
 )

dapp/src/theme/Button.ts

@@ -0,0 +1,13 @@
+import { mode } from "@chakra-ui/theme-tools"
+import type { StyleFunctionProps } from "@chakra-ui/styled-system"
+
+const Button = {
+  variants: {
+    solid: (props: StyleFunctionProps) => ({
+      backgroundColor: mode("black", "purple")(props),
+      color: "white",
+    }),
+  },
+}
+
+export default Button

dapp/src/theme/index.ts

@@ -0,0 +1,14 @@
+import { extendTheme } from "@chakra-ui/react"
+import Button from "./Button"
+import { colors } from "./utils"
+
+const defaultTheme = {
+  colors,
+  components: {
+    Button,
+  },
+}
+
+const theme = extendTheme(defaultTheme)
+
+export default theme

dapp/src/theme/utils/colors.ts

@@ -0,0 +1,7 @@
+// TODO: Currently, the correct colors have not yet been defined.
+// Let's update them later.
+export const colors = {
+  white: "#FFF",
+  black: "#000",
+  purple: "#7D00FF",
+}

dapp/src/theme/utils/index.ts

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