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,38 @@ 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">
+                  <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-red-900 rounded-full p-3">
+                  <PopiconsXSolid className="w-10 h-10 text-red-400 dark:text-red-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")}
+            {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">

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">
+                          <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-red-900 rounded-full w-8 h-8">
+                          <PopiconsXSolid className="w-5 h-5 text-red-400 dark:text-red-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" />
@@ -74,7 +88,17 @@ export default function TransactionsTable({
                       <p className="truncate">
                         {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">

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 ?? Date.now()) - (a.settleDate ?? Date.now());
   });
 
   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;
+  creationDate?: number;
   totalAmount: number;
   displayAmount?: [number, ACCOUNT_CURRENCIES];
   type: "received" | "sent";
+  state?: string;
 }
 
 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 ?? Date.now()) - (a.settleDate ?? Date.now())
         ),
       },
     };

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 ?? Date.now()) - (a.settleDate ?? Date.now());
       });
 
     return invoices;

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

@@ -88,24 +88,27 @@ 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,
-          settleDate: transaction.settled_at * 1000,
+          settled: transaction.state == "settled",
+          ...(transaction.state == "settled" && transaction.settled_at
+            ? { 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 +224,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;
+  creationDate?: number;
   totalAmount: number;
   totalAmountFiat?: string;
   displayAmount?: [number, ACCOUNT_CURRENCIES];

yarn.lock

@@ -675,13 +675,13 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.52.0.tgz#78fe5f117840f69dc4a353adf9b9cd926353378c"
   integrity sha512-mjZVbpaeMZludF2fsWLD0Z9gCref1Tk4i9+wddjRvpUNqqcndPkBD09N/Mapey0b3jaXbLm2kICwFv2E64QinA==
 
-"@getalby/sdk@^3.6.0":
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/@getalby/sdk/-/sdk-3.6.0.tgz#3ca47b9e150621bfb57228c0cbb8edb3b14c9394"
-  integrity sha512-ZpaxoZJO/71th1uaTt6viBnHn6RKTK+oCPH04sCTig+bn17cj1PAozrlIokHDQpTkkoegz6wx5w4nX+8aoSVSA==
+"@getalby/sdk@^3.8.2":
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/@getalby/sdk/-/sdk-3.8.2.tgz#84a184c46fdebf18652d6c06b92f07ed36129d3d"
+  integrity sha512-0F4ub/e+t93V9wzR5Vr+Xdfhhy5kK+ZKls/J3yX2YBT27X1Rd3QIPLCTUFCb4RaV6a/e17aZAVJF8Af7r9BeAg==
   dependencies:
-    eventemitter3 "^5.0.1"
-    nostr-tools "^1.17.0"
+    emittery "^1.0.3"
+    nostr-tools "2.9.4"
 
 "@headlessui/react@^1.7.18":
   version "1.7.18"
@@ -1079,6 +1079,13 @@
   dependencies:
     "@noble/hashes" "1.3.1"
 
+"@noble/[email protected]":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.2.0.tgz#92d7e12e4e49b23105a2555c6984d41733d65c35"
+  integrity sha512-oYclrNgRaM9SsBUBVbb8M6DTV7ZHRTKugureoYEncY5c65HOmRzvSiTE3y5CYaPYJA/GVkrhXEoF0M3Ya9PMnw==
+  dependencies:
+    "@noble/hashes" "1.3.2"
+
 "@noble/curves@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@noble/curves/-/curves-1.4.0.tgz#f05771ef64da724997f69ee1261b2417a49522d6"
@@ -1098,6 +1105,11 @@
   resolved "https://registry.npmjs.org/@noble/hashes/-/hashes-1.3.1.tgz"
   integrity sha512-EbqwksQwz9xDRGfDST86whPBgM65E0OH/pCgqW0GBVzO22bNE+NuIbeTb714+IfSjU3aRk47EUvXIb5bTsenKA==
 
+"@noble/[email protected]", "@noble/hashes@^1.1.5":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.2.tgz#6f26dbc8fbc7205873ce3cee2f690eba0d421b39"
+  integrity sha512-MVC8EAQp7MvEcm30KWENFjgR+Mkmf+D189XJTkFIlwohU5hcBbn1ZkKq7KVTi2Hme3PMGF390DaL52beVrIihQ==
+
 "@noble/[email protected]", "@noble/hashes@^1.3.1", "@noble/hashes@~1.3.2":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.3.tgz#39908da56a4adc270147bb07968bf3b16cfe1699"
@@ -1108,11 +1120,6 @@
   resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.4.0.tgz#45814aa329f30e4fe0ba49426f49dfccdd066426"
   integrity sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==
 
-"@noble/hashes@^1.1.5":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.2.tgz#6f26dbc8fbc7205873ce3cee2f690eba0d421b39"
-  integrity sha512-MVC8EAQp7MvEcm30KWENFjgR+Mkmf+D189XJTkFIlwohU5hcBbn1ZkKq7KVTi2Hme3PMGF390DaL52beVrIihQ==
-
 "@noble/hashes@^1.2.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@noble/hashes/-/hashes-1.3.0.tgz#085fd70f6d7d9d109671090ccae1d3bec62554a1"
@@ -4196,6 +4203,11 @@ emittery@^0.13.1:
   resolved "https://registry.npmjs.org/emittery/-/emittery-0.13.1.tgz"
   integrity sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==
 
+emittery@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/emittery/-/emittery-1.0.3.tgz#c9d2a9c689870f15251bb13b31c67715c26d69ac"
+  integrity sha512-tJdCJitoy2lrC2ldJcqN4vkqJ00lT+tOWNT1hBJjO/3FDMJa5TTIiYGCKGkn/WfCyOzUMObeohbVTj00fhiLiA==
+
 emoji-log@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/emoji-log/-/emoji-log-1.0.2.tgz"
@@ -7268,6 +7280,20 @@ normalize-range@^0.1.2:
   resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz"
   integrity "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI= sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA=="
 
+[email protected]:
+  version "2.9.4"
+  resolved "https://registry.yarnpkg.com/nostr-tools/-/nostr-tools-2.9.4.tgz#ec0e1faa95bf9e5fee30b36c842a270135f40183"
+  integrity sha512-Powumwkp+EWbdK1T8IsEX4daTLQhtWJvitfZ6OP2BdU1jJZvNlUp3SQB541UYw4uc9jgLbxZW6EZSdZoSfIygQ==
+  dependencies:
+    "@noble/ciphers" "^0.5.1"
+    "@noble/curves" "1.2.0"
+    "@noble/hashes" "1.3.1"
+    "@scure/base" "1.1.1"
+    "@scure/bip32" "1.3.1"
+    "@scure/bip39" "1.2.1"
+  optionalDependencies:
+    nostr-wasm v0.1.0
+
 nostr-tools@^1.17.0:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/nostr-tools/-/nostr-tools-1.17.0.tgz#b6f62e32fedfd9e68ec0a7ce57f74c44fc768e8c"
@@ -7280,6 +7306,11 @@ nostr-tools@^1.17.0:
     "@scure/bip32" "1.3.1"
     "@scure/bip39" "1.2.1"
 
+[email protected]:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/nostr-wasm/-/nostr-wasm-0.1.0.tgz#17af486745feb2b7dd29503fdd81613a24058d94"
+  integrity sha512-78BTryCLcLYv96ONU8Ws3Q1JzjlAt+43pWQhIl86xZmWeegYCNLPml7yQ+gG3vR6V5h4XGj+TxO+SS5dsThQIA==
+
 npm-run-path@^4.0.1:
   version "4.0.1"
   resolved "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz"