From b0699495489aee49bb4823cc12ac56309811560b Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Mon, 13 Nov 2023 15:35:58 +0100
Subject: [PATCH 01/11] Add a basic configuration for ledger live app

---
 dapp/.eslintrc                                |  5 +-
 dapp/manifest-ledger-live-app.json            | 30 +++++++
 dapp/package.json                             |  2 +
 dapp/src/main.tsx                             | 17 +++-
 .../src/providers/LedgerWalletAPIProvider.tsx | 27 ++++++
 dapp/src/providers/index.ts                   |  2 +
 dapp/yarn.lock                                | 87 ++++++++++++++++++-
 7 files changed, 166 insertions(+), 4 deletions(-)
 create mode 100644 dapp/manifest-ledger-live-app.json
 create mode 100644 dapp/src/providers/LedgerWalletAPIProvider.tsx
 create mode 100644 dapp/src/providers/index.ts

diff --git a/dapp/.eslintrc b/dapp/.eslintrc
index 15eda3013..ee5a522e4 100644
--- a/dapp/.eslintrc
+++ b/dapp/.eslintrc
@@ -1,4 +1,7 @@
 {
   "root": true,
-  "extends": ["@thesis-co"]
+  "extends": ["@thesis-co"],
+  "rules": {
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
+  }
 }
diff --git a/dapp/manifest-ledger-live-app.json b/dapp/manifest-ledger-live-app.json
new file mode 100644
index 000000000..6a8414862
--- /dev/null
+++ b/dapp/manifest-ledger-live-app.json
@@ -0,0 +1,30 @@
+{
+    "id": "acre",
+    "name": "Acre",
+    "url": "http://localhost:5173?embed=true",
+    "homepageUrl": "http://localhost:5173?embed=true",
+    "icon": "https://cdn.live.ledger.com/icons/platform/moonpay.png",
+    "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
index c56624990..da7f674ec 100644
--- a/dapp/package.json
+++ b/dapp/package.json
@@ -16,6 +16,8 @@
     "lint:config:fix": "prettier -w '**/*.@(json|yaml|toml)'"
   },
   "dependencies": {
+    "@ledgerhq/wallet-api-client": "^1.2.1",
+    "@ledgerhq/wallet-api-client-react": "^1.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/dapp/src/main.tsx b/dapp/src/main.tsx
index 50f340bcd..934df18d8 100644
--- a/dapp/src/main.tsx
+++ b/dapp/src/main.tsx
@@ -1,9 +1,24 @@
 import React from "react"
 import ReactDOM from "react-dom/client"
 import App from "./App"
+import { LedgerWalletAPIProvider } from "./providers"
+
+function DAppProvider() {
+  const params = new URLSearchParams(window.location.search)
+  const isEmbed = params.get("embed")
+
+  if (isEmbed) {
+    return (
+      <LedgerWalletAPIProvider>
+        <App />
+      </LedgerWalletAPIProvider>
+    )
+  }
+  return <App />
+}
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <App />
+    <DAppProvider />
   </React.StrictMode>,
 )
