test: dummy-wallet-app add custom button to test locally

libs/test-utils/dummy-wallet-app/src/App.css

@@ -35,3 +35,7 @@
   background-color: #b8b8b9;
   text-align: start;
 }
+
+pre {
+  text-align: initial;
+}

libs/test-utils/dummy-wallet-app/src/App.tsx

@@ -1,15 +1,29 @@
-import React, { useEffect, useMemo } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { useE2EInjection } from "./hooks";
 import "./App.css";
+import { CustomLogger } from "@ledgerhq/live-common/wallet-api/CustomLogger/client";
 import { useWalletAPIClient } from "@ledgerhq/wallet-api-client-react";
+import { WalletAPIClient } from "@ledgerhq/wallet-api-client";
 
 export default function App() {
   useE2EInjection();
-  const { client } = useWalletAPIClient();
+  const { client } = useWalletAPIClient() as { client: WalletAPIClient<CustomLogger> };
   useEffect(() => {
     console.log(client?.custom);
   });
 
+  const [res, setRes] = useState();
+
+  const testLogger = async () => {
+    try {
+      // @ts-expect-error: need to fix it in wallet-api by removing the Record
+      setRes(await client?.custom.log("test"));
+    } catch (err) {
+      // @ts-expect-error: err is unknown and we don't check it
+      setRes(err);
+    }
+  };
+
   const params = useMemo(
     () => Array.from(new URLSearchParams(window.location.search).entries()),
     [],
@@ -32,6 +46,8 @@ export default function App() {
             ))}
           </ol>
         </div>
+        <button onClick={testLogger}>Test logger</button>
+        {res ? <pre>{JSON.stringify(res, null, 2)}</pre> : null}
       </header>
     </div>
   );

libs/test-utils/dummy-wallet-app/src/index.tsx

@@ -7,9 +7,11 @@ import "./index.css";
 import App from "./App";
 
 function getCustomModule(client: WalletAPIClient) {
-  return {
-    logger: new CustomLogger(client),
-  };
+  return new CustomLogger(client);
+  // We need to improve the types to make this work better
+  // return {
+  //   logger: new CustomLogger(client),
+  // };
 }
 
 function TransportProvider({ children }: PropsWithChildren<object>) {