refactor: use strong types for window.webln (#412)

package.json

@@ -19,6 +19,7 @@
     "devDependencies": {
         "@solidjs/testing-library": "^0.8.4",
         "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+        "@webbtc/webln-types": "^3.0.0",
         "eventsource": "^2.0.2",
         "git-cliff": "^1.4.0",
         "jsdom": "^22.1.0",

src/Create.tsx

@@ -88,7 +88,6 @@ const Create = () => {
     const createWeblnInvoice = async () => {
         enableWebln(async () => {
             const amount = Number(receiveAmount());
-            // @ts-ignore
             const invoice = await window.webln.makeInvoice({ amount: amount });
             validateAmount();
             log.debug("created webln invoice", invoice);

src/utils/webln.js → src/utils/webln.ts

@@ -1,34 +1,35 @@
 import log from "loglevel";
 
-export function detectWebLNProvider(timeoutParam) {
-    const timeout = timeoutParam ?? 3000;
+export const detectWebLNProvider = (timeout: number = 3000) => {
     const interval = 100;
 
     return new Promise((resolve) => {
+        const handleWebLn = () => {
+            resolve(window.webln !== undefined);
+        };
+
         if (window.webln) {
-            handleWebLN();
+            handleWebLn();
         } else {
             let i = 0;
             const checkInterval = setInterval(function () {
                 if (window.webln || i >= timeout / interval) {
-                    handleWebLN();
+                    handleWebLn();
                     clearInterval(checkInterval);
                 }
                 i++;
             }, interval);
         }
-
-        function handleWebLN() {
-            resolve(window.webln !== undefined);
-        }
     });
-}
+};
 
-export async function enableWebln(cb) {
+export const enableWebln = async (
+    cb: () => Promise<void> | void,
+): Promise<void> => {
     try {
         await window.webln.enable();
         await cb();
     } catch (error) {
         log.error("webln call failed", error);
     }
-}
+};

src/webln-types.d.ts

@@ -0,0 +1 @@
+/// <reference types="@webbtc/webln-types" />

tests/utils/webln.spec.js → tests/utils/webln.spec.ts

@@ -1,5 +1,5 @@
 import log from "loglevel";
-import { beforeEach, describe, expect, vitest } from "vitest";
+import { beforeEach, describe, expect, test, vitest } from "vitest";
 
 import { detectWebLNProvider, enableWebln } from "../../src/utils/webln";
 
@@ -14,19 +14,19 @@ describe("WebLN", () => {
     });
 
     test("should detect WebLN when provider is present", async () => {
-        window.webln = {};
+        window.webln = {} as any;
         expect(await detectWebLNProvider()).toEqual(true);
     });
 
     test("should detect WebLN when provider is present after 200ms", async () => {
-        setTimeout(() => (window.webln = {}), 1);
+        setTimeout(() => (window.webln = {} as any), 1);
         expect(await detectWebLNProvider()).toEqual(true);
     });
 
     test("should call WebLN callback if enable call succeeds", async () => {
         window.webln = {
             enable: vitest.fn().mockResolvedValue(undefined),
-        };
+        } as any;
         const cb = vitest.fn();
 
         expect(await enableWebln(cb));
@@ -41,7 +41,7 @@ describe("WebLN", () => {
     test("should not call WebLN callback if enable call fails", async () => {
         window.webln = {
             enable: vitest.fn().mockRejectedValue("unauthorized"),
-        };
+        } as any;
         const cb = vitest.fn();
 
         expect(await enableWebln(cb));