diff --git a/dapp/src/providers/LedgerWalletAPIProvider.tsx b/dapp/src/providers/LedgerWalletAPIProvider.tsx
new file mode 100644
index 000000000..3581cad6f
--- /dev/null
+++ 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
new file mode 100644
index 000000000..0c65e8536
--- /dev/null
+++ b/dapp/src/providers/index.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as LedgerWalletAPIProvider } from "./LedgerWalletAPIProvider"
diff --git a/dapp/yarn.lock b/dapp/yarn.lock
index a49ca4bd8..cd7e8541a 100644
--- a/dapp/yarn.lock
+++ b/dapp/yarn.lock
@@ -413,6 +413,62 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@ledgerhq/devices@^8.0.8":
+  version "8.0.8"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/devices/-/devices-8.0.8.tgz#cd233eb54a044913160c9183be9fb22adae4e071"
+  integrity sha512-0j7E8DY2jeSSATc8IJk+tXDZ9u+Z7tXxB8I4TzXrfV/8A5exMh/K1IwX6Jt1zlw1wre4CT9MV4mzUs3M/TE7lg==
+  dependencies:
+    "@ledgerhq/errors" "^6.15.0"
+    "@ledgerhq/logs" "^6.11.0"
+    rxjs "^7.8.1"
+    semver "^7.3.5"
+
+"@ledgerhq/errors@^6.14.0", "@ledgerhq/errors@^6.15.0":
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/errors/-/errors-6.15.0.tgz#45cda73915f695cc072cb8a99650830bc5dc6668"
+  integrity sha512-6xaw5/mgoht62TnL3rXsaQYEFwpnXyNDk1AOSJksIjFHx9bHUnkyVmrnGQDj0JLzi+E7bHEgTrpCs8wpeDh9jA==
+
+"@ledgerhq/hw-transport@^6.28.8":
+  version "6.29.0"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport/-/hw-transport-6.29.0.tgz#2b85f39d90b093930f0c7bfc513b29eb47ba97fa"
+  integrity sha512-WQfzxt3EnnbOmzZVYiCgSmNsqafBOFQn40awvUPY2IZviJRs23/1ANPHAo76bzPV88+Qk0+1wZlcnIanGN6fFA==
+  dependencies:
+    "@ledgerhq/devices" "^8.0.8"
+    "@ledgerhq/errors" "^6.15.0"
+    "@ledgerhq/logs" "^6.11.0"
+    events "^3.3.0"
+
+"@ledgerhq/logs@^6.11.0":
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/logs/-/logs-6.11.0.tgz#0d28e7edcf71548506f4304686cba480ba91bbcf"
+  integrity sha512-HHK9y4GGe4X7CXbRUCh7z8Mp+WggpJn1dmUjmuk1rNugESF6o8nAOnXA+BxwtRRNV3CgNJR3Wxdos4J9qV0Zsg==
+
+"@ledgerhq/wallet-api-client-react@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/wallet-api-client-react/-/wallet-api-client-react-1.1.2.tgz#da9ca900aefd671faecf121982de30b15c5c6271"
+  integrity sha512-ZBnp8HBHwtuDE/jqYuJmqx20Dx9dqqcZaOW4YuaY32GRwqEJJslTtcypCCgq2kArl0Y0q0irOYEd/0I7ULxdLQ==
+  dependencies:
+    "@ledgerhq/wallet-api-client" "1.2.1"
+
+"@ledgerhq/wallet-api-client@1.2.1", "@ledgerhq/wallet-api-client@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/wallet-api-client/-/wallet-api-client-1.2.1.tgz#b47fe5b4f431282f50ddb64c8abb911545593eba"
+  integrity sha512-uTBTZCpbLTM5y5Cd7ioQB0lcq0b3cbrU2bGzCiKuY1IEd0NUyFhr2dKliRrcLoMPDRtQRmRnSxeX0BFKinoo8Q==
+  dependencies:
+    "@ledgerhq/hw-transport" "^6.28.8"
+    "@ledgerhq/wallet-api-core" "1.3.1"
+    bignumber.js "^9.1.2"
+
+"@ledgerhq/wallet-api-core@1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/wallet-api-core/-/wallet-api-core-1.3.1.tgz#092d027a6d9ce7139a2d4c157480e2feb7c88489"
+  integrity sha512-yOeb1tfdwF6NdxVEIVr8SVz5iOyh6asWa0bbuCyMpiLrfuVS/Wkr6OeDMBYSxWxXxRFmQDJ9XQxdtSS+MGNk1Q==
+  dependencies:
+    "@ledgerhq/errors" "^6.14.0"
+    bignumber.js "^9.1.2"
+    uuid "^9.0.0"
+    zod "^3.22.2"
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -813,6 +869,11 @@ big-integer@^1.6.44:
   resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
   integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
 
+bignumber.js@^9.1.2:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/bignumber.js/-/bignumber.js-9.1.2.tgz#b7c4242259c008903b13707983b5f4bbd31eda0c"
+  integrity sha512-2/mKyZH9K85bzOEfhXDBFZTGd1CTs+5IHpeFQo9luiBG7hghdC851Pj2WAhb6E3R6b9tZj/XKhbg4fum+Kepug==
+
 bplist-parser@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/bplist-parser/-/bplist-parser-0.2.0.tgz#43a9d183e5bf9d545200ceac3e712f79ebbe8d0e"
@@ -1397,6 +1458,11 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
+events@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
+
 execa@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
@@ -2469,6 +2535,13 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rxjs@^7.8.1:
+  version "7.8.1"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
+  integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
+  dependencies:
+    tslib "^2.1.0"
+
 safe-array-concat@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.0.1.tgz#91686a63ce3adbea14d61b14c99572a8ff84754c"
@@ -2500,7 +2573,7 @@ semver@^6.3.0, semver@^6.3.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.5.4:
+semver@^7.3.5, semver@^7.5.4:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
   integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
@@ -2695,7 +2768,7 @@ tsconfig-paths@^3.14.2:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^2.5.0, tslib@^2.6.0:
+tslib@^2.1.0, tslib@^2.5.0, tslib@^2.6.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
@@ -2786,6 +2859,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+uuid@^9.0.0:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
+
 vite@^4.4.5:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.0.tgz#ec406295b4167ac3bc23e26f9c8ff559287cff26"
