Merge remote-tracking branch 'origin' into acre-flow

thesis · Nov 21, 2023 · d0f3231 · d0f3231
2 parents e817254 + 4cf4d8c
commit d0f3231
Show file tree

Hide file tree

Showing 42 changed files with 14,726 additions and 3 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,3 @@
 {
-  "eslint.workingDirectories": [
-    "./core/",
-  ],
+  "eslint.workingDirectories": [{ "mode": "auto" }]
 }
diff --git a/dapp/.eslintignore b/dapp/.eslintignore
@@ -0,0 +1 @@
+dist
diff --git a/dapp/.eslintrc b/dapp/.eslintrc
@@ -0,0 +1,8 @@
+{
+  "root": true,
+  "extends": ["@thesis-co"],
+  "rules": {
+    "import/no-extraneous-dependencies": "off",
+    "import/prefer-default-export": "off"
+  }
+}
diff --git a/dapp/.gitignore b/dapp/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/dapp/.nvmrc b/dapp/.nvmrc
@@ -0,0 +1 @@
+lts/iron
diff --git a/dapp/.prettierignore b/dapp/.prettierignore
@@ -0,0 +1 @@
+dist
diff --git a/dapp/.prettierrc.js b/dapp/.prettierrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+    ...require("@thesis-co/prettier-config"),
+}
diff --git a/dapp/.tsconfig-eslint.json b/dapp/.tsconfig-eslint.json
@@ -0,0 +1 @@
+./node_modules/@thesis-co/eslint-config/.tsconfig-eslint.json
diff --git a/dapp/README.md b/dapp/README.md
@@ -0,0 +1,10 @@
+# Acre dApp
+
+## Installation
+
+1.  Install dependencies and start the app.
+    ```bash
+    yarn install
+    yarn start
+    ```
+2.  Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
diff --git a/dapp/index.html b/dapp/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/acre.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ACRE</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/dapp/manifest-ledger-live-app.json b/dapp/manifest-ledger-live-app.json
@@ -0,0 +1,30 @@
+{
+    "id": "acre",
+    "name": "ACRE",
+    "url": "http://localhost:5173/",
+    "homepageUrl": "http://localhost:5173/",
+    "icon": "http://localhost:5173/acre.svg",
+    "platform": "all",
+    "apiVersion": "2.0.0",
+    "manifestVersion": "1",
+    "branch": "stable",
+    "categories": [
+        "buy"
+    ],
+    "currencies": [
+        "bitcoin",
+        "bitcoin_testnet"
+    ],
+    "content": {
+        "shortDescription": {
+            "en": "Bitcoin Liquid Staking"
+        },
+        "description": {
+            "en": "Bitcoin Liquid Staking"
+        }
+    },
+    "permissions": [],
+    "domains": [
+        "http://*"
+    ]
+}
diff --git a/dapp/package.json b/dapp/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "dapp",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "start": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "format": "npm run lint:js && npm run lint:config",
+    "format:fix": "npm run lint:js:fix && npm run lint:config:fix",
+    "lint:js": "eslint .",
+    "lint:js:fix": "eslint . --fix",
+    "lint:config": "prettier -c '**/*.@(json|yaml|toml)'",
+    "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"
+  },
+  "devDependencies": {
+    "@thesis-co/eslint-config": "^0.6.1",
+    "@thesis/prettier-config": "github:thesis/prettier-config",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.53.0",
+    "prettier": "^3.1.0",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.5"
+  }
+}
diff --git a/dapp/public/acre.svg b/dapp/public/acre.svg
diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx
@@ -0,0 +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() {
+  useDetectThemeMode()
+  return (
+    <Box p={4}>
+      <h1>Ledger live - Acre dApp</h1>
+      <Button>Test button</Button>
+    </Box>
+  )
+}
+
+function DAppProviders() {
+  return (
+    <LedgerWalletAPIProvider>
+      <ChakraProvider theme={theme}>
+        <DApp />
+      </ChakraProvider>
+    </LedgerWalletAPIProvider>
+  )
+}
+
+export default DAppProviders
diff --git a/dapp/src/hooks/index.ts b/dapp/src/hooks/index.ts
@@ -0,0 +1 @@
+export * from "./useDetectThemeMode"
diff --git a/dapp/src/hooks/useDetectThemeMode.ts b/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
+}
diff --git a/dapp/src/main.tsx b/dapp/src/main.tsx
@@ -0,0 +1,9 @@
+import React from "react"
+import ReactDOM from "react-dom/client"
+import DAppProviders from "./DApp"
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <DAppProviders />
+  </React.StrictMode>,
+)
diff --git a/dapp/src/providers/LedgerWalletAPIProvider.tsx b/dapp/src/providers/LedgerWalletAPIProvider.tsx
@@ -0,0 +1,27 @@
+import React from "react"
+import { Transport, WindowMessageTransport } from "@ledgerhq/wallet-api-client"
+import { WalletAPIProvider } from "@ledgerhq/wallet-api-client-react"
+
+function getWalletAPITransport(): Transport {
+  if (typeof window === "undefined") {
+    return {
+      onMessage: undefined,
+      send: () => {},
+    }
+  }
+
+  const transport = new WindowMessageTransport()
+  transport.connect()
+  return transport
+}
+
+type LedgerWalletAPIProviderProps = {
+  children: React.ReactElement
+}
+
+export default function LedgerWalletAPIProvider({
+  children,
+}: LedgerWalletAPIProviderProps): JSX.Element {
+  const transport = getWalletAPITransport()
+  return <WalletAPIProvider transport={transport}>{children}</WalletAPIProvider>
+}
diff --git a/dapp/src/providers/index.ts b/dapp/src/providers/index.ts
@@ -0,0 +1 @@
+export { default as LedgerWalletAPIProvider } from "./LedgerWalletAPIProvider"
diff --git a/dapp/src/theme/Button.ts b/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
diff --git a/dapp/src/theme/index.ts b/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
diff --git a/dapp/src/theme/utils/colors.ts b/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",
+}
diff --git a/dapp/src/theme/utils/index.ts b/dapp/src/theme/utils/index.ts
@@ -0,0 +1 @@
+export * from "./colors"
diff --git a/dapp/src/vite-env.d.ts b/dapp/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/dapp/tsconfig.json b/dapp/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/dapp/tsconfig.node.json b/dapp/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/dapp/vite.config.ts b/dapp/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+
+export default defineConfig({
+  plugins: [react()],
+})
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		./node_modules/@thesis-co/eslint-config/.tsconfig-eslint.json
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as LedgerWalletAPIProvider } from "./LedgerWalletAPIProvider"