Basic configuration for chakra UI

We would like to be able to change the theme mode for the dApp. The mode should be detected for ledger live apps. Let's use an external chakra UI lib to create custom styles for components.

dapp/package.json

@@ -17,8 +17,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,24 +1,50 @@
 import React from "react"
+import { ChakraProvider, Button, Box } from "@chakra-ui/react"
 import { useEmbedFeatureFlag } from "./hooks"
 import { LedgerWalletAPIProvider } from "./providers"
+import { getThemeConfig } from "./theme/utils/utils"
+import theme from "./theme/index"
 
-function DApp() {
+function DAppContent() {
   const { isEmbed } = useEmbedFeatureFlag()
-  if (isEmbed === "true") return <h1>Ledger live - Acre dApp</h1>
-  return <h1>Acre dApp</h1>
+  let header = "Acre dApp"
+  if (isEmbed === "true") header = "Ledger live - Acre dApp"
+
+  return (
+    <Box p={4}>
+      <h1>{header}</h1>
+      <Button>Test button</Button>
+    </Box>
+  )
 }
 
-function DAppWrapper() {
+function DApp() {
   const { isEmbed } = useEmbedFeatureFlag()
 
   if (isEmbed === "true") {
     return (
       <LedgerWalletAPIProvider>
-        <DApp />
+        <DAppContent />
       </LedgerWalletAPIProvider>
     )
   }
-  return <DApp />
+  return <DAppContent />
+}
+
+function DAppProviders() {
+  const params = new URLSearchParams(window.location.search)
+  const themeMode = params.get("theme")
+
+  return (
+    <ChakraProvider
+      theme={{
+        ...theme,
+        config: getThemeConfig(themeMode),
+      }}
+    >
+      <DApp />
+    </ChakraProvider>
+  )
 }
 
-export default DAppWrapper
+export default DAppProviders

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/index"
+
+export const defaultTheme = {
+  colors,
+  components: {
+    Button,
+  },
+}
+
+const theme = extendTheme(defaultTheme)
+
+export default theme

dapp/src/theme/utils/colors.ts

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

dapp/src/theme/utils/index.ts

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

dapp/src/theme/utils/utils.ts

@@ -0,0 +1,9 @@
+// For the ledger live app, we should detect the theme set for the user.
+// Otherwise, let's set the mode to light by default.
+// eslint-disable-next-line import/prefer-default-export
+export function getThemeConfig(theme: string | null) {
+  return {
+    initialColorMode: theme ?? "light",
+    useSystemColorMode: false,
+  }
+}