@@ -2873,3 +2951,8 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zod@^3.22.2:
+  version "3.22.4"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.4.tgz#f31c3a9386f61b1f228af56faa9255e845cf3fff"
+  integrity sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==

From c1912b1c1ed17926951aa2bc7d745e4869d150e2 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Mon, 13 Nov 2023 15:49:49 +0100
Subject: [PATCH 02/11] Create a special hooks for saving `isEmbed` state

---
 dapp/src/App.tsx                    |  3 +++
 dapp/src/constants/index.ts         |  1 +
 dapp/src/constants/local-storage.ts |  2 ++
 dapp/src/hooks/dom-hooks.ts         | 31 +++++++++++++++++++++++++++++
 dapp/src/hooks/feature-hooks.ts     | 22 ++++++++++++++++++++
 dapp/src/hooks/index.ts             |  2 ++
 dapp/src/main.tsx                   |  7 ++++++-
 7 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 dapp/src/constants/index.ts
 create mode 100644 dapp/src/constants/local-storage.ts
 create mode 100644 dapp/src/hooks/dom-hooks.ts
 create mode 100644 dapp/src/hooks/feature-hooks.ts
 create mode 100644 dapp/src/hooks/index.ts

diff --git a/dapp/src/App.tsx b/dapp/src/App.tsx
index 1d6ad014f..f317425c8 100644
--- a/dapp/src/App.tsx
+++ b/dapp/src/App.tsx
@@ -1,6 +1,9 @@
 import React from "react"
+import { useEmbedFeatureFlag } from "./hooks"
 
 function App() {
+  const { isEmbed } = useEmbedFeatureFlag()
+  if (isEmbed === "true") return <h1>Ledger live - Acre dApp</h1>
   return <h1>Acre dApp</h1>
 }
 
diff --git a/dapp/src/constants/index.ts b/dapp/src/constants/index.ts
new file mode 100644
index 000000000..cee1de3e3
--- /dev/null
+++ b/dapp/src/constants/index.ts
@@ -0,0 +1 @@
+export * from "./local-storage"
diff --git a/dapp/src/constants/local-storage.ts b/dapp/src/constants/local-storage.ts
new file mode 100644
index 000000000..dcf71164f
--- /dev/null
+++ b/dapp/src/constants/local-storage.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export const LOCAL_STORAGE_EMBED = "isEmbed"
diff --git a/dapp/src/hooks/dom-hooks.ts b/dapp/src/hooks/dom-hooks.ts
new file mode 100644
index 000000000..09d4cd28c
--- /dev/null
+++ b/dapp/src/hooks/dom-hooks.ts
@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react"
+
+const setLocalStorageItem = (key: string, value: string): void =>
+  localStorage.setItem(key, value)
+
+const getLocalStorageItem = (key: string, defaultValue: string): string =>
+  localStorage.getItem(key) || defaultValue
+
+// eslint-disable-next-line import/prefer-default-export
+export function useLocalStorage(
+  key: string,
+  initialValue: string,
+): [string, React.Dispatch<React.SetStateAction<string>>] {
+  const [value, setValue] = useState(() =>
+    getLocalStorageItem(key, initialValue),
+  )
+  const [cachedKey, setCachedKey] = useState(key)
+
+  useEffect(() => {
+    if (key !== cachedKey) {
+      setValue(getLocalStorageItem(key, initialValue))
+      setCachedKey(key)
+    }
+  }, [key, cachedKey, initialValue])
+
+  useEffect(() => {
+    setLocalStorageItem(cachedKey, value)
+  }, [cachedKey, value])
+
+  return [value, setValue]
+}
diff --git a/dapp/src/hooks/feature-hooks.ts b/dapp/src/hooks/feature-hooks.ts
new file mode 100644
index 000000000..38c5848be
--- /dev/null
+++ b/dapp/src/hooks/feature-hooks.ts
@@ -0,0 +1,22 @@
+import { useCallback } from "react"
+import { LOCAL_STORAGE_EMBED } from "../constants/local-storage"
+import { useLocalStorage } from "./dom-hooks"
+
+// eslint-disable-next-line import/prefer-default-export
+export const useEmbedFeatureFlag = () => {
+  const [isEmbed, setIsEmbed] = useLocalStorage(LOCAL_STORAGE_EMBED, "false")
+
+  const enableIsEmbedFeatureFlag = useCallback(() => {
+    setIsEmbed("true")
+  }, [setIsEmbed])
+
+  const disableIsEmbedFeatureFlag = useCallback(() => {
+    setIsEmbed("false")
+  }, [setIsEmbed])
+
+  return {
+    enableIsEmbedFeatureFlag,
+    disableIsEmbedFeatureFlag,
+    isEmbed,
+  }
+}
diff --git a/dapp/src/hooks/index.ts b/dapp/src/hooks/index.ts
new file mode 100644
index 000000000..c309ad236
--- /dev/null
+++ b/dapp/src/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from "./dom-hooks"
+export * from "./feature-hooks"
diff --git a/dapp/src/main.tsx b/dapp/src/main.tsx
index 934df18d8..8c7b71cd8 100644
--- a/dapp/src/main.tsx
+++ b/dapp/src/main.tsx
@@ -2,12 +2,17 @@ import React from "react"
 import ReactDOM from "react-dom/client"
 import App from "./App"
 import { LedgerWalletAPIProvider } from "./providers"
