[uma-bridge] RTP warnings for existing bank account on account pageMo…

…re contex (#411)

* [uma-bridge] RTP warnings for existing bank account on account page (#11760)

More context here:
https://lightsparkgroup.slack.com/archives/C06TJHCEHL3/p1722545369679599

<img width="1308" alt="Screenshot 2024-08-01 at 1 48 09 PM"
src="https://github.com/user-attachments/assets/bd2f7449-c3b6-462f-87d9-ad0aec069be4">
GitOrigin-RevId: a67fd550b19e2f9facab8ab7d0c51b6754bab042

* [ui] Unify externalLink and filename props (#11798)

GitOrigin-RevId: 703a323ae665eede988c4c553a3e4c2ec2b0a29e

* Create happy-panthers-reflect.md

* [lightspark-sdk, wallet-sdk] Expose method to update logging level (#11812)

GitOrigin-RevId: 4b7da6cd74b77939beba316e7bc870206ffd0ced

* [lightspark-sdk, wallet-sdk] Collapse fn calls (#11817)

GitOrigin-RevId: 0e09f226e3f6a91effdbc1d2707ba863b47b49fe

* [site] Billing report UI fixes (#11799)

GitOrigin-RevId: 791a2566e22d934e5ed1f9bdeeddbf2303c1c4d2

* [uma-bridge] Rename to StatusRedirectOutlet, fix query invalidation (#11778)

GitOrigin-RevId: 076fc6defbeb2c7822f4258958ba689f2123142c

* [uma-bridge] Use transparent loading spinner for buttons (#11833)

GitOrigin-RevId: 81038fb580151dabd9a5b5d19fdf440441afc18c

* [uma-bridge] Bank account pending status indicators (#11834)

https://lightsparkgroup.slack.com/archives/C06TJHCEHL3/p1723080147341639?thread_ts=1723073850.102789&cid=C06TJHCEHL3

![Screenshot 2024-08-08 at
12.22.11 AM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/Zqq4woUVQjzXOTsETlSO/508066ee-a150-4823-8972-0e828b106cea.png)

GitOrigin-RevId: d1e8b11baf937a1fb33ac0cd868aaddd3151d6c3

* js sdk: add sdk for incoming / outgoing invoice payments (#11839)

Towards LIG-6130

This PR adds IncomingPaymentsForInvoice and OutgoingPaymentsForInvoice

GitOrigin-RevId: 9f3e042be6e3f8afccd2d33fdcc2e3bc465ac003

* [ui] remove gql and graphql-tag dependencies (#11867)

GitOrigin-RevId: 4059687c0f5a833c0086c33db2f8ee9befc1862d

* CI update lock file for PR

* [ui] Enable cjs code splitting to reduce package size from 25mb to 5mb (#11870)

GitOrigin-RevId: d8b4e03bdfdd91b9cf05c1614a9b99afbb38b1e0

* [ops] Add button to lock / unlock bridge user (#11873)

GitOrigin-RevId: f52936dba796b2291aa5f25c1b1f4e755727c3d7

* [uma-bridge] Enable setting partner mode via route and display on Start page (#11914)

GitOrigin-RevId: a66b3409f82f8131b34c8f7a88e04966689c42a5

* [ui] add appendToElement to Modal (#11910)

- adds prop to allow inserting the Modal element at a place other than document.body
- this is particularly useful for a shadow dom where the modal must be inserted there to get the encapsulated styles

GitOrigin-RevId: 8974bae3944839ac7ba02cd4e931f2fc0c976b8b

* Create little-planets-refuse.md

* Create wise-owls-trade.md

* Create wise-spies-report.md

* Create nice-llamas-kneel.md

---------

Co-authored-by: Corey Martin <[email protected]>
Co-authored-by: Matt Davis <[email protected]>
Co-authored-by: Brian Siao Tick Chong <[email protected]>
Co-authored-by: Lightspark Eng <[email protected]>

.changeset/happy-panthers-reflect.md

@@ -0,0 +1,6 @@
+---
+"@lightsparkdev/ui": patch
+---
+
+- Add onClick option for textNodes
+- Unify externalLink and filename props

.changeset/little-planets-refuse.md

@@ -0,0 +1,9 @@
+---
+"@lightsparkdev/ui": patch
+---
+
+[ui]
+- remove gql and graphql-tag dependencies
+- add appendToElement prop to Modal
+- enable cjs code splitting to reduce package size
+- unify externalLink and filename props

.changeset/nice-llamas-kneel.md

@@ -0,0 +1,5 @@
+---
+"@lightsparkdev/ui": patch
+---
+
+- Explicitly turn on experimental splitting support for CJS to reduce size of package from 25MB to 5MB

.changeset/wise-owls-trade.md

@@ -0,0 +1,5 @@
+---
+"@lightsparkdev/lightspark-sdk": patch
+---
+
+- adds IncomingPaymentsForInvoice and OutgoingPaymentsForInvoice

.changeset/wise-spies-report.md

@@ -0,0 +1,6 @@
+---
+"@lightsparkdev/lightspark-sdk": patch
+"@lightsparkdev/wallet-sdk": patch
+---
+
+- Enable setting logging level on client

packages/core/src/Logger.ts

@@ -22,6 +22,11 @@ export class Logger {
     this.loggingLevel = level;
   }
 
+  public setEnabled(enabled: boolean, level: LoggingLevel = LoggingLevel.Info) {
+    this.loggingEnabled = enabled;
+    this.loggingLevel = level;
+  }
+
   async updateLoggingEnabled(getLoggingEnabled: GetLoggingEnabled) {
     if (getLoggingEnabled) {
       this.loggingEnabled = await getLoggingEnabled();

packages/core/src/index.ts

@@ -1,7 +1,7 @@
 // Copyright ©, 2023-present, Lightspark Group, Inc. - All Rights Reserved
 
 export { default as LightsparkException } from "./LightsparkException.js";
-export { Logger, LoggingLevel } from "./Logger.js";
+export { Logger, LoggingLevel, logger } from "./Logger.js";
 export {
   default as ServerEnvironment,
   apiDomainForEnvironment,

packages/core/src/requester/Requester.ts

@@ -118,6 +118,13 @@ class Requester {
     skipAuth: boolean = false,
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any -- LIG-3400 */
   ): Promise<any> {
+    logger.trace(`Requester.makeRawRequest args`, {
+      queryPayload,
+      variables,
+      signingNodeId,
+      skipAuth,
+    });
+
     const operationNameRegex = /^\s*(query|mutation|subscription)\s+(\w+)/i;
     const operationMatch = queryPayload.match(operationNameRegex);
     if (!operationMatch || operationMatch.length < 3) {
@@ -179,10 +186,11 @@ class Requester {
       url,
       operationName: operation,
       variables,
+      headers,
     });
     const response = await fetch(url, {
       method: "POST",
-      headers: headers,
+      headers,
       body: bodyData,
     });
     if (!response.ok) {

packages/lightspark-sdk/src/client.ts

@@ -3,26 +3,26 @@
 import autoBind from "auto-bind";
 import type Observable from "zen-observable";
 
-import type {
-  AuthProvider,
-  CryptoInterface,
-  KeyOrAliasType,
-  Maybe,
-  Query,
-  SigningKey,
-} from "@lightsparkdev/core";
 import {
   DefaultCrypto,
   LightsparkAuthException,
   LightsparkException,
   LightsparkSigningException,
+  LoggingLevel,
   NodeKeyCache,
   Requester,
   SigningKeyType,
   StubAuthProvider,
   bytesToHex,
+  logger as coreLogger,
   createSha256Hash,
   pollUntil,
+  type AuthProvider,
+  type CryptoInterface,
+  type KeyOrAliasType,
+  type Maybe,
+  type Query,
+  type SigningKey,
 } from "@lightsparkdev/core";
 import packageJson from "../package.json";
 import NodeKeyLoaderCache from "./NodeKeyLoaderCache.js";
@@ -44,11 +44,13 @@ import { DecodeInvoice } from "./graphql/DecodeInvoice.js";
 import { DeleteApiToken } from "./graphql/DeleteApiToken.js";
 import { FetchUmaInvitation } from "./graphql/FetchUmaInvitation.js";
 import { FundNode } from "./graphql/FundNode.js";
+import { IncomingPaymentsForInvoice } from "./graphql/IncomingPaymentsForInvoice.js";
 import { InvoiceForPaymentHash } from "./graphql/InvoiceForPaymentHash.js";
 import { LightningFeeEstimateForInvoice } from "./graphql/LightningFeeEstimateForInvoice.js";
 import { LightningFeeEstimateForNode } from "./graphql/LightningFeeEstimateForNode.js";
 import type { AccountDashboard } from "./graphql/MultiNodeDashboard.js";
 import { MultiNodeDashboard } from "./graphql/MultiNodeDashboard.js";
+import { OutgoingPaymentsForInvoice } from "./graphql/OutgoingPaymentsForInvoice.js";
 import { OutgoingPaymentsForPaymentHash } from "./graphql/OutgoingPaymentsForPaymentHash.js";
 import { PayInvoice } from "./graphql/PayInvoice.js";
 import { PayUmaInvoice } from "./graphql/PayUmaInvoice.js";
@@ -62,6 +64,7 @@ import { TransactionSubscription } from "./graphql/TransactionSubscription.js";
 import { TransactionsForNode } from "./graphql/TransactionsForNode.js";
 import { WithdrawalFeeEstimate } from "./graphql/WithdrawalFeeEstimate.js";
 import { RiskRating, TransactionStatus } from "./index.js";
+import { logger } from "./logger.js";
 import Account from "./objects/Account.js";
 import { ApiTokenFromJson } from "./objects/ApiToken.js";
 import BitcoinNetwork from "./objects/BitcoinNetwork.js";
@@ -1531,6 +1534,70 @@ class LightsparkClient {
     });
   }
 
+  /**
+   * Fetches Outgoing payments for a given invoice if there are any.
+   *
+   * @param encodedInvoice encoded invoice associated with outgoing payment
+   * @param statuses Filter to only include payments with the given statuses. If not provided, all statuses are included.
+   */
+  public async outgoingPaymentsForInvoice(
+    encodedInvoice: string,
+    statuses: TransactionStatus[] | undefined = undefined,
+  ): Promise<OutgoingPayment[]> {
+    return await this.executeRawQuery({
+      queryPayload: OutgoingPaymentsForInvoice,
+      variables: {
+        encoded_invoice: encodedInvoice,
+        statuses: statuses,
+      },
+      constructObject: (responseJson: {
+        outgoing_payments_for_invoice: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+      }) => {
+        if (
+          !responseJson.outgoing_payments_for_invoice ||
+          !responseJson.outgoing_payments_for_invoice.payments
+        ) {
+          return [];
+        }
+        return responseJson.outgoing_payments_for_invoice.payments.map(
+          (payment) => OutgoingPaymentFromJson(payment),
+        );
+      },
+    });
+  }
+
+  /**
+   * Fetches Incoming payments for a given invoice if there are any.
+   *
+   * @param invoiceId id of associated invoice
+   * @param statuses Filter to only include payments with the given statuses. If not provided, all statuses are included.
+   */
+  public async incomingPaymentsForInvoice(
+    invoiceId: string,
+    statuses: TransactionStatus[] | undefined = undefined,
+  ): Promise<IncomingPayment[]> {
+    return await this.executeRawQuery({
+      queryPayload: IncomingPaymentsForInvoice,
+      variables: {
+        invoice_id: invoiceId,
+        statuses: statuses,
+      },
+      constructObject: (responseJson: {
+        incoming_payments_for_invoice: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+      }) => {
+        if (
+          !responseJson.incoming_payments_for_invoice ||
+          !responseJson.incoming_payments_for_invoice.payments
+        ) {
+          return [];
+        }
+        return responseJson.incoming_payments_for_invoice.payments.map(
+          (payment) => IncomingPaymentFromJson(payment),
+        );
+      },
+    });
+  }
+
   private async hashPhoneNumber(e164PhoneNumber: string): Promise<string> {
     const e164PhoneRegex = /^\+[1-9]\d{1,14}$/;
     if (!e164PhoneRegex.test(e164PhoneNumber)) {
@@ -1571,6 +1638,20 @@ class LightsparkClient {
   public executeRawQuery<T>(query: Query<T>): Promise<T | null> {
     return this.requester.executeQuery(query);
   }
+
+  /**
+   * Enable logging for debugging purposes
+   *
+   * @param enabled Whether logging should be enabled.
+   * @param level The logging level to use.
+   * */
+  public setLoggingEnabled(
+    enabled: boolean,
+    level: LoggingLevel = LoggingLevel.Info,
+  ) {
+    coreLogger.setEnabled(enabled, level);
+    logger.setEnabled(enabled, level);
+  }
 }
 
 export default LightsparkClient;

packages/lightspark-sdk/src/graphql/IncomingPaymentsForInvoice.ts

@@ -0,0 +1,21 @@
+// Copyright ©, 2023-present, Lightspark Group, Inc. - All Rights Reserved
+
+import { FRAGMENT as IncomingPaymentFragment } from "../objects/IncomingPayment.js";
+
+export const IncomingPaymentsForInvoice = `
+query IncomingPaymentsForInvoice(
+    $invoice_id: Hash32!,
+    $statuses: [TransactionStatus!] 
+) {
+    incoming_payments_for_invoice(input: {
+        invoice_id: $invoice_id
+        statuses: $statuses
+    }) {
+        payments {
+            ...IncomingPaymentFragment
+        }
+    }
+}
+
+${IncomingPaymentFragment}
+`;

packages/lightspark-sdk/src/graphql/OutgoingPaymentsForInvoice.ts

@@ -0,0 +1,21 @@
+// Copyright ©, 2023-present, Lightspark Group, Inc. - All Rights Reserved
+
+import { FRAGMENT as OutgoingPaymentFragment } from "../objects/OutgoingPayment.js";
+
+export const OutgoingPaymentsForInvoice = `
+query OutgoingPaymentsForInvoice(
+    $encoded_invoice: Hash32!,
+    $statuses: [TransactionStatus!] 
+) {
+    outgoing_payments_for_invoice(input: {
+        encoded_invoice: $encoded_invoice
+        statuses: $statuses
+    }) {
+        payments {
+            ...OutgoingPaymentFragment
+        }
+    }
+}
+
+${OutgoingPaymentFragment}
+`;

packages/ui/package.json

@@ -63,8 +63,6 @@
     "@simbathesailor/use-what-changed": "^2.0.0",
     "@svgr/core": "^8.1.0",
     "deepmerge": "^4.3.1",
-    "gql": "^1.1.2",
-    "graphql-tag": "^2.12.6",
     "libphonenumber-js": "^1.11.1",
     "lodash-es": "^4.17.21",
     "nanoid": "^4.0.0",

packages/ui/src/components/Badge.tsx

@@ -40,31 +40,39 @@ export function Badge<T extends TypographyTypeKey>({
   block = false,
   typography: typographyProp,
 }: BadgeProps<T>) {
-  const typography = {
+  const defaultTypography = {
     type: typographyProp?.type || "Label Moderate",
     props: {
       size: typographyProp?.size || "Small",
       color: typographyProp?.color || (kind === "danger" ? "danger" : "text"),
     },
   } as const;
 
-  const typographyMap = {
-    link: typography,
-    externalLink: typography,
-    text: typography,
-    nextLink: typography,
+  const defaultTypographyMap = {
+    link: defaultTypography,
+    externalLink: defaultTypography,
+    text: defaultTypography,
+    nextLink: defaultTypography,
   };
 
   let content: ToReactNodesArgs<T> | ReactNode = setDefaultReactNodesTypography(
     contentProp,
-    typographyMap,
+    defaultTypographyMap,
   );
 
   content = toReactNodes(content);
 
   return contentProp ? (
     <StyledBadge kind={kind} ml={ml} size={size} block={block}>
-      {icon ? <Icon name={icon.name} width={20} color={icon.color} /> : null}
+      {icon ? (
+        <Icon
+          name={icon.name}
+          width={20}
+          color={
+            icon.color ? icon.color : kind === "danger" ? "danger" : undefined
+          }
+        />
+      ) : null}
       <BadgeContent>{content}</BadgeContent>
     </StyledBadge>
   ) : null;