lightsparkdev · coreymartin · May 12, 2025 · Apr 7, 2025 · Apr 7, 2025 · Apr 11, 2025
@@ -0,0 +1,19 @@
+---
+"@lightsparkdev/core": minor
+---
+
+- **Test script**
+  - Renamed `test` to `test-cmd` and made `test` an alias that accepts arbitrary Jest patterns.
+- **Requester**
+  - Switched `wsClient` to a lazily initialized `Promise` resolved in a new `initWsClient` method.
+  - Moved `autoBind` into constructor and improved cleanup/cancellation logic in `subscribe()`.
+- **New tests**
+  - Added `Requester.test.ts` covering query execution, error handling, subscriptions, and signing logic.
+- **Errors utility**
+  - Enhanced `errorToJSON` to enumerate non-enumerable props and optionally stringify nested objects.
+- **LocalStorage utility**
+  - Made `getLocalStorageBoolean` return `true`/`false`/`null`; `getLocalStorageConfigItem` now defaults missing keys to `false`.
+- **Type guards**
+  - Tightened `isObject` signature, added `isRecord`, and removed a duplicate in `types.ts`.
+- **Static assets**
+  - Replaced the monolithic SVG logo with an optimized, higher-resolution `lightspark-logo.svg`.
@@ -0,0 +1,36 @@
+---
+"@lightsparkdev/ui": patch
+---
+
+- **BirthdayInput**
+  - Dropped internal validity state; added `formatDateToText` hint formatter and “must be before today” validation.
+- **TextInput**
+  - Introduced `success` & `contentError` props, `hideNonErrorsIfBlurred`, configurable `iconOffsets`, `iconStrokeWidths`.
+- **PhoneInput**
+  - Added `onFocus` callback.
+- **QRCode**
+  - Swapped in new `LogoMark` asset (vs. `FramedLogoOnCircle`), adjusted image sizing.
+- **Drawer & Modal**
+  - Added `alignBottom` and `disableTouchMove` flags to support bottom-aligned, non-dismissable drawers.
+- **Button & Checkbox**
+  - New kinds: `green37`, `gray99`, `white21`.
+  - Added margin props (`mb`, `ml`, `mr`) for fine-grained spacing.
+- **CardForm**
+  - Major refactor: dozens of new props (`aboveHeaderContent`, `graphicHeader`, `centeredContent`, `paddingX`, `contentMarginTop`, `formButtonTopMargin`, `selectMarginTop`, `smDontAdjustWidth`, etc.).
+  - Extracted `CardFormHeadline`/`CenteredHeader`, wrapped forms in a `Flex` when using graphic headers.
+- **InputSubtext**
+  - Now supports rich React-node `content`, distinguishes error vs. success styling, and respects “hide if blurred” logic.
+- **Toasts**
+  - Added optional `type` (`error` | `success` | `info`) to color toast backgrounds.
+- **Hooks**
+  - **`useFields`**: validator signature now `(value, fields?)`; added `matchesField` and `clabe` validators; smarter merge to prevent unnecessary rerenders.
+  - **`useQueryParamBooleans`**: new hook for parsing multiple boolean query parameters at once.
+- **Icons**
+  - Introduced dozens of new icons (e.g. `LogoMark`, `LightningBoltOutline`, `NonagonCheckmark`, `NubankLogo`) plus a full “central” icon set under `icons/central/`.
+  - Standardized on a `PathProps` interface for configurable strokes.
+- **Styles & Theme**
+  - **Colors**: added `gray35`, `gray7`, `white21`, `green37`, `blue32`, `linkLight`.
+  - **Layout helper**: `buildStandardContentInset` gains an `smDontAdjustWidth` opt-out.
+  - Tweaked `smHeaderLogoMarginLeft` (30px → 20px).
+  - **Button themes**: added `white21`, `linkLight`, and `tertiary` kinds.
+  - **CardForm theme**: now allows zero padding for new layout options.
@@ -2,18 +2,21 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <title>Lightspark OAuth Demo</title>
     <meta
       name="description"
       content="A demo of using oauth with the Lightspark JS SDK"
     />
-    <link rel="apple-touch-icon" href="/logo192.png" />
-    <link rel="manifest" href="/manifest.json" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
-    <title>Lightspark OAuth Demo</title>
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
+    <meta name="theme-color" content="#000000" />
+
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

@@ -1,21 +1,36 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Lightspark OAuth App",
+  "name": "Lightspark OAuth App",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon-32x32.png",
+      "sizes": "32x32",
+      "type": "image/png"
     },
     {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
+      "src": "/favicon-16x16.png",
+      "sizes": "16x16",
+      "type": "image/png"
     },
     {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
+      "src": "/favicon.ico",
+      "sizes": "16x16 32x32 48x48",
+      "type": "image/x-icon"
     }
   ],
   "start_url": ".",

@@ -2,24 +2,21 @@
 <html lang="en">
   <head data-commit="__CURRENT_COMMIT__">
     <meta charset="utf-8" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.ico" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-16.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <title>Lightspark UI Test App</title>
     <meta
       name="description"
       content="Lightspark is building infrastructure for the Lightning Network to deliver open payments for the Internet at scale. Lightspark services and tools aim to be the fastest, easiest and most reliable way to send and receive payments globally, with exceptionally low fees, using the Lightning Network."
     />
