feat: show pending and failed transactions for nwc

package.json

@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@bitcoinerlab/secp256k1": "^1.1.1",
-    "@getalby/sdk": "^3.6.0",
+    "@getalby/sdk": "^3.8.2",
     "@headlessui/react": "^1.7.18",
     "@lightninglabs/lnc-web": "^0.3.1-alpha",
     "@noble/ciphers": "^0.5.1",

src/app/components/TransactionsTable/TransactionModal.tsx

@@ -3,6 +3,7 @@ import {
   PopiconsArrowUpSolid,
   PopiconsChevronBottomLine,
   PopiconsChevronTopLine,
+  PopiconsXSolid,
 } from "@popicons/react";
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
@@ -56,17 +57,43 @@ export default function TransactionModal({
         <div>
           <div className="flex items-center justify-center">
             {getTransactionType(transaction) == "outgoing" ? (
-              <div className="flex justify-center items-center bg-orange-100 dark:bg-orange-950 rounded-full p-3">
-                <PopiconsArrowUpSolid className="w-10 h-10 text-orange-400 dark:text-amber-600 stroke-[1px] stroke-orange-400 dark:stroke-amber-600" />
-              </div>
+              transaction.state === "pending" ? (
+                <div className="flex justify-center items-center bg-orange-100 dark:bg-orange-950 rounded-full p-3 animate-pulse">
+                  <PopiconsArrowUpSolid className="w-10 h-10 rotate-45 text-orange-400 dark:text-amber-600 stroke-[1px] stroke-orange-400 dark:stroke-amber-600" />
+                </div>
+              ) : transaction.state === "failed" ? (
+                <div className="flex justify-center items-center bg-red-100 dark:bg-rose-950 rounded-full p-3">
+                  <PopiconsXSolid className="w-10 h-10 text-red-400 dark:text-rose-600 stroke-[1px] stroke-red-400 dark:stroke-red-600" />
+                </div>
+              ) : (
+                <div className="flex justify-center items-center bg-orange-100 dark:bg-orange-950 rounded-full p-3">
+                  <PopiconsArrowUpSolid className="w-10 h-10 text-orange-400 dark:text-amber-600 stroke-[1px] stroke-orange-400 dark:stroke-amber-600" />
+                </div>
+              )
             ) : (
               <div className="flex justify-center items-center bg-green-100 dark:bg-emerald-950 rounded-full p-3">
                 <PopiconsArrowDownSolid className="w-10 h-10 text-green-500 dark:text-emerald-500 stroke-[1px] stroke-green-400 dark:stroke-emerald-500" />
               </div>
             )}
           </div>
-          <h2 className="mt-4 text-md text-gray-900 font-bold dark:text-white text-center">
-            {transaction.type == "received" ? t("received") : t("sent")}
+
+          <h2
+            className={classNames(
+              "mt-4 text-md text-gray-900 font-bold dark:text-white text-center",
+              transaction.state == "pending" && "animate-pulse text-gray-400"
+            )}
+          >
+            {transaction.type == "received"
+              ? t("received")
+              : t(
+                  transaction.state === "settled"
+                    ? "sent"
+                    : transaction.state === "pending"
+                    ? "sending"
+                    : transaction.state === "failed"
+                    ? "failed"
+                    : "sent"
+                )}
           </h2>
         </div>
         <div className="flex items-center text-center justify-center dark:text-white">
@@ -76,6 +103,8 @@ export default function TransactionModal({
                 "text-3xl font-medium",
                 transaction.type == "received"
                   ? "text-green-600 dark:text-emerald-500"
+                  : transaction.state == "failed"
+                  ? "text-red-400 dark:text-rose-600"
                   : "text-orange-600 dark:text-amber-600"
               )}
             >

src/app/components/TransactionsTable/index.tsx

@@ -1,5 +1,9 @@
 import Loading from "@components/Loading";
-import { PopiconsArrowDownSolid, PopiconsArrowUpSolid } from "@popicons/react";
+import {
+  PopiconsArrowDownSolid,
+  PopiconsArrowUpSolid,
+  PopiconsXSolid,
+} from "@popicons/react";
 
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -60,9 +64,19 @@ export default function TransactionsTable({
                 <div className="flex gap-3">
                   <div className="flex items-center">
                     {type == "outgoing" ? (
-                      <div className="flex justify-center items-center bg-orange-100 dark:bg-orange-950 rounded-full w-8 h-8">
-                        <PopiconsArrowUpSolid className="w-5 h-5 text-orange-400 dark:text-amber-600 stroke-[1px] stroke-orange-400 dark:stroke-amber-600" />
-                      </div>
+                      tx.state === "pending" ? (
+                        <div className="flex justify-center items-center bg-orange-100 dark:bg-orange-950 rounded-full w-8 h-8 animate-pulse">
+                          <PopiconsArrowUpSolid className="w-5 h-5 rotate-45 text-orange-400 dark:text-amber-600 stroke-[1px] stroke-orange-400 dark:stroke-amber-600" />
+                        </div>
+                      ) : tx.state === "failed" ? (
+                        <div className="flex justify-center items-center bg-red-100 dark:bg-rose-950 rounded-full w-8 h-8">
+                          <PopiconsXSolid className="w-5 h-5 text-red-400 dark:text-rose-600 stroke-[1px] stroke-red-400 dark:stroke-red-600" />
+                        </div>
+                      ) : (
+                        <div className="flex justify-center items-center bg-orange-100 dark:bg-orange-950 rounded-full w-8 h-8">
+                          <PopiconsArrowUpSolid className="w-5 h-5 text-orange-400 dark:text-amber-600 stroke-[1px] stroke-orange-400 dark:stroke-amber-600" />
+                        </div>
+                      )
                     ) : (
                       <div className="flex justify-center items-center bg-green-100 dark:bg-emerald-950 rounded-full w-8 h-8">
                         <PopiconsArrowDownSolid className="w-5 h-5 text-green-500 dark:text-emerald-500 stroke-[1px] stroke-green-400 dark:stroke-emerald-500" />
@@ -71,10 +85,25 @@ export default function TransactionsTable({
                   </div>
                   <div className="overflow-hidden mr-3">
                     <div className="text-sm font-medium text-black truncate dark:text-white">
-                      <p className="truncate">
+                      <p
+                        className={classNames(
+                          "truncate",
+                          tx.state == "pending" && "animate-pulse"
+                        )}
+                      >
                         {tx.title ||
                           tx.boostagram?.message ||
-                          (type == "incoming" ? t("received") : t("sent"))}
+                          (type == "incoming"
+                            ? t("received")
+                            : t(
+                                tx.state === "settled"
+                                  ? "sent"
+                                  : tx.state === "pending"
+                                  ? "sending"
+                                  : tx.state === "failed"
+                                  ? "failed"
+                                  : "sent"
+                              ))}
                       </p>
                     </div>
                     <p className="text-xs text-gray-400 dark:text-neutral-500">
@@ -88,6 +117,8 @@ export default function TransactionsTable({
                           "text-sm",
                           type == "incoming"
                             ? "text-green-600 dark:text-emerald-500"
+                            : tx.state == "failed"
+                            ? "text-red-600 dark:text-rose-500"
                             : "text-orange-600 dark:text-amber-600"
                         )}
                       >

src/app/hooks/useTransactions.ts

@@ -16,13 +16,15 @@ export const useTransactions = () => {
         const getTransactionsResponse = await api.getTransactions({
           limit,
         });
-
         const transactions = getTransactionsResponse.transactions.map(
           (transaction) => ({
             ...transaction,
             title: transaction.memo,
-            date: dayjs(transaction.settleDate).fromNow(),
-            timestamp: transaction.settleDate,
+            date: dayjs(
+              transaction.settleDate || transaction.creationDate
+            ).fromNow(),
+            timestamp:
+              transaction.settleDate || transaction.creationDate || Date.now(),
           })
         );
 

src/common/utils/helpers.ts

@@ -68,7 +68,7 @@ export function mergeTransactions(
   payments: ConnectorTransaction[]
 ): ConnectorTransaction[] {
   const mergedTransactions = [...invoices, ...payments].sort((a, b) => {
-    return b.settleDate - a.settleDate;
+    return (b.settleDate ?? 0) - (a.settleDate ?? 0);
   });
 
   return mergedTransactions;

src/extension/background-script/actions/ln/getTransactions.ts

@@ -9,19 +9,22 @@ const getTransactions = async (message: MessageGetTransactions) => {
   const connector = await state.getState().getConnector();
   try {
     const result = await connector.getTransactions();
-
-    let transactions: ConnectorTransaction[] = result.data.transactions
-      .filter((transaction) => transaction.settled)
-      .map((transaction) => {
-        const boostagram = utils.getBoostagramFromInvoiceCustomRecords(
-          transaction.custom_records
-        );
-        return {
-          ...transaction,
-          boostagram,
-          paymentHash: transaction.payment_hash,
-        };
-      });
+    const isNWC = connector.connectorType == "nwc";
+    // we show pending and failed transactions for nwc. pass on all transactions for nwc connector to frontend
+    let transactions: ConnectorTransaction[] = result.data.transactions;
+    if (!isNWC) {
+      transactions = transactions.filter((transaction) => transaction.settled);
+    }
+    transactions = transactions.map((transaction) => {
+      const boostagram = utils.getBoostagramFromInvoiceCustomRecords(
+        transaction.custom_records
+      );
+      return {
+        ...transaction,
+        boostagram,
+        paymentHash: transaction.payment_hash,
+      };
+    });
 
     if (limit) {
       transactions = transactions.slice(0, limit);

src/extension/background-script/connectors/connector.interface.ts

@@ -31,10 +31,12 @@ export interface ConnectorTransaction {
   /**
    * Settle date in UNIX milliseconds
    */
-  settleDate: number;
+  settleDate: number | null;
+  creationDate?: number;
   totalAmount: number;
   displayAmount?: [number, ACCOUNT_CURRENCIES];
   type: "received" | "sent";
+  state?: "settled" | "pending" | "failed";
 }
 
 export interface MakeInvoiceArgs {
@@ -150,6 +152,7 @@ export default interface Connector {
   getOAuthToken?(): OAuthToken | undefined;
   getSwapInfo?(): Promise<SwapInfoResponse>;
   createSwap?(params: CreateSwapParams): Promise<CreateSwapResponse>;
+  connectorType?: string;
 }
 
 export function flattenRequestMethods(methods: string[]) {

src/extension/background-script/connectors/lawallet.ts

@@ -128,7 +128,7 @@ export default class LaWallet implements Connector {
     return {
       data: {
         transactions: parsedTransactions.sort(
-          (a, b) => b.settleDate - a.settleDate
+          (a, b) => (b.settleDate ?? 0) - (a.settleDate ?? 0)
         ),
       },
     };

src/extension/background-script/connectors/lndhub.ts

@@ -120,7 +120,7 @@ export default class LndHub implements Connector {
         })
       )
       .sort((a, b) => {
-        return b.settleDate - a.settleDate;
+        return (b.settleDate ?? 0) - (a.settleDate ?? 0);
       });
 
     return invoices;

src/extension/background-script/connectors/nwc.ts

@@ -88,24 +88,25 @@ class NWCConnector implements Connector {
 
   async getTransactions(): Promise<GetTransactionsResponse> {
     const listTransactionsResponse = await this.nwc.listTransactions({
-      unpaid: false,
       limit: 50, // restricted by relay max event payload size
+      unpaid_outgoing: true,
     });
-
     const transactions: ConnectorTransaction[] =
       listTransactionsResponse.transactions.map(
         (transaction, index): ConnectorTransaction => ({
           id: `${index}`,
           memo: transaction.description,
           preimage: transaction.preimage,
           payment_hash: transaction.payment_hash,
-          settled: true,
+          settled: transaction.state == "settled",
           settleDate: transaction.settled_at * 1000,
+          creationDate: transaction.created_at * 1000,
           totalAmount: Math.floor(transaction.amount / 1000),
           type: transaction.type == "incoming" ? "received" : "sent",
           custom_records: this.tlvToCustomRecords(
             transaction.metadata?.["tlv_records"] as TLVRecord[] | undefined
           ),
+          state: transaction.state,
         })
       );
     return {
@@ -221,6 +222,10 @@ class NWCConnector implements Connector {
     throw new Error("Method not implemented.");
   }
 
+  get connectorType(): string {
+    return "nwc";
+  }
+
   private customRecordsToTlv(
     customRecords: Record<string, string>
   ): TlvRecord[] {

src/i18n/locales/en/translation.json

@@ -1253,6 +1253,8 @@
       "payment_hash": "Payment Hash",
       "received": "Received",
       "sent": "Sent",
+      "sending": "Sending",
+      "failed": "Failed",
       "date_time": "Date & Time",
       "boostagram": {
         "sender": "Sender",

src/types.ts

@@ -787,6 +787,7 @@ export type Transaction = {
   type?: "sent" | "received";
   value?: string;
   publisherLink?: string; // either the invoice URL if on PublisherSingleView, or the internal link to Publisher
+  state?: "settled" | "pending" | "failed";
 };
 
 export interface DbPayment {
@@ -958,7 +959,8 @@ export interface Invoice {
   memo?: string;
   type: "received" | "sent";
   settled: boolean;
-  settleDate: number;
+  settleDate: number | null;
+  creationDate?: number;
   totalAmount: number;
   totalAmountFiat?: string;
   displayAmount?: [number, ACCOUNT_CURRENCIES];