+import { LOCAL_STORAGE_EMBED } from "./constants"
+import { useEmbedFeatureFlag } from "./hooks"
 
 function DAppProvider() {
+  const { enableIsEmbedFeatureFlag } = useEmbedFeatureFlag()
+
   const params = new URLSearchParams(window.location.search)
-  const isEmbed = params.get("embed")
+  const isEmbed = params.get(LOCAL_STORAGE_EMBED)
 
   if (isEmbed) {
+    enableIsEmbedFeatureFlag()
     return (
       <LedgerWalletAPIProvider>
         <App />

From 11e9f0f43089b486671e24e4ae25462bc1dff849 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Mon, 13 Nov 2023 16:07:24 +0100
Subject: [PATCH 03/11] Fix a bug with rendering of the root component

There was a problem with calling `ReactDOMClient.createRoot()` on a container that has already been passed to `createRoot()` before. Let's move the provider logic into a separate file to make sure the entry point file will be run only once.
---
 dapp/src/App.tsx  | 10 ----------
 dapp/src/DApp.tsx | 29 +++++++++++++++++++++++++++++
 dapp/src/main.tsx | 24 ++----------------------
 3 files changed, 31 insertions(+), 32 deletions(-)
 delete mode 100644 dapp/src/App.tsx
 create mode 100644 dapp/src/DApp.tsx

diff --git a/dapp/src/App.tsx b/dapp/src/App.tsx
deleted file mode 100644
index f317425c8..000000000
--- a/dapp/src/App.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from "react"
-import { useEmbedFeatureFlag } from "./hooks"
-
-function App() {
-  const { isEmbed } = useEmbedFeatureFlag()
-  if (isEmbed === "true") return <h1>Ledger live - Acre dApp</h1>
-  return <h1>Acre dApp</h1>
-}
-
-export default App
diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx
new file mode 100644
index 000000000..0ec7ddb0f
--- /dev/null
+++ b/dapp/src/DApp.tsx
@@ -0,0 +1,29 @@
+import React from "react"
+import { useEmbedFeatureFlag } from "./hooks"
+import { LedgerWalletAPIProvider } from "./providers"
+import { LOCAL_STORAGE_EMBED } from "./constants"
+
+function DApp() {
+  const { isEmbed } = useEmbedFeatureFlag()
+  if (isEmbed === "true") return <h1>Ledger live - Acre dApp</h1>
+  return <h1>Acre dApp</h1>
+}
+
+function DAppWrapper() {
+  const { enableIsEmbedFeatureFlag } = useEmbedFeatureFlag()
+
+  const params = new URLSearchParams(window.location.search)
+  const isEmbed = params.get(LOCAL_STORAGE_EMBED)
+
+  if (isEmbed) {
+    enableIsEmbedFeatureFlag()
+    return (
+      <LedgerWalletAPIProvider>
+        <DApp />
+      </LedgerWalletAPIProvider>
+    )
+  }
+  return <DApp />
+}
+
+export default DAppWrapper
diff --git a/dapp/src/main.tsx b/dapp/src/main.tsx
index 8c7b71cd8..e16b6215c 100644
--- a/dapp/src/main.tsx
+++ b/dapp/src/main.tsx
@@ -1,29 +1,9 @@
 import React from "react"
 import ReactDOM from "react-dom/client"
-import App from "./App"
-import { LedgerWalletAPIProvider } from "./providers"
-import { LOCAL_STORAGE_EMBED } from "./constants"
-import { useEmbedFeatureFlag } from "./hooks"
-
-function DAppProvider() {
-  const { enableIsEmbedFeatureFlag } = useEmbedFeatureFlag()
-
-  const params = new URLSearchParams(window.location.search)
-  const isEmbed = params.get(LOCAL_STORAGE_EMBED)
-
-  if (isEmbed) {
-    enableIsEmbedFeatureFlag()
-    return (
-      <LedgerWalletAPIProvider>
-        <App />
-      </LedgerWalletAPIProvider>
-    )
-  }
-  return <App />
-}
+import DAppWrapper from "./DApp"
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <DAppProvider />
+    <DAppWrapper />
   </React.StrictMode>,
 )

From a635800e9fae2231e2809925c2a7224ce1d5e3e3 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Tue, 14 Nov 2023 08:04:19 +0100
Subject: [PATCH 04/11] Remove unnecessary comment

---
 dapp/vite.config.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/dapp/vite.config.ts b/dapp/vite.config.ts
index c45a49260..ea1889ae7 100644
--- a/dapp/vite.config.ts
+++ b/dapp/vite.config.ts
@@ -1,5 +1,3 @@
-// Unfortunately, the Vite React package structure does not play nice with no-extraneous-dependencies.
-/* eslint-disable import/no-extraneous-dependencies */
 import { defineConfig } from "vite"
 import react from "@vitejs/plugin-react"
 

From c0dcb4a0d66f7153b2686fbba2e253a363464228 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Tue, 14 Nov 2023 10:46:58 +0100
Subject: [PATCH 05/11] Fix issue with the incorrect name for embed

---
 dapp/src/constants/local-storage.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dapp/src/constants/local-storage.ts b/dapp/src/constants/local-storage.ts
index dcf71164f..dc44f03bd 100644
--- a/dapp/src/constants/local-storage.ts
+++ b/dapp/src/constants/local-storage.ts
@@ -1,2 +1,2 @@
 // eslint-disable-next-line import/prefer-default-export
-export const LOCAL_STORAGE_EMBED = "isEmbed"
+export const LOCAL_STORAGE_EMBED = "embed"

From c0f444b13fca7376023b8c8917a94992afd79c36 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Tue, 14 Nov 2023 11:22:48 +0100
Subject: [PATCH 06/11] Simplifying the logic for embed feature flag

 Let's set the correct value for `isEmbed` instantly. The first time the local storage is empty, set the value from the url search parameters.
---
 dapp/src/DApp.tsx               |  9 ++-------
 dapp/src/hooks/feature-hooks.ts | 13 +++++++++++--
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx
index 0ec7ddb0f..100c3cb8e 100644
--- a/dapp/src/DApp.tsx
+++ b/dapp/src/DApp.tsx
@@ -1,7 +1,6 @@
 import React from "react"
 import { useEmbedFeatureFlag } from "./hooks"
 import { LedgerWalletAPIProvider } from "./providers"
-import { LOCAL_STORAGE_EMBED } from "./constants"
 
 function DApp() {
   const { isEmbed } = useEmbedFeatureFlag()
@@ -10,13 +9,9 @@ function DApp() {
 }
 
 function DAppWrapper() {
-  const { enableIsEmbedFeatureFlag } = useEmbedFeatureFlag()
-
-  const params = new URLSearchParams(window.location.search)
-  const isEmbed = params.get(LOCAL_STORAGE_EMBED)
+  const { isEmbed } = useEmbedFeatureFlag()
 
-  if (isEmbed) {
-    enableIsEmbedFeatureFlag()
+  if (isEmbed === "true") {
     return (
       <LedgerWalletAPIProvider>
         <DApp />
diff --git a/dapp/src/hooks/feature-hooks.ts b/dapp/src/hooks/feature-hooks.ts
index 38c5848be..bad740de5 100644
--- a/dapp/src/hooks/feature-hooks.ts
+++ b/dapp/src/hooks/feature-hooks.ts
@@ -2,9 +2,18 @@ import { useCallback } from "react"
 import { LOCAL_STORAGE_EMBED } from "../constants/local-storage"
 import { useLocalStorage } from "./dom-hooks"
 
+const getEmbedParam = (): string => {
+  const params = new URLSearchParams(window.location.search)
+  const isEmbed = params.get(LOCAL_STORAGE_EMBED)
+  return isEmbed ?? "false"
+}
+
 // eslint-disable-next-line import/prefer-default-export
-export const useEmbedFeatureFlag = () => {
-  const [isEmbed, setIsEmbed] = useLocalStorage(LOCAL_STORAGE_EMBED, "false")
+export function useEmbedFeatureFlag() {
+  const [isEmbed, setIsEmbed] = useLocalStorage(
+    LOCAL_STORAGE_EMBED,
+    getEmbedParam(),
+  )
 
   const enableIsEmbedFeatureFlag = useCallback(() => {
     setIsEmbed("true")

From e7ae6dcd9050ec047ab51d1dc0380209391ea448 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Wed, 15 Nov 2023 15:30:49 +0100
Subject: [PATCH 07/11] Set the correct icon and title for acre dApp

---
 dapp/index.html                    | 5 ++---
 dapp/manifest-ledger-live-app.json | 4 ++--
 dapp/public/acre.svg               | 4 ++++
 dapp/public/vite.svg               | 1 -
 4 files changed, 8 insertions(+), 6 deletions(-)
 create mode 100644 dapp/public/acre.svg
 delete mode 100644 dapp/public/vite.svg

diff --git a/dapp/index.html b/dapp/index.html
index 9bdab828c..606a95c29 100644
--- a/dapp/index.html
+++ b/dapp/index.html
@@ -2,10 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <!-- TODO: Set the correct logo and title -->
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/acre.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Acre</title>
+    <title>ACRE</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/dapp/manifest-ledger-live-app.json b/dapp/manifest-ledger-live-app.json
index 6a8414862..f0f3e64d7 100644
--- a/dapp/manifest-ledger-live-app.json
+++ b/dapp/manifest-ledger-live-app.json
@@ -1,9 +1,9 @@
 {
     "id": "acre",
-    "name": "Acre",
+    "name": "ACRE",
     "url": "http://localhost:5173?embed=true",
     "homepageUrl": "http://localhost:5173?embed=true",
-    "icon": "https://cdn.live.ledger.com/icons/platform/moonpay.png",
+    "icon": "http://127.0.0.1:5173/acre.svg",
     "platform": "all",
     "apiVersion": "2.0.0",
     "manifestVersion": "1",
diff --git a/dapp/public/acre.svg b/dapp/public/acre.svg
new file mode 100644
index 000000000..59e8dbf1c
--- /dev/null
+++ b/dapp/public/acre.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="12" fill="black"/>
+<path d="M15.7333 14.5231L14.752 13.1692H9.248L8.26667 14.5231H11.3643V16H4V14.5231H6.49173L10.1781 9.47692H7.968V8H16.032V9.47692H13.8219L17.5083 14.5231H20V16H12.6443V14.5231H15.7419H15.7333ZM10.1781 11.881H13.8133L11.9957 9.39487L10.1781 11.881Z" fill="white"/>
+</svg>
diff --git a/dapp/public/vite.svg b/dapp/public/vite.svg
deleted file mode 100644
index e7b8dfb1b..000000000
--- a/dapp/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file

From b173d311c15abae66349f2759797f3c9f3d86c88 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Thu, 16 Nov 2023 08:30:49 +0100
Subject: [PATCH 08/11] Fix a URL for the home page

The acre homepage should not include the `embed` parameter. As a result, when the user opens the information panel, will be redirected to the regular dApp version.
---
 dapp/manifest-ledger-live-app.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dapp/manifest-ledger-live-app.json b/dapp/manifest-ledger-live-app.json
index f0f3e64d7..22c334007 100644
--- a/dapp/manifest-ledger-live-app.json
+++ b/dapp/manifest-ledger-live-app.json
@@ -2,7 +2,7 @@
     "id": "acre",
     "name": "ACRE",
     "url": "http://localhost:5173?embed=true",
-    "homepageUrl": "http://localhost:5173?embed=true",
+    "homepageUrl": "http://localhost:5173/",
     "icon": "http://127.0.0.1:5173/acre.svg",
     "platform": "all",
     "apiVersion": "2.0.0",

From 9c8b6670c12bb7b86eb0c23398450c80eb9a0b26 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Thu, 16 Nov 2023 12:21:08 +0100
Subject: [PATCH 09/11] Disabling the rule `import/prefer-default-export`

---
 dapp/.eslintrc                      | 3 ++-
 dapp/src/constants/local-storage.ts | 1 -
 dapp/src/hooks/dom-hooks.ts         | 1 -
 dapp/src/hooks/feature-hooks.ts     | 1 -
 dapp/src/providers/index.ts         | 1 -
 5 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/dapp/.eslintrc b/dapp/.eslintrc
index ee5a522e4..198832b1e 100644
--- a/dapp/.eslintrc
+++ b/dapp/.eslintrc
@@ -2,6 +2,7 @@
   "root": true,
   "extends": ["@thesis-co"],
   "rules": {
-    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
+    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
+    "import/prefer-default-export": "off"
   }
 }
diff --git a/dapp/src/constants/local-storage.ts b/dapp/src/constants/local-storage.ts
index dc44f03bd..3c8ad92dd 100644
--- a/dapp/src/constants/local-storage.ts
+++ b/dapp/src/constants/local-storage.ts
@@ -1,2 +1 @@
-// eslint-disable-next-line import/prefer-default-export
 export const LOCAL_STORAGE_EMBED = "embed"
diff --git a/dapp/src/hooks/dom-hooks.ts b/dapp/src/hooks/dom-hooks.ts
index 09d4cd28c..8edd32c28 100644
--- a/dapp/src/hooks/dom-hooks.ts
+++ b/dapp/src/hooks/dom-hooks.ts
@@ -6,7 +6,6 @@ const setLocalStorageItem = (key: string, value: string): void =>
 const getLocalStorageItem = (key: string, defaultValue: string): string =>
   localStorage.getItem(key) || defaultValue
 
-// eslint-disable-next-line import/prefer-default-export
 export function useLocalStorage(
   key: string,
   initialValue: string,
diff --git a/dapp/src/hooks/feature-hooks.ts b/dapp/src/hooks/feature-hooks.ts
index bad740de5..1aed9d89e 100644
--- a/dapp/src/hooks/feature-hooks.ts
+++ b/dapp/src/hooks/feature-hooks.ts
@@ -8,7 +8,6 @@ const getEmbedParam = (): string => {
   return isEmbed ?? "false"
 }
 
-// eslint-disable-next-line import/prefer-default-export
 export function useEmbedFeatureFlag() {
   const [isEmbed, setIsEmbed] = useLocalStorage(
     LOCAL_STORAGE_EMBED,
diff --git a/dapp/src/providers/index.ts b/dapp/src/providers/index.ts
index 0c65e8536..c8f56e2c2 100644
--- a/dapp/src/providers/index.ts
+++ b/dapp/src/providers/index.ts
@@ -1,2 +1 @@
-// eslint-disable-next-line import/prefer-default-export
 export { default as LedgerWalletAPIProvider } from "./LedgerWalletAPIProvider"

From e2cf153f5da1ef65c71d8f882a11aac6ccfaf99a Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Thu, 16 Nov 2023 13:48:18 +0100
Subject: [PATCH 10/11] Remove `embed` flag for dApp

We had to choose non-dApp section because dApp section didn't support sending bitcoin transactions. In fact,We wanted to use this flag in case we wanted to create a separate app without a ledger live in the future. Let's remove it and come back to it when needed.
---
 dapp/manifest-ledger-live-app.json  |  2 +-
 dapp/src/DApp.tsx                   | 20 ++++++-------------
 dapp/src/constants/index.ts         |  1 -
 dapp/src/constants/local-storage.ts |  1 -
 dapp/src/hooks/dom-hooks.ts         | 30 -----------------------------
 dapp/src/hooks/feature-hooks.ts     | 30 -----------------------------
 dapp/src/hooks/index.ts             |  2 --
 7 files changed, 7 insertions(+), 79 deletions(-)
 delete mode 100644 dapp/src/constants/index.ts
 delete mode 100644 dapp/src/constants/local-storage.ts
 delete mode 100644 dapp/src/hooks/dom-hooks.ts
 delete mode 100644 dapp/src/hooks/feature-hooks.ts
 delete mode 100644 dapp/src/hooks/index.ts

diff --git a/dapp/manifest-ledger-live-app.json b/dapp/manifest-ledger-live-app.json
index 22c334007..6072264db 100644
--- a/dapp/manifest-ledger-live-app.json
+++ b/dapp/manifest-ledger-live-app.json
@@ -1,7 +1,7 @@
 {
     "id": "acre",
     "name": "ACRE",
-    "url": "http://localhost:5173?embed=true",
+    "url": "http://localhost:5173/",
     "homepageUrl": "http://localhost:5173/",
     "icon": "http://127.0.0.1:5173/acre.svg",
     "platform": "all",
diff --git a/dapp/src/DApp.tsx b/dapp/src/DApp.tsx
index 100c3cb8e..8de8b9693 100644
--- a/dapp/src/DApp.tsx
+++ b/dapp/src/DApp.tsx
@@ -1,24 +1,16 @@
 import React from "react"
-import { useEmbedFeatureFlag } from "./hooks"
 import { LedgerWalletAPIProvider } from "./providers"
 
 function DApp() {
-  const { isEmbed } = useEmbedFeatureFlag()
-  if (isEmbed === "true") return <h1>Ledger live - Acre dApp</h1>
-  return <h1>Acre dApp</h1>
+  return <h1>Ledger live - Acre dApp</h1>
 }
 
 function DAppWrapper() {
-  const { isEmbed } = useEmbedFeatureFlag()
-
-  if (isEmbed === "true") {
-    return (
-      <LedgerWalletAPIProvider>
-        <DApp />
-      </LedgerWalletAPIProvider>
-    )
-  }
-  return <DApp />
+  return (
+    <LedgerWalletAPIProvider>
+      <DApp />
+    </LedgerWalletAPIProvider>
+  )
 }
 
 export default DAppWrapper
diff --git a/dapp/src/constants/index.ts b/dapp/src/constants/index.ts
deleted file mode 100644
index cee1de3e3..000000000
--- a/dapp/src/constants/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./local-storage"
diff --git a/dapp/src/constants/local-storage.ts b/dapp/src/constants/local-storage.ts
deleted file mode 100644
index 3c8ad92dd..000000000
--- a/dapp/src/constants/local-storage.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const LOCAL_STORAGE_EMBED = "embed"
diff --git a/dapp/src/hooks/dom-hooks.ts b/dapp/src/hooks/dom-hooks.ts
deleted file mode 100644
index 8edd32c28..000000000
--- a/dapp/src/hooks/dom-hooks.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useEffect, useState } from "react"
-
-const setLocalStorageItem = (key: string, value: string): void =>
-  localStorage.setItem(key, value)
-
-const getLocalStorageItem = (key: string, defaultValue: string): string =>
-  localStorage.getItem(key) || defaultValue
-
-export function useLocalStorage(
-  key: string,
-  initialValue: string,
-): [string, React.Dispatch<React.SetStateAction<string>>] {
-  const [value, setValue] = useState(() =>
-    getLocalStorageItem(key, initialValue),
-  )
-  const [cachedKey, setCachedKey] = useState(key)
-
-  useEffect(() => {
-    if (key !== cachedKey) {
-      setValue(getLocalStorageItem(key, initialValue))
-      setCachedKey(key)
-    }
-  }, [key, cachedKey, initialValue])
-
-  useEffect(() => {
-    setLocalStorageItem(cachedKey, value)
-  }, [cachedKey, value])
-
-  return [value, setValue]
-}
diff --git a/dapp/src/hooks/feature-hooks.ts b/dapp/src/hooks/feature-hooks.ts
deleted file mode 100644
index 1aed9d89e..000000000
--- a/dapp/src/hooks/feature-hooks.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useCallback } from "react"
-import { LOCAL_STORAGE_EMBED } from "../constants/local-storage"
-import { useLocalStorage } from "./dom-hooks"
-
-const getEmbedParam = (): string => {
-  const params = new URLSearchParams(window.location.search)
-  const isEmbed = params.get(LOCAL_STORAGE_EMBED)
-  return isEmbed ?? "false"
-}
-
-export function useEmbedFeatureFlag() {
-  const [isEmbed, setIsEmbed] = useLocalStorage(
-    LOCAL_STORAGE_EMBED,
-    getEmbedParam(),
-  )
-
-  const enableIsEmbedFeatureFlag = useCallback(() => {
-    setIsEmbed("true")
-  }, [setIsEmbed])
-
-  const disableIsEmbedFeatureFlag = useCallback(() => {
-    setIsEmbed("false")
-  }, [setIsEmbed])
-
-  return {
-    enableIsEmbedFeatureFlag,
-    disableIsEmbedFeatureFlag,
-    isEmbed,
-  }
-}
diff --git a/dapp/src/hooks/index.ts b/dapp/src/hooks/index.ts
deleted file mode 100644
index c309ad236..000000000
--- a/dapp/src/hooks/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./dom-hooks"
-export * from "./feature-hooks"

From 273d64fc05b34dfafedb3452a0b25842079e6b93 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Thu, 16 Nov 2023 13:52:22 +0100
Subject: [PATCH 11/11] Use a `localhost` to be consistent

---
 dapp/manifest-ledger-live-app.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dapp/manifest-ledger-live-app.json b/dapp/manifest-ledger-live-app.json
index 6072264db..a6ed3d306 100644
--- a/dapp/manifest-ledger-live-app.json
+++ b/dapp/manifest-ledger-live-app.json
@@ -3,7 +3,7 @@
     "name": "ACRE",
     "url": "http://localhost:5173/",
     "homepageUrl": "http://localhost:5173/",
-    "icon": "http://127.0.0.1:5173/acre.svg",
+    "icon": "http://localhost:5173/acre.svg",
     "platform": "all",
     "apiVersion": "2.0.0",
     "manifestVersion": "1",