-    <link rel="apple-touch-icon" href="/logo192.png" />
 
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <meta name="theme-color" content="#000000" />
 
-    <title>Lightspark</title>
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   </head>
   <body>
     <!-- Google Tag Manager (noscript) -->

@@ -1,21 +1,36 @@
 {
-  "short_name": "Lightspark",
-  "name": "Lightspark App",
+  "short_name": "Lightspark UI Test App",
+  "name": "Lightspark UI Test App",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon-32x32.png",
+      "sizes": "32x32",
+      "type": "image/png"
     },
     {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
+      "src": "/favicon-16x16.png",
+      "sizes": "16x16",
+      "type": "image/png"
     },
     {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
+      "src": "/favicon.ico",
+      "sizes": "16x16 32x32 48x48",
+      "type": "image/x-icon"
     }
   ],
   "start_url": ".",

@@ -276,7 +276,7 @@ describe("toReactNodes", () => {
         to: TestAppRoutes.PageOne,
       },
     };
-    const iconNode = { icon: { name: "LogoBolt" as const } };
+    const iconNode = { icon: { name: "LogoMark" as const } };
     const nextLinkNode = {
       nextLink: {
         text: "Some next link node that should have typography applied",
@@ -330,7 +330,7 @@ describe("toReactNodes", () => {
         typography: { type: "Display", size: "Medium" } as const,
       },
     };
-    const iconNode = { icon: { name: "LogoBolt" } as const };
+    const iconNode = { icon: { name: "LogoMark" } as const };
     const externalLinkNode = {
       link: {
         text: "Some external link node that should have typography applied",

@@ -53,7 +53,8 @@
     "lint": "eslint .",
     "package:checks": "yarn publint && yarn attw --pack .",
     "postversion": "yarn build",
-    "test": "node --experimental-vm-modules $(yarn bin jest) --no-cache --runInBand --bail src/**/tests/**/*.test.ts",
+    "test-cmd": "node --experimental-vm-modules $(yarn bin jest) --no-cache --runInBand --bail",
+    "test": "yarn test-cmd -- src/**/tests/**/*.test.ts",
     "types:watch": "tsc-absolute --watch",
     "types": "tsc"
   },

@@ -5,7 +5,6 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc.js";
 import type { Client as WsClient } from "graphql-ws";
 import { createClient } from "graphql-ws";
-import NodeWebSocket from "ws";
 import { Observable } from "zen-observable-ts";
 
 import type Query from "./Query.js";
@@ -33,7 +32,8 @@ type BodyData = {
 };
 
 class Requester {
-  private readonly wsClient: WsClient;
+  private wsClient: Promise<WsClient>;
+  private resolveWsClient: ((value: WsClient) => void) | null = null;
   constructor(
     private readonly nodeKeyCache: NodeKeyCache,
     private readonly schemaEndpoint: string,
@@ -44,22 +44,43 @@ class Requester {
     private readonly signingKey?: SigningKey,
     private readonly fetchImpl: typeof fetch = fetch,
   ) {
+    this.wsClient = new Promise<WsClient>((resolve) => {
+      this.resolveWsClient = resolve;
+    });
+    void this.initWsClient(baseUrl, authProvider);
+    autoBind(this);
+  }
+
+  private async initWsClient(baseUrl: string, authProvider: AuthProvider) {
+    if (!this.resolveWsClient) {
+      /* If resolveWsClient is null assume already initialized: */
+      return this.wsClient;
+    }
+
     let websocketImpl;
-    if (typeof WebSocket === "undefined" && typeof window === "undefined") {
-      websocketImpl = NodeWebSocket;
+    if (isNode && typeof WebSocket === "undefined") {
+      const wsModule = await import("ws");
+      websocketImpl = wsModule.default;
     }
     let websocketProtocol = "wss";
     if (baseUrl.startsWith("http://")) {
       websocketProtocol = "ws";
     }
-    this.wsClient = createClient({
+
+    const wsClient = createClient({
       url: `${websocketProtocol}://${this.stripProtocol(this.baseUrl)}/${
         this.schemaEndpoint
       }`,
       connectionParams: () => authProvider.addWsConnectionParams({}),
       webSocketImpl: websocketImpl,
     });
-    autoBind(this);
+
+    if (this.resolveWsClient) {
+      this.resolveWsClient(wsClient);
+      this.resolveWsClient = null;
+    }
+
+    return wsClient;
   }
 
   public async executeQuery<T>(query: Query<T>): Promise<T | null> {
@@ -106,11 +127,31 @@ class Requester {
 
     return new Observable<{ data: T }>((observer) => {
       logger.trace(`Requester.subscribe observer`, observer);
-      return this.wsClient.subscribe(bodyData, {
-        next: (data) => observer.next(data as { data: T }),
-        error: (err) => observer.error(err),
-        complete: () => observer.complete(),
-      });
+
+      let cleanup: (() => void) | null = null;
+      let canceled = false;
+
+      void (async () => {
+        try {
+          const wsClient = await this.wsClient;
+          if (!canceled) {
+            cleanup = wsClient.subscribe(bodyData, {
+              next: (data) => observer.next(data as { data: T }),
+              error: (err) => observer.error(err),
+              complete: () => observer.complete(),
+            });
+          }
+        } catch (err) {
+          observer.error(err);
+        }
+      })();
+
+      return () => {
+        canceled = true;
+        if (cleanup) {
+          cleanup();
+        }
+      };
     });
   }