[site] Display encoded payment request and internal status on received payment d

.changeset/warm-vans-change.md

@@ -0,0 +1,23 @@
+---
+"@lightsparkdev/ui": patch
+---
+
+- Remove unused icons (#10179)
+- Preload icons (#10182)
+- Fix invalid color string (#10231)
+- Add ChevronLeft icon (#10198)
+- Add InfoIconTooltip component and improve Tooltip (#10236)
+- Add Radio component (#10350)
+- Typography and theme improvements (#10331)
+- Add Banner component (#10262)
+- Consolidate specifying full precision for currencies (#1095)
+- Add NextLink as a ToReactNode type (#10432)
+- Button improvements (#10507)
+- Update to latest typography tokens (#10536)
+- Add transformGQLName (#10592)
+- ToReactNodes improvements and tests (#10562)
+- Add icons (#10572)
+- Provide icon color inversion when color is specified (#10630)
+- Add PhoneInput component (#10702)
+- Add useDebounce hook (#10741)
+- Add common Drawer component, optionally use in Modal (#10819)

.changeset/wild-beans-suffer.md

@@ -0,0 +1,6 @@
+---
+"@lightsparkdev/core": minor
+---
+
+- Move formatCurrencyStr options into an object (#1095)
+- Compress requests with deflate (#10512)

.changeset/wise-tables-knock.md

@@ -0,0 +1,12 @@
+---
+"@lightsparkdev/ui": major
+---
+
+- Move PageSectionNav to new UI component (#9971) 
+- Move all PageSection components and Dropdown to public UI (#9979) 
+- Allow Modal submit to be a link (#10066)
+- Move themes to own file. Simplify colors (#10167) 
+- Move typography and tokens (#10172) 
+- Improve theme typography tokens and add bridge tokens (#10189) 
+- Move typography to components (#10178)
+- Update dependencies

apps/examples/oauth-app/package.json

@@ -27,7 +27,7 @@
     "eslint-watch": "^8.0.0",
     "tsc-absolute": "^1.0.1",
     "typescript": "^5.0.0",
-    "vite": "^5.0.5"
+    "vite": "^5.1.6"
   },
   "scripts": {
     "start": "yarn vite",

apps/examples/oauth-app/src/index.tsx

@@ -7,7 +7,7 @@ import "./index.css";
 import reportWebVitals from "./reportWebVitals";
 import { Root } from "./Root";
 import { ThemeProvider } from "@emotion/react";
-import { themes } from "@lightsparkdev/ui/styles/colors";
+import { themes } from "@lightsparkdev/ui/styles/themes";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement

apps/examples/oauth-app/src/pages/DashboardPage.tsx

@@ -46,7 +46,7 @@ function DashboardPage() {
       <div>
         <Header>
           <Button
-            primary
+            kind="primary"
             text="Sign out"
             onClick={() => {
               auth.signout().catch((err) => {

apps/examples/oauth-app/src/pages/LoginPage.tsx

@@ -51,7 +51,7 @@ const LoginPage = () => {
   return (
     <Container>
       <Description>Log into your Lightspark account to continue</Description>
-      <Button text="Login" primary onClick={handleLogin} />
+      <Button text="Login" kind="primary" onClick={handleLogin} />
     </Container>
   );
 };

apps/examples/react-wallet-app/package.json

@@ -38,7 +38,7 @@
     "eslint-watch": "^8.0.0",
     "tsc-absolute": "^1.0.1",
     "typescript": "^5.0.0",
-    "vite": "^5.0.5"
+    "vite": "^5.1.6"
   },
   "engines": {
     "node": ">=18"

apps/examples/react-wallet-app/src/components/Dashboard.tsx

@@ -33,7 +33,7 @@ const Dashboard = ({ data }: { data: WalletDashboard }) => {
       <ActionsBar>
         <Button
           text="Send Payment"
-          primary
+          kind="primary"
           // mt={isSm ? 0 : 24}
           // loading={sendingPayment}
           // onClick={onSubmit}

apps/examples/react-wallet-app/src/index.tsx

@@ -1,5 +1,5 @@
 import { ThemeProvider } from "@emotion/react";
-import { themes } from "@lightsparkdev/ui/styles/colors";
+import { themes } from "@lightsparkdev/ui/styles/themes";
 import { GlobalStyles } from "@lightsparkdev/ui/styles/global";
 import React from "react";
 import ReactDOM from "react-dom/client";

apps/examples/react-wallet-app/src/pages/DashboardPage.tsx

@@ -103,7 +103,7 @@ function DashboardPage() {
         <Header>
           <Button
             text="Sign out"
-            primary
+            kind="primary"
             onClick={() => {
               void (async () => {
                 await auth.logout();
@@ -130,7 +130,7 @@ const DeployWallet = ({
   return (
     <div>
       <h1>Wallet not yet deployed. Status: {status}</h1>
-      <Button primary onClick={onDeploy} text="Deploy Wallet" />
+      <Button kind="primary" onClick={onDeploy} text="Deploy Wallet" />
     </div>
   );
 };
@@ -145,7 +145,7 @@ const InitializeWallet = ({
   return (
     <div>
       <h1>Wallet not yet initialized. Status: {status}</h1>
-      <Button primary onClick={onInitialize} text="Initialize Wallet" />
+      <Button kind="primary" onClick={onInitialize} text="Initialize Wallet" />
     </div>
   );
 };

apps/examples/react-wallet-app/src/pages/LoginPage.tsx

@@ -30,14 +30,19 @@ const LoginPage = () => {
 
   const generateDemoTokens = async () => {
     const { token: jwt, accountId: jwtServerAccountId } = await fetch(
-      `${jwtServerUrl.replace(/\/$/, "")}/getJwt?userId=${userName}&password=${password}`,
+      `${jwtServerUrl.replace(
+        /\/$/,
+        ""
+      )}/getJwt?userId=${userName}&password=${password}`,
       {
         method: "GET",
         headers: {
           "ngrok-skip-browser-warning": "true",
-        }
+        },
       }
-    ).then((res) => res.json() as Promise<{ token: string, accountId: string }>);
+    ).then(
+      (res) => res.json() as Promise<{ token: string; accountId: string }>
+    );
     await auth.login(jwtServerAccountId, jwt);
     navigate(Routes.Dashboard);
   };
@@ -62,7 +67,7 @@ const LoginPage = () => {
           onChange={(e) => setJwt(e.target.value)}
         />
       </Label>
-      <Button primary onClick={handleLogin} text="Login" />
+      <Button kind="primary" onClick={handleLogin} text="Login" />
 
       <Description>
         Alternatively, use our demo jwt server with a user name and password.
@@ -94,7 +99,7 @@ const LoginPage = () => {
         />
       </Label>
       <Button
-        primary
+        kind="primary"
         onClick={() => {
           void generateDemoTokens();
         }}

apps/examples/settings.json

@@ -13,5 +13,8 @@
   },
   "umaVasp": {
     "port": 3104
+  },
+  "uiTestApp": {
+    "port": 3105
   }
 }

apps/examples/streaming-wallet-extension/package.json

@@ -41,7 +41,7 @@
     "eslint-watch": "^8.0.0",
     "tsc-absolute": "^1.0.1",
     "typescript": "^5.0.0",
-    "vite": "^5.0.5"
+    "vite": "^5.1.6"
   },
   "engines": {
     "node": ">=18"

apps/examples/streaming-wallet-extension/src/App.tsx

@@ -17,14 +17,13 @@ import StreamingDemoAccountCredentials from "./auth/StreamingDemoCredentials";
 import VideoProgressCache from "./background/VideoProgressCache";
 import { clearStorageKeepingInstanceId } from "./common/storage";
 import { findActiveStreamingDemoTabs } from "./common/streamingTabs";
-import CirclePlusIcon from "./components/CirclePlusIcon";
 import CurrencyAmountElement from "./components/CurrencyAmount";
 import CurrencyAmountRaw from "./components/CurrencyAmountRaw";
-import LeftArrow from "./components/LeftArrow";
 import { LoadingSpinner } from "./components/Loading";
 import StreamingTransactionChip from "./components/StreamingTransactionChip";
 import TransactionRow from "./components/TransactionRow";
 import { getWalletClient } from "./lightsparkClientProvider";
+import { Icon } from "@lightsparkdev/ui/components";
 
 enum Screen {
   Balance,
@@ -224,7 +223,7 @@ function Header(screen: Screen, setScreen: (screen: Screen) => void) {
     return (
       <div className="header">
         <button onClick={() => setScreen(Screen.Balance)}>
-          <LeftArrow />
+          <Icon name="LeftArrow" width={16} />
         </button>
         <HeaderBackText>Transactions</HeaderBackText>
       </div>
@@ -341,7 +340,7 @@ function LoginScreen(props: {
       <CreateWalletButton onClick={createWallet} disabled={isLoading}>
         {!isLoading ? (
           <span style={{ marginInlineEnd: "8px", height: "13px" }}>
-            <CirclePlusIcon />
+            <Icon name="CirclePlus" width={12} />
           </span>
         ) : (
           <></>

apps/examples/ui-test-app/.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+  extends: ["@lightsparkdev/eslint-config/react-lib"],
+  /* Mainly keeping this file around for reference for future public react lib, ignore in lint: */
+  ignorePatterns: ["src/generated/"],
+  overrides: [
+    {
+      files: ["**/src/**/*.ts?(x)"],
+      excludedFiles: ["**/tests/**/*.ts?(x)"],
+      rules: {
+        /* Temporarily turn off no-explicit-any until these can be resolved LIG-3400: */
+        "@typescript-eslint/no-explicit-any": "off",
+        /* Too many of these type-aware errors, turn off for now: */
+        "@typescript-eslint/no-unsafe-assignment": "off",
+        "@typescript-eslint/no-floating-promises": "off",
+        "@typescript-eslint/no-misused-promises": "off",
+        "@typescript-eslint/no-unsafe-argument": "off",
+        "@typescript-eslint/no-unsafe-member-access": "off",
+        "@typescript-eslint/no-unsafe-call": "off",
+        "@typescript-eslint/no-unsafe-return": "off",
+      },
+    },
+  ],
+};

apps/examples/ui-test-app/.prettierignore

@@ -0,0 +1 @@
+src/generated/

apps/examples/ui-test-app/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-organize-imports"]
+}

apps/examples/ui-test-app/gql-codegen.yml

@@ -0,0 +1,11 @@
+overwrite: true
+schema: ["../../../../sparkcore/graphql_schemas/first_party_schema.graphql"]
+documents: ["src/**/*.tsx"]
+generates:
+  src/generated/graphql.tsx:
+    plugins:
+      - "typescript"
+      - "typescript-operations"
+      - "typescript-react-apollo"
+    config:
+      nonOptionalTypename: true

apps/examples/ui-test-app/index.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<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" />
+    <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="manifest" href="/manifest.json" crossorigin="use-credentials" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+    <title>Lightspark</title>
+  </head>
+  <body>
+    <!-- Google Tag Manager (noscript) -->
+    <noscript>
+      <!-- Can't switch the gtm id dynamically without js, assume prod: -->
+      <iframe
+        src="https://www.googletagmanager.com/ns.html?id=<%= gtmProdId %>"
+        height="0"
+        width="0"
+        style="display: none; visibility: hidden"
+      ></iframe
+    ></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+
+    <div id="root"></div>
+
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

packages/ui/jest.config.ts → apps/examples/ui-test-app/jest.config.ts

@@ -19,9 +19,6 @@ const config: JestConfigWithTsJest = {
   testTimeout: 20000,
   moduleNameMapper: {
     "^.+\\.(css|svg|png)$": "identity-obj-proxy",
-    /* ts-jest doesn't support .js imports which are required for making imports work in
-       the published ui package. See issue https://bit.ly/3TF1uSS */
-    "(.+)\\.js": "$1",
   },
   setupFiles: ["<rootDir>/jest/setup.ts"],
   setupFilesAfterEnv: ["<rootDir>/jest/setupAfterEnv.ts"],

apps/examples/ui-test-app/jest/setup.ts

@@ -0,0 +1,23 @@
+/* Import node libs to polyfill browser objects */
+import crypto from "crypto";
+import ResizeObserver from "resize-observer-polyfill";
+
+import { TextDecoder, TextEncoder } from "util";
+
+Object.defineProperties(global.self, {
+  crypto: {
+    value: {
+      getRandomValues: (arr: NodeJS.ArrayBufferView) =>
+        crypto.randomFillSync(arr),
+      subtle: crypto.webcrypto.subtle,
+    },
+  },
+  TextEncoder: {
+    value: TextEncoder,
+  },
+  TextDecoder: {
+    value: TextDecoder,
+  },
+});
+
+global.ResizeObserver = ResizeObserver;

apps/examples/ui-test-app/jest/setupAfterEnv.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";