From 61e979ecaf6aa1b9a085e4a115e43bf48721d672 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Fri, 8 Sep 2023 11:16:12 +0200
Subject: [PATCH 01/40] feat: new transaction list

---
 .../components/TransactionsTable/index.tsx    | 229 +++++++-----------
 1 file changed, 87 insertions(+), 142 deletions(-)

diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
index ab155106d3..a2d786a8e1 100644
--- a/src/app/components/TransactionsTable/index.tsx
+++ b/src/app/components/TransactionsTable/index.tsx
@@ -1,13 +1,14 @@
-import { CaretDownIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+} from "@bitcoin-design/bitcoin-icons-react/filled";
 import Loading from "@components/Loading";
-import { Disclosure } from "@headlessui/react";
 import { useTranslation } from "react-i18next";
-import Button from "~/app/components/Button";
+import Badge from "~/app/components/Badge";
 import { useSettings } from "~/app/context/SettingsContext";
+import { classNames } from "~/app/utils";
 import { Transaction } from "~/types";
 
-import Badge from "../Badge";
-
 export type Props = {
   transactions: Transaction[] | null | undefined;
   loading?: boolean;
@@ -29,146 +30,90 @@ export default function TransactionsTable({
   ) : !transactions?.length && noResultMsg ? (
     <p className="text-gray-500 dark:text-neutral-400">{noResultMsg}</p>
   ) : (
-    <>
-      <div className="shadow overflow-hidden rounded-lg bg-white divide-y divide-gray-200 dark:divide-white/10 dark:bg-surface-02dp">
-        {transactions?.map((tx) => (
-          <div key={tx.id} className="px-3 py-2">
-            <Disclosure>
-              {({ open }) => (
-                <>
-                  <div className="flex">
-                    <div className="overflow-hidden mr-3">
-                      <div
-                        className="
-                  text-sm font-medium text-gray-900 truncate dark:text-white"
+    <div className="shadow overflow-hidden rounded-lg bg-white divide-y divide-gray-200 dark:divide-white/10 dark:bg-surface-02dp">
+      {transactions?.map((tx) => {
+        const type = [tx.type && "sent", "sending"].includes(tx.type)
+          ? "outgoing"
+          : "incoming";
+
+        return (
+          <div
+            key={tx.id}
+            className="px-3 py-2 hover:bg-gray-100 dark:hover:bg-surface-02dp cursor-pointer"
+          >
+            <div className="flex gap-3">
+              <div className="flex items-center">
+                {type == "outgoing" ? (
+                  <div className="flex justify-center items-center bg-orange-100 rounded-full w-8 h-8">
+                    <ArrowUpIcon className="w-6 h-6 text-orange-400" />
+                  </div>
+                ) : (
+                  <div className="flex justify-center items-center bg-green-100 rounded-full w-8 h-8">
+                    <ArrowDownIcon className="w-6 h-6 text-green-400" />
+                  </div>
+                )}
+              </div>
+              <div className="overflow-hidden mr-3">
+                <div
+                  className="
+      text-sm font-medium text-black truncate dark:text-white"
+                >
+                  <p className="truncate">
+                    {tx.publisherLink && tx.title ? (
+                      <a
+                        target="_blank"
+                        href={tx.publisherLink}
+                        rel="noopener noreferrer"
                       >
-                        <p className="truncate">
-                          {tx.publisherLink && tx.title ? (
-                            <a
-                              target="_blank"
-                              href={tx.publisherLink}
-                              rel="noopener noreferrer"
-                            >
-                              {tx.title}
-                            </a>
-                          ) : (
-                            tx.title || tx.boostagram?.message || "\u00A0"
-                          )}
-                        </p>
-                      </div>
-                      <p className="text-xs text-gray-600 dark:text-neutral-400">
-                        {tx.date}
-                      </p>
-                    </div>
-                    {tx.badges && (
-                      <div className="ml-6 space-x-3">
-                        {tx.badges.map((badge) => (
-                          <Badge
-                            key={badge.label}
-                            label={badge.label}
-                            color={badge.color}
-                            textColor={badge.textColor}
-                          />
-                        ))}
-                      </div>
+                        {tx.title}
+                      </a>
+                    ) : (
+                      tx.title ||
+                      tx.boostagram?.message ||
+                      (type == "incoming" ? "Received" : "Sent")
                     )}
-                    <div className="flex ml-auto text-right space-x-3 shrink-0">
-                      <div>
-                        <p className="text-sm font-medium dark:text-white">
-                          {[tx.type && "sent", "sending"].includes(tx.type)
-                            ? "-"
-                            : "+"}
-                          {getFormattedSats(tx.totalAmount)}
-                        </p>
-                        {!!tx.totalAmountFiat && (
-                          <p className="text-xs text-gray-600 dark:text-neutral-400">
-                            ~{tx.totalAmountFiat}
-                          </p>
-                        )}
-                      </div>
-                      {(!!tx.description ||
-                        [tx.type && "sent", "sending"].includes(tx.type) ||
-                        (tx.type === "received" && tx.boostagram)) && (
-                        <Disclosure.Button className="block text-gray-500 hover:text-black dark:hover:text-white transition-color duration-200">
-                          <CaretDownIcon
-                            className={`${open ? "rotate-180" : ""} w-5 h-5`}
-                          />
-                        </Disclosure.Button>
-                      )}
-                    </div>
-                  </div>
-                  <Disclosure.Panel>
-                    <div className="text-xs text-gray-600 dark:text-neutral-400">
-                      {(tx.description || tx.boostagram) && (
-                        <div className="my-2">
-                          {tx.description && <p>{tx.description}</p>}
-                          {tx.boostagram && (
-                            <ul>
-                              <li>
-                                {t("transactionsTable.boostagram.sender")}:{" "}
-                                {tx.boostagram.sender_name}
-                              </li>
-                              <li>
-                                {t("transactionsTable.boostagram.message")}:{" "}
-                                {tx.boostagram.message}
-                              </li>
-                              <li>
-                                {t("transactionsTable.boostagram.app")}:{" "}
-                                {tx.boostagram.app_name}
-                              </li>
-                              <li>
-                                {t("transactionsTable.boostagram.podcast")}:{" "}
-                                {tx.boostagram.podcast}
-                              </li>
-                            </ul>
-                          )}
-                        </div>
-                      )}
-                      {(tx.totalFees !== undefined || tx.location) && (
-                        <div className="my-2 flow-root">
-                          {tx.totalFees !== undefined && (
-                            <p className="float-left">
-                              <span className="font-bold">
-                                {t("transactionsTable.fee")}
-                              </span>
-                              <br />
-                              {getFormattedSats(tx.totalFees)}
-                            </p>
-                          )}
-                          {tx.location && (
-                            <a
-                              className="float-right"
-                              href={tx.location}
-                              target="_blank"
-                              rel="noreferrer noopener"
-                            >
-                              <Button
-                                primary
-                                label={t("transactionsTable.open_location")}
-                              />
-                            </a>
-                          )}
-                        </div>
-                      )}
-                      {tx.preimage && (
-                        <div className="my-2 flow-root">
-                          <p className="float-left break-all">
-                            <span className="font-bold">
-                              {t("transactionsTable.preimage")}
-                            </span>
-                            <br />
-                            {tx.preimage}
-                          </p>
-                        </div>
-                      )}
-                    </div>
-                  </Disclosure.Panel>
-                </>
+                  </p>
+                </div>
+                <p className="text-xs text-gray-600 dark:text-neutral-400">
+                  {tx.date}
+                </p>
+              </div>
+              {tx.badges && (
+                <div className="ml-6 space-x-3">
+                  {tx.badges.map((badge) => (
+                    <Badge
+                      key={badge.label}
+                      label={badge.label}
+                      color={badge.color}
+                      textColor={badge.textColor}
+                    />
+                  ))}
+                </div>
               )}
-            </Disclosure>
+              <div className="flex ml-auto text-right space-x-3 shrink-0 dark:text-white">
+                <div>
+                  <p
+                    className={classNames(
+                      "text-sm font-medium",
+                      type == "incoming"
+                        ? "text-green-600 dark:color-green-400"
+                        : ""
+                    )}
+                  >
+                    {type == "outgoing" ? "-" : "+"}
+                    {getFormattedSats(tx.totalAmount)}
+                  </p>
+                  {!!tx.totalAmountFiat && (
+                    <p className="text-xs text-gray-600 dark:text-neutral-400">
+                      ~{tx.totalAmountFiat}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </div>
           </div>
-        ))}
-      </div>
-    </>
+        );
+      })}
+    </div>
   );
 }

From 598e356ae26ab1275009ef6a80c6a8f49c04c38a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Fri, 8 Sep 2023 13:22:29 +0200
Subject: [PATCH 02/40] fix: remove unused badges

---
 src/app/components/TransactionsTable/index.tsx | 13 -------------
 src/types.ts                                   |  1 -
 2 files changed, 14 deletions(-)

diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
index a2d786a8e1..3e08c708f7 100644
--- a/src/app/components/TransactionsTable/index.tsx
+++ b/src/app/components/TransactionsTable/index.tsx
@@ -4,7 +4,6 @@ import {
 } from "@bitcoin-design/bitcoin-icons-react/filled";
 import Loading from "@components/Loading";
 import { useTranslation } from "react-i18next";
-import Badge from "~/app/components/Badge";
 import { useSettings } from "~/app/context/SettingsContext";
 import { classNames } from "~/app/utils";
 import { Transaction } from "~/types";
@@ -78,18 +77,6 @@ export default function TransactionsTable({
                   {tx.date}
                 </p>
               </div>
-              {tx.badges && (
-                <div className="ml-6 space-x-3">
-                  {tx.badges.map((badge) => (
-                    <Badge
-                      key={badge.label}
-                      label={badge.label}
-                      color={badge.color}
-                      textColor={badge.textColor}
-                    />
-                  ))}
-                </div>
-              )}
               <div className="flex ml-auto text-right space-x-3 shrink-0 dark:text-white">
                 <div>
                   <p
diff --git a/src/types.ts b/src/types.ts
index 8e1d5e8da5..da8064fd79 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -694,7 +694,6 @@ export interface RequestInvoiceArgs {
 export type Transaction = {
   amount?: string;
   boostagram?: Invoice["boostagram"];
-  badges?: Badge[];
   createdAt?: string;
   currency?: string;
   date: string;

From 034afdb8980e972a0bad348799f6340622244c9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Fri, 8 Sep 2023 16:52:30 +0200
Subject: [PATCH 03/40] fix: detail view

---
 .../components/TransactionsTable/index.tsx    | 168 +++++++++++-------
 1 file changed, 104 insertions(+), 64 deletions(-)

diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
index 3e08c708f7..0ecbaf1f8b 100644
--- a/src/app/components/TransactionsTable/index.tsx
+++ b/src/app/components/TransactionsTable/index.tsx
@@ -3,7 +3,9 @@ import {
   ArrowUpIcon,
 } from "@bitcoin-design/bitcoin-icons-react/filled";
 import Loading from "@components/Loading";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import Modal from "~/app/components/Modal";
 import { useSettings } from "~/app/context/SettingsContext";
 import { classNames } from "~/app/utils";
 import { Transaction } from "~/types";
@@ -21,6 +23,19 @@ export default function TransactionsTable({
 }: Props) {
   const { getFormattedSats } = useSettings();
   const { t } = useTranslation("components");
+  const [modalOpen, setModalOpen] = useState(false);
+  const [transaction, setTransaction] = useState<Transaction | undefined>();
+
+  function openDetails(transaction: Transaction) {
+    setTransaction(transaction);
+    setModalOpen(true);
+  }
+
+  function getTransactionType(tx: Transaction): "incoming" | "outgoing" {
+    return [tx.type && "sent", "sending"].includes(tx.type)
+      ? "outgoing"
+      : "incoming";
+  }
 
   return loading ? (
     <div className="w-full flex flex-col items-center mt-4">
@@ -29,78 +44,103 @@ export default function TransactionsTable({
   ) : !transactions?.length && noResultMsg ? (
     <p className="text-gray-500 dark:text-neutral-400">{noResultMsg}</p>
   ) : (
-    <div className="shadow overflow-hidden rounded-lg bg-white divide-y divide-gray-200 dark:divide-white/10 dark:bg-surface-02dp">
-      {transactions?.map((tx) => {
-        const type = [tx.type && "sent", "sending"].includes(tx.type)
-          ? "outgoing"
-          : "incoming";
+    <>
+      <div className="overflow-hidden">
+        {transactions?.map((tx) => {
+          const type = getTransactionType(tx);
 
-        return (
-          <div
-            key={tx.id}
-            className="px-3 py-2 hover:bg-gray-100 dark:hover:bg-surface-02dp cursor-pointer"
-          >
-            <div className="flex gap-3">
-              <div className="flex items-center">
-                {type == "outgoing" ? (
-                  <div className="flex justify-center items-center bg-orange-100 rounded-full w-8 h-8">
-                    <ArrowUpIcon className="w-6 h-6 text-orange-400" />
-                  </div>
-                ) : (
-                  <div className="flex justify-center items-center bg-green-100 rounded-full w-8 h-8">
-                    <ArrowDownIcon className="w-6 h-6 text-green-400" />
-                  </div>
-                )}
-              </div>
-              <div className="overflow-hidden mr-3">
-                <div
-                  className="
-      text-sm font-medium text-black truncate dark:text-white"
-                >
-                  <p className="truncate">
-                    {tx.publisherLink && tx.title ? (
-                      <a
-                        target="_blank"
-                        href={tx.publisherLink}
-                        rel="noopener noreferrer"
-                      >
-                        {tx.title}
-                      </a>
-                    ) : (
-                      tx.title ||
-                      tx.boostagram?.message ||
-                      (type == "incoming" ? "Received" : "Sent")
-                    )}
-                  </p>
+          return (
+            <div
+              key={tx.id}
+              className="px-3 py-2 hover:bg-gray-100 dark:hover:bg-surface-02dp cursor-pointer rounded-md"
+              onClick={() => openDetails(tx)}
+            >
+              <div className="flex gap-3">
+                <div className="flex items-center">
+                  {type == "outgoing" ? (
+                    <div className="flex justify-center items-center bg-orange-100 rounded-full w-8 h-8">
+                      <ArrowUpIcon className="w-6 h-6 text-orange-400" />
+                    </div>
+                  ) : (
+                    <div className="flex justify-center items-center bg-green-100 rounded-full w-8 h-8">
+                      <ArrowDownIcon className="w-6 h-6 text-green-400" />
+                    </div>
+                  )}
                 </div>
-                <p className="text-xs text-gray-600 dark:text-neutral-400">
-                  {tx.date}
-                </p>
-              </div>
-              <div className="flex ml-auto text-right space-x-3 shrink-0 dark:text-white">
-                <div>
-                  <p
-                    className={classNames(
-                      "text-sm font-medium",
-                      type == "incoming"
-                        ? "text-green-600 dark:color-green-400"
-                        : ""
-                    )}
+                <div className="overflow-hidden mr-3">
+                  <div
+                    className="
+      text-sm font-medium text-black truncate dark:text-white"
                   >
-                    {type == "outgoing" ? "-" : "+"}
-                    {getFormattedSats(tx.totalAmount)}
+                    <p className="truncate">
+                      {tx.publisherLink && tx.title ? (
+                        <a
+                          target="_blank"
+                          href={tx.publisherLink}
+                          rel="noopener noreferrer"
+                        >
+                          {tx.title}
+                        </a>
+                      ) : (
+                        tx.title ||
+                        tx.boostagram?.message ||
+                        (type == "incoming" ? "Received" : "Sent")
+                      )}
+                    </p>
+                  </div>
+                  <p className="text-xs text-gray-600 dark:text-neutral-400">
+                    {tx.date}
                   </p>
-                  {!!tx.totalAmountFiat && (
-                    <p className="text-xs text-gray-600 dark:text-neutral-400">
-                      ~{tx.totalAmountFiat}
+                </div>
+                <div className="flex ml-auto text-right space-x-3 shrink-0 dark:text-white">
+                  <div>
+                    <p
+                      className={classNames(
+                        "text-sm font-medium",
+                        type == "incoming"
+                          ? "text-green-600 dark:color-green-400"
+                          : ""
+                      )}
+                    >
+                      {type == "outgoing" ? "-" : "+"}
+                      {getFormattedSats(tx.totalAmount)}
                     </p>
-                  )}
+                    {!!tx.totalAmountFiat && (
+                      <p className="text-xs text-gray-600 dark:text-neutral-400">
+                        ~{tx.totalAmountFiat}
+                      </p>
+                    )}
+                  </div>
                 </div>
               </div>
             </div>
+          );
+        })}
+      </div>
+      <Modal
+        isOpen={modalOpen}
+        close={() => setModalOpen(false)}
+        title={"test"}
+      >
+        {transaction && (
+          <div className="p-3 flex flex-col gap-4 justify-center ">
+            <div>
+              <div className="flex items-center justify-center">
+                {getTransactionType(transaction) == "outgoing" ? (
+                  <div className="flex justify-center items-center bg-orange-100 rounded-full p-8">
+                    <ArrowUpIcon className="w-12 h-12 text-orange-400" />
+                  </div>
+                ) : (
+                  <div className="flex justify-center items-center bg-green-100 rounded-full p-8">
+                    <ArrowDownIcon className="w-12 h-12 text-green-400" />
+                  </div>
+                )}
+              </div>
+            </div>
+            <div>details</div>
           </div>
-        );
-      })}
-    </div>
+        )}
+      </Modal>
+    </>
   );
 }

From ae79520a519d8bdbc5735af02c6467c747a893f0 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Wed, 20 Sep 2023 11:09:11 +0530
Subject: [PATCH 04/40] modify transaction list heading and align it to center
 at all places

---
 src/app/screens/Home/AllowanceView/index.tsx | 4 ++--
 src/app/screens/Home/DefaultView/index.tsx   | 4 ++--
 src/app/screens/Publishers/Detail/index.tsx  | 4 ++--
 src/i18n/locales/en/translation.json         | 6 +++---
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/app/screens/Home/AllowanceView/index.tsx b/src/app/screens/Home/AllowanceView/index.tsx
index e836e13b15..34c0d42e17 100644
--- a/src/app/screens/Home/AllowanceView/index.tsx
+++ b/src/app/screens/Home/AllowanceView/index.tsx
@@ -139,8 +139,8 @@ const AllowanceView: FC<Props> = (props) => {
             />
           </div>
         )}
-        <h2 className="mb-2 text-lg text-gray-900 font-bold dark:text-white">
-          {t("allowance_view.recent_transactions")}
+        <h2 className="mb-2 text-lg text-gray-900 font-bold dark:text-white text-center">
+          {t("allowance_view.latest_transactions")}
         </h2>
 
         {isLoadingTransactions && (
diff --git a/src/app/screens/Home/DefaultView/index.tsx b/src/app/screens/Home/DefaultView/index.tsx
index f8427584c9..4563ba510a 100644
--- a/src/app/screens/Home/DefaultView/index.tsx
+++ b/src/app/screens/Home/DefaultView/index.tsx
@@ -188,8 +188,8 @@ const DefaultView: FC<Props> = (props) => {
 
         {!isLoadingTransactions && (
           <div>
-            <h2 className="mb-2 text-lg lg:text-xl text-gray-900 font-bold dark:text-white">
-              {t("default_view.recent_transactions")}
+            <h2 className="mb-2 text-lg lg:text-xl text-gray-900 font-bold dark:text-white text-center">
+              {t("default_view.latest_transactions")}
             </h2>
 
             <Tab.Group>
diff --git a/src/app/screens/Publishers/Detail/index.tsx b/src/app/screens/Publishers/Detail/index.tsx
index 038c6c0639..53e0cdad5f 100644
--- a/src/app/screens/Publishers/Detail/index.tsx
+++ b/src/app/screens/Publishers/Detail/index.tsx
@@ -85,8 +85,8 @@ function PublisherDetail() {
       {allowance && (
         <Container>
           <div>
-            <h2 className="mt-[34px] mb-4 text-lg text-gray-900 font-bold dark:text-white">
-              {t("allowance_view.recent_transactions")}
+            <h2 className="mt-[34px] mb-4 text-lg text-gray-900 font-bold dark:text-white text-center">
+              {t("allowance_view.latest_transactions")}
             </h2>
             {transactions && transactions?.length > 0 ? (
               <TransactionsTable transactions={transactions} />
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index 0a0f178cd5..d215a71d36 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -352,9 +352,9 @@
         "send_satoshis": "⚡️ Send Satoshis ⚡️",
         "enable_now": "Enable Now"
       },
-      "recent_transactions": "Recent Transactions",
+      "latest_transactions": "Latest Transactions",
       "allowance_view": {
-        "recent_transactions": "Recent Transactions",
+        "latest_transactions": "Latest Transactions",
         "budget_spent": "Budget spent",
         "sats": "sats",
         "no_transactions": "No transactions on <0>{{name}}</0> yet.",
@@ -363,7 +363,7 @@
         "permissions": "Permissions"
       },
       "default_view": {
-        "recent_transactions": "Recent Transactions",
+        "latest_transactions": "Latest Transactions",
         "is_blocked_hint": "Alby is currently disabled on {{host}}",
         "block_removed": "Enabled {{host}}. Please reload the website.",
         "no_outgoing_transactions": "No outgoing transactions for this account yet.",

From b61b91434e00f1a6065aaea9e2eafc1d1824c64d Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Thu, 21 Sep 2023 09:50:35 +0530
Subject: [PATCH 05/40] feat: unify transaction list cleanup hooks and use
 single hook to get transactions cleanup allowanceview, homeview and publisher
 card view to adapt transaction list changes add mechanism to sort, db
 payments and invoices signed-off-by: pavan joshi <pavanjoshi914@gmail.com>

---
 .../TransactionsTable/index.test.tsx          | 38 ++------
 src/app/hooks/useInvoices.ts                  | 52 -----------
 src/app/hooks/useTransactions.ts              | 27 +++++-
 src/app/router/Options/Options.tsx            | 11 +--
 src/app/screens/Home/AllowanceView/index.tsx  |  2 +-
 src/app/screens/Home/DefaultView/index.tsx    | 90 ++++---------------
 src/app/screens/Publishers/Detail/index.tsx   |  2 +-
 src/app/screens/Transactions/index.tsx        | 32 ++-----
 src/app/utils/payments.ts                     |  1 +
 src/i18n/locales/en/translation.json          | 10 +--
 src/types.ts                                  |  1 +
 11 files changed, 63 insertions(+), 203 deletions(-)
 delete mode 100644 src/app/hooks/useInvoices.ts

diff --git a/src/app/components/TransactionsTable/index.test.tsx b/src/app/components/TransactionsTable/index.test.tsx
index c535df8d48..e6da0f5e83 100644
--- a/src/app/components/TransactionsTable/index.test.tsx
+++ b/src/app/components/TransactionsTable/index.test.tsx
@@ -1,14 +1,12 @@
 import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { act } from "react-dom/test-utils";
 import { I18nextProvider } from "react-i18next";
 import { BrowserRouter } from "react-router-dom";
 import { settingsFixture as mockSettings } from "~/../tests/fixtures/settings";
 import i18n from "~/../tests/unit/helpers/i18n";
 import { SettingsProvider } from "~/app/context/SettingsContext";
 
-import TransactionsTable from ".";
 import type { Props } from ".";
+import TransactionsTable from ".";
 
 jest.mock("~/common/lib/api", () => {
   const original = jest.requireActual("~/common/lib/api");
@@ -22,6 +20,7 @@ jest.mock("~/common/lib/api", () => {
 const transactions: Props = {
   transactions: [
     {
+      timestamp: 1656573909064,
       createdAt: "1656573909064",
       date: "5 days ago",
       description: "Polar Invoice for bob",
@@ -44,6 +43,7 @@ const invoices: Props = {
   transactions: [
     {
       id: "lnbcrt666660n1p3tad0hpp5kkguywerj5lqspc4p2a7f53yfnkuywxmxnuawe3lu4gdg0ezc2tqdqjd3sk6cn0ypkxzmtzducqzpgxqyz5vqsp529wvk52ckjkrfkll9q3w6ep6lrsg35se66jjpm5ssmumck7xxy6s9qyyssqzq3zsstfs7gzklgkdnxy2hsp4jfavw8xj4hv5300yww3053jx76h57e3ypsuvg36zwd49xm2nfr2lrfvylwrxs7yhpckjytvlaju0hsq7p9wna",
+      timestamp: 1656573909064,
       type: "received",
       totalAmount: "66666",
       totalAmountFiat: "$13.02",
@@ -53,6 +53,7 @@ const invoices: Props = {
     },
     {
       id: "lnbcrt6543210n1p3tadjepp5rv6ufq4vumg66l9gcyxqhy89n6w90mx0mh6gcj0sawrf6xuep5ssdq5g9kxy7fqd9h8vmmfvdjscqzpgxqyz5vqsp5f9yzxeqjw33ule4rffuh0py32gjjsx8z48cd4xjl8ej3rn7zdtdq9qyyssqe6qvkfe260myc9ypgs5n63xzwcx82fderg8p5ysh6c2fvpz5xu4ksvhs5av0wwestk5pmucmhk8lpjhmy7wqyq9c29xgm9na2q5xv5spy5kukj",
+      timestamp: 1656573909064,
       type: "received",
       totalAmount: "654321",
       totalAmountFiat: "$127.80",
@@ -67,6 +68,7 @@ const invoicesWithBoostagram: Props = {
   transactions: [
     {
       id: "lnbcrt666660n1p3tad0hpp5kkguywerj5lqspc4p2a7f53yfnkuywxmxnuawe3lu4gdg0ezc2tqdqjd3sk6cn0ypkxzmtzducqzpgxqyz5vqsp529wvk52ckjkrfkll9q3w6ep6lrsg35se66jjpm5ssmumck7xxy6s9qyyssqzq3zsstfs7gzklgkdnxy2hsp4jfavw8xj4hv5300yww3053jx76h57e3ypsuvg36zwd49xm2nfr2lrfvylwrxs7yhpckjytvlaju0hsq7p9wna",
+      timestamp: 1656573909064,
       type: "received",
       totalAmount: "66666",
       totalAmountFiat: "$13.02",
@@ -76,6 +78,7 @@ const invoicesWithBoostagram: Props = {
     },
     {
       id: "lnbcrt888880n1p3tad30pp56j6g34wctydrfx4wwdwj3schell8uqug6jnlehlkpw02mdfd9wlqdq0v36k6urvd9hxwuccqzpgxqyz5vqsp5995q4egstsvnyetwvpax6jw8q0fnn4tyz3gp35k3yex29emhsylq9qyyssq0yxpx6peyn4vsepwj3l68w9sc5dqnkt07zff6aw4kqvcfs0fpu4jpfh929w6vqrgtjfkmrlwghq4s9t4mnwrh4dlkm6wjem5uq8eu4gpwqln0j",
+      timestamp: 1656573909064,
       type: "received",
       totalAmount: "88888",
       totalAmountFiat: "$17.36",
@@ -103,8 +106,6 @@ const invoicesWithBoostagram: Props = {
 
 describe("TransactionsTable", () => {
   test("renders transactions", async () => {
-    const user = userEvent.setup();
-
     render(
       <BrowserRouter>
         <I18nextProvider i18n={i18n}>
@@ -119,15 +120,6 @@ describe("TransactionsTable", () => {
     expect(screen.getByText(/5 days ago/)).toBeInTheDocument();
     expect(await screen.findByText(/-1,234,000 sats/)).toBeInTheDocument();
     expect(await screen.findByText(/~\$241.02/)).toBeInTheDocument();
-
-    const disclosureButton = screen.getByRole("button");
-
-    await act(() => {
-      user.click(disclosureButton);
-    });
-
-    expect(await screen.findByText("0 sats")).toBeInTheDocument();
-    expect(await screen.findByText(/Open website/)).toBeInTheDocument();
   });
 
   test("renders invoice without boostagram", async () => {
@@ -151,8 +143,6 @@ describe("TransactionsTable", () => {
   });
 
   test("renders invoice with boostagram", async () => {
-    const user = userEvent.setup();
-
     render(
       <BrowserRouter>
         <I18nextProvider i18n={i18n}>
@@ -167,21 +157,5 @@ describe("TransactionsTable", () => {
     expect(screen.getByText(/5 days ago/)).toBeInTheDocument();
     expect(await screen.findByText(/\+88,888 sats/)).toBeInTheDocument();
     expect(await screen.findByText(/~\$17.36/)).toBeInTheDocument();
-
-    const disclosureButtons = screen.getAllByRole("button");
-    expect(disclosureButtons).toHaveLength(1);
-
-    await act(() => {
-      user.click(disclosureButtons[0]);
-    });
-
-    expect(
-      await screen.findByText(/Message: Du bist so 1 geiles podcast 100%/)
-    ).toBeInTheDocument();
-    expect(
-      await screen.findByText(/Sender: bumi@getalby.com/)
-    ).toBeInTheDocument();
-    expect(await screen.findByText(/App: Fountain/)).toBeInTheDocument();
-    expect(await screen.findByText(/Podcast: Honigdachs/)).toBeInTheDocument();
   });
 });
diff --git a/src/app/hooks/useInvoices.ts b/src/app/hooks/useInvoices.ts
deleted file mode 100644
index a9c2bb3a1f..0000000000
--- a/src/app/hooks/useInvoices.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import dayjs from "dayjs";
-import { useCallback, useState } from "react";
-import toast from "~/app/components/Toast";
-import { useSettings } from "~/app/context/SettingsContext";
-import api from "~/common/lib/api";
-import { Transaction } from "~/types";
-
-export const useInvoices = () => {
-  const { settings, getFormattedFiat } = useSettings();
-
-  const [isLoadingInvoices, setIsLoadingInvoices] = useState(false);
-  const [incomingTransactions, setIncomingTransactions] = useState<
-    Transaction[]
-  >([]);
-
-  const loadInvoices = useCallback(
-    async (limit?: number) => {
-      setIsLoadingInvoices(true);
-      let result;
-      try {
-        result = await api.getInvoices({ isSettled: true, limit });
-      } catch (e) {
-        if (e instanceof Error) toast.error(`Error: ${e.message}`);
-        setIsLoadingInvoices(false);
-        return;
-      }
-
-      const invoices: Transaction[] = result.invoices.map((invoice) => ({
-        ...invoice,
-        title: invoice.memo,
-        description: invoice.memo,
-        date: dayjs(invoice.settleDate).fromNow(),
-      }));
-
-      for (const invoice of invoices) {
-        invoice.totalAmountFiat = settings.showFiat
-          ? await getFormattedFiat(invoice.totalAmount)
-          : "";
-      }
-
-      setIncomingTransactions(invoices);
-      setIsLoadingInvoices(false);
-    },
-    [getFormattedFiat, settings.showFiat]
-  );
-
-  return {
-    isLoadingInvoices,
-    incomingTransactions,
-    loadInvoices,
-  };
-};
diff --git a/src/app/hooks/useTransactions.ts b/src/app/hooks/useTransactions.ts
index 7fc62c0fc7..d07de8af4e 100644
--- a/src/app/hooks/useTransactions.ts
+++ b/src/app/hooks/useTransactions.ts
@@ -1,3 +1,4 @@
+import dayjs from "dayjs";
 import { useCallback, useState } from "react";
 import toast from "~/app/components/Toast";
 import { useSettings } from "~/app/context/SettingsContext";
@@ -17,16 +18,38 @@ export const useTransactions = () => {
           accountId,
           limit,
         });
+        const fetchInvoice = await api.getInvoices({ isSettled: true, limit });
+
+        const invoices: Transaction[] = fetchInvoice.invoices.map(
+          (invoice) => ({
+            ...invoice,
+            title: invoice.memo,
+            description: invoice.memo,
+            date: dayjs(invoice.settleDate).fromNow(),
+            timestamp: invoice.settleDate,
+          })
+        );
+
         const _transactions: Transaction[] =
           await convertPaymentsToTransactions(payments);
 
-        for (const transaction of _transactions) {
+        const finalList: Transaction[] = [..._transactions, ...invoices];
+
+        for (const transaction of finalList) {
           transaction.totalAmountFiat = settings.showFiat
             ? await getFormattedFiat(transaction.totalAmount)
             : "";
         }
 
-        setTransactions(_transactions);
+        // Sort the final list by date in descending order.
+        finalList.sort((a, b) => {
+          const dateA = a.timestamp;
+          const dateB = b.timestamp;
+          return dateB - dateA;
+        });
+
+        setTransactions(finalList);
+
         setIsLoadingTransactions(false);
       } catch (e) {
         console.error(e);
diff --git a/src/app/router/Options/Options.tsx b/src/app/router/Options/Options.tsx
index af4acba192..2eabac9606 100644
--- a/src/app/router/Options/Options.tsx
+++ b/src/app/router/Options/Options.tsx
@@ -76,16 +76,7 @@ function Options() {
             <Route path="receive/invoice" element={<ReceiveInvoice />} />
             <Route path="onChainReceive" element={<OnChainReceive />} />
             <Route path="wallet" element={<DefaultView />} />
-            <Route path="transactions">
-              <Route
-                path="outgoing"
-                element={<Transactions type="outgoing" />}
-              />
-              <Route
-                path="incoming"
-                element={<Transactions type="incoming" />}
-              />
-            </Route>
+            <Route path="transactions" element={<Transactions />} />
             <Route path="lnurlPay" element={<LNURLPay />} />
             <Route path="lnurlChannel" element={<LNURLChannel />} />
             <Route path="lnurlWithdraw" element={<LNURLWithdraw />} />
diff --git a/src/app/screens/Home/AllowanceView/index.tsx b/src/app/screens/Home/AllowanceView/index.tsx
index 34c0d42e17..d91187dcf6 100644
--- a/src/app/screens/Home/AllowanceView/index.tsx
+++ b/src/app/screens/Home/AllowanceView/index.tsx
@@ -152,7 +152,7 @@ const AllowanceView: FC<Props> = (props) => {
         {hasTransactions && <TransactionsTable transactions={transactions} />}
 
         {!isLoadingTransactions && !transactions?.length && (
-          <p className="text-gray-500 dark:text-neutral-400">
+          <p className="text-gray-500 dark:text-neutral-400 text-center">
             <Trans
               i18nKey={"allowance_view.no_transactions"}
               t={t}
diff --git a/src/app/screens/Home/DefaultView/index.tsx b/src/app/screens/Home/DefaultView/index.tsx
index 4563ba510a..7046508857 100644
--- a/src/app/screens/Home/DefaultView/index.tsx
+++ b/src/app/screens/Home/DefaultView/index.tsx
@@ -5,7 +5,6 @@ import {
 import Button from "@components/Button";
 import Hyperlink from "@components/Hyperlink";
 import Loading from "@components/Loading";
-import Tab from "@components/Tab";
 import TransactionsTable from "@components/TransactionsTable";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
@@ -16,7 +15,7 @@ import BalanceBox from "~/app/components/BalanceBox";
 import SkeletonLoader from "~/app/components/SkeletonLoader";
 import toast from "~/app/components/Toast";
 import { useAccount } from "~/app/context/AccountContext";
-import { useInvoices } from "~/app/hooks/useInvoices";
+
 import { useTransactions } from "~/app/hooks/useTransactions";
 import { PublisherLnData } from "~/app/screens/Home/PublisherLnData";
 import api from "~/common/lib/api";
@@ -35,7 +34,7 @@ export type Props = {
 const DefaultView: FC<Props> = (props) => {
   const { t } = useTranslation("translation", { keyPrefix: "home" });
   const { t: tCommon } = useTranslation("common");
-  const { t: tComponents } = useTranslation("components");
+
 
   const navigate = useNavigate();
 
@@ -48,12 +47,7 @@ const DefaultView: FC<Props> = (props) => {
   const { transactions, isLoadingTransactions, loadTransactions } =
     useTransactions();
 
-  const { isLoadingInvoices, incomingTransactions, loadInvoices } =
-    useInvoices();
-
-  const isLoadingOutgoing = accountLoading || isLoadingTransactions;
-  const isLoadingIncoming = accountLoading || isLoadingInvoices;
-
+  const isLoading = accountLoading || isLoadingTransactions;
   const itemsLimit = 8;
 
   useEffect(() => {
@@ -65,15 +59,6 @@ const DefaultView: FC<Props> = (props) => {
     itemsLimit,
   ]);
 
-  useEffect(() => {
-    loadInvoices(itemsLimit);
-  }, [
-    account?.id,
-    balancesDecorated?.accountBalance,
-    loadInvoices,
-    itemsLimit,
-  ]);
-
   // check if currentURL is blocked
   useEffect(() => {
     const checkBlockedUrl = async (host: string) => {
@@ -180,71 +165,30 @@ const DefaultView: FC<Props> = (props) => {
           </div>
         )}
 
-        {isLoadingTransactions && (
+        {isLoading && (
           <div className="flex justify-center">
             <Loading />
           </div>
         )}
 
-        {!isLoadingTransactions && (
+        {!isLoading && (
           <div>
             <h2 className="mb-2 text-lg lg:text-xl text-gray-900 font-bold dark:text-white text-center">
               {t("default_view.latest_transactions")}
             </h2>
 
-            <Tab.Group>
-              <Tab.List>
-                {[
-                  tComponents("transaction_list.tabs.outgoing"),
-                  tComponents("transaction_list.tabs.incoming"),
-                ].map((category) => (
-                  <Tab key={category} label={category} />
-                ))}
-              </Tab.List>
-
-              <Tab.Panels>
-                <Tab.Panel>
-                  <>
-                    <TransactionsTable
-                      transactions={transactions}
-                      loading={isLoadingOutgoing}
-                      noResultMsg={t("default_view.no_outgoing_transactions")}
-                    />
-                    {!isLoadingOutgoing && transactions.length > 0 && (
-                      <div className="mt-5 text-center">
-                        <Hyperlink
-                          onClick={() =>
-                            handleViewAllLink("/transactions/outgoing")
-                          }
-                        >
-                          {t("default_view.all_transactions_link")}
-                        </Hyperlink>
-                      </div>
-                    )}
-                  </>
-                </Tab.Panel>
-                <Tab.Panel>
-                  <>
-                    <TransactionsTable
-                      transactions={incomingTransactions}
-                      loading={isLoadingIncoming}
-                      noResultMsg={t("default_view.no_incoming_transactions")}
-                    />
-                    {!isLoadingIncoming && incomingTransactions.length > 0 && (
-                      <div className="mt-5 text-center">
-                        <Hyperlink
-                          onClick={() =>
-                            handleViewAllLink("/transactions/incoming")
-                          }
-                        >
-                          {t("default_view.all_transactions_link")}
-                        </Hyperlink>
-                      </div>
-                    )}
-                  </>
-                </Tab.Panel>
-              </Tab.Panels>
-            </Tab.Group>
+            <TransactionsTable
+              transactions={transactions}
+              loading={isLoading}
+              noResultMsg={t("default_view.no_transactions")}
+            />
+            {!isLoading && transactions.length > 0 && (
+              <div className="mt-5 text-center">
+                <Hyperlink onClick={() => handleViewAllLink("/transactions")}>
+                  {t("default_view.all_transactions_link")}
+                </Hyperlink>
+              </div>
+            )}
           </div>
         )}
       </div>
diff --git a/src/app/screens/Publishers/Detail/index.tsx b/src/app/screens/Publishers/Detail/index.tsx
index 53e0cdad5f..a02dbe2851 100644
--- a/src/app/screens/Publishers/Detail/index.tsx
+++ b/src/app/screens/Publishers/Detail/index.tsx
@@ -91,7 +91,7 @@ function PublisherDetail() {
             {transactions && transactions?.length > 0 ? (
               <TransactionsTable transactions={transactions} />
             ) : (
-              <p className="text-gray-500 dark:text-neutral-400">
+              <p className="text-gray-500 dark:text-neutral-400 text-center">
                 <Trans
                   i18nKey={"allowance_view.no_transactions"}
                   t={t}
diff --git a/src/app/screens/Transactions/index.tsx b/src/app/screens/Transactions/index.tsx
index e1e744bd27..446e6dac2d 100644
--- a/src/app/screens/Transactions/index.tsx
+++ b/src/app/screens/Transactions/index.tsx
@@ -4,14 +4,9 @@ import TransactionsTable from "@components/TransactionsTable";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useAccount } from "~/app/context/AccountContext";
-import { useInvoices } from "~/app/hooks/useInvoices";
 import { useTransactions } from "~/app/hooks/useTransactions";
 
-type Props = {
-  type: "incoming" | "outgoing";
-};
-
-function Transactions({ type }: Props) {
+function Transactions() {
   const { t } = useTranslation("translation", {
     keyPrefix: "transactions",
   });
@@ -21,27 +16,12 @@ function Transactions({ type }: Props) {
   const { transactions, isLoadingTransactions, loadTransactions } =
     useTransactions();
 
-  const { isLoadingInvoices, incomingTransactions, loadInvoices } =
-    useInvoices();
-
-  const isLoading =
-    accountLoading ||
-    (type === "incoming" ? isLoadingInvoices : isLoadingTransactions);
-  const listItems = type === "incoming" ? incomingTransactions : transactions;
+  const isLoading = accountLoading || isLoadingTransactions;
+  const listItems = transactions;
 
   useEffect(() => {
-    if (type === "incoming") {
-      loadInvoices();
-    } else {
-      if (account?.id) loadTransactions(account.id);
-    }
-  }, [
-    type,
-    account?.id,
-    balancesDecorated?.accountBalance,
-    loadTransactions,
-    loadInvoices,
-  ]);
+    if (account?.id) loadTransactions(account.id);
+  }, [account?.id, balancesDecorated?.accountBalance, loadTransactions]);
 
   return (
     <Container>
@@ -50,7 +30,7 @@ function Transactions({ type }: Props) {
       </h2>
 
       <p className="mb-6 text-gray-500 dark:text-neutral-500">
-        {t(`description.${type}`)}
+        {t("description")}
       </p>
 
       {isLoading ? (
diff --git a/src/app/utils/payments.ts b/src/app/utils/payments.ts
index cfb0aa3941..d2fec32cce 100644
--- a/src/app/utils/payments.ts
+++ b/src/app/utils/payments.ts
@@ -11,6 +11,7 @@ export const convertPaymentToTransaction = (
   date: dayjs(+payment.createdAt).fromNow(),
   title: payment.name || payment.description,
   publisherLink: publisherLink || payment.location,
+  timestamp: parseInt(payment.createdAt),
 });
 
 export const convertPaymentsToTransactions = (
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index d215a71d36..b05b80ace1 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -366,8 +366,8 @@
         "latest_transactions": "Latest Transactions",
         "is_blocked_hint": "Alby is currently disabled on {{host}}",
         "block_removed": "Enabled {{host}}. Please reload the website.",
-        "no_outgoing_transactions": "No outgoing transactions for this account yet.",
-        "no_incoming_transactions": "No incoming transactions for this account yet.",
+        "no_transactions": "No transactions for this account yet.",
+
         "all_transactions_link": "See all transactions"
       }
     },
@@ -954,10 +954,8 @@
     },
     "transactions": {
       "title": "Transactions",
-      "description": {
-        "outgoing": "Outgoing transactions for this account",
-        "incoming": "Incoming transactions for this account"
-      },
+      "description": "Transactions for this account",
+
       "list_empty": "No transactions available yet."
     },
     "onboard": {
diff --git a/src/types.ts b/src/types.ts
index da8064fd79..7039183743 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -692,6 +692,7 @@ export interface RequestInvoiceArgs {
 }
 
 export type Transaction = {
+  timestamp: number;
   amount?: string;
   boostagram?: Invoice["boostagram"];
   createdAt?: string;

From 62b00ab3151d8b4a30b7482ca83d50e80a0cc1e6 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Thu, 21 Sep 2023 13:40:27 +0530
Subject: [PATCH 06/40] feat: redesign sats showcase

---
 src/app/components/TransactionsTable/index.tsx   | 16 +++++++++++-----
 .../utils/__tests__/currencyConvert.test.ts      |  6 +++---
 src/common/utils/currencyConvert.ts              |  7 ++-----
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
index 0ecbaf1f8b..4492d7499a 100644
--- a/src/app/components/TransactionsTable/index.tsx
+++ b/src/app/components/TransactionsTable/index.tsx
@@ -22,9 +22,9 @@ export default function TransactionsTable({
   loading = false,
 }: Props) {
   const { getFormattedSats } = useSettings();
-  const { t } = useTranslation("components");
   const [modalOpen, setModalOpen] = useState(false);
   const [transaction, setTransaction] = useState<Transaction | undefined>();
+  const { t: tCommon } = useTranslation("common");
 
   function openDetails(transaction: Transaction) {
     setTransaction(transaction);
@@ -99,14 +99,20 @@ export default function TransactionsTable({
                         "text-sm font-medium",
                         type == "incoming"
                           ? "text-green-600 dark:color-green-400"
-                          : ""
+                          : "text-orange-600 dark:color-orange-400",
+                        "inline"
                       )}
                     >
-                      {type == "outgoing" ? "-" : "+"}
-                      {getFormattedSats(tx.totalAmount)}
+                      {type == "outgoing" ? "-" : "+"}{" "}
+                      {getFormattedSats(tx.totalAmount)}{" "}
+                    </p>
+                    <p className="inline text-gray-600 dark:text-neutral-400">
+                      {tCommon("sats", {
+                        count: Number(tx.totalAmount),
+                      })}
                     </p>
                     {!!tx.totalAmountFiat && (
-                      <p className="text-xs text-gray-600 dark:text-neutral-400">
+                      <p className="text-xs text-gray-400 dark:text-neutral-600">
                         ~{tx.totalAmountFiat}
                       </p>
                     )}
diff --git a/src/common/utils/__tests__/currencyConvert.test.ts b/src/common/utils/__tests__/currencyConvert.test.ts
index 1f8af2a33e..a01f816828 100644
--- a/src/common/utils/__tests__/currencyConvert.test.ts
+++ b/src/common/utils/__tests__/currencyConvert.test.ts
@@ -110,19 +110,19 @@ describe("Currency coversion utils", () => {
     test("formats correctly for english", async () => {
       const result = getFormattedSats({ amount: 123456789, locale: "en" });
 
-      expect(result).toBe("123,456,789 sats");
+      expect(result).toBe("123,456,789");
     });
 
     test("formats correctly for spanish", async () => {
       const result = getFormattedSats({ amount: 123456789, locale: "es" });
 
-      expect(result).toBe("123.456.789 sats");
+      expect(result).toBe("123.456.789");
     });
 
     test("falls back to english", async () => {
       const result = getFormattedSats({ amount: 123456789, locale: "" });
 
-      expect(result).toBe("123,456,789 sats");
+      expect(result).toBe("123,456,789");
     });
   });
 });
diff --git a/src/common/utils/currencyConvert.ts b/src/common/utils/currencyConvert.ts
index 02d9f2b624..cb986bf359 100644
--- a/src/common/utils/currencyConvert.ts
+++ b/src/common/utils/currencyConvert.ts
@@ -1,9 +1,8 @@
 /**
  * Highly inspired by: https://github.com/AryanJ-NYC/bitcoin-conversion
  */
-import i18n from "~/i18n/i18nConfig";
 
-import type { CURRENCIES, ACCOUNT_CURRENCIES } from "../constants";
+import type { ACCOUNT_CURRENCIES, CURRENCIES } from "../constants";
 
 export const numSatsInBtc = 100_000_000;
 
@@ -49,7 +48,5 @@ export const getFormattedSats = (params: {
 }) => {
   const formattedNumber = getFormattedNumber(params);
 
-  return `${formattedNumber} ${i18n.t("common:sats", {
-    count: Number(params.amount),
-  })}`;
+  return `${formattedNumber}`;
 };

From 95ec2b0e6a3760b61a3cc611c74e96d9514e3b88 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Fri, 22 Sep 2023 11:54:14 +0530
Subject: [PATCH 07/40] feat: keep sats word in the currencty converter itself
 color sats word in transaction table using regex

---
 .../components/PaymentSummary/index.test.tsx  |  2 +-
 .../TransactionsTable/index.test.tsx          |  6 +-
 .../components/TransactionsTable/index.tsx    | 99 ++++++++++++++++---
 .../utils/__tests__/currencyConvert.test.ts   |  6 +-
 src/common/utils/currencyConvert.ts           |  5 +-
 5 files changed, 98 insertions(+), 20 deletions(-)

diff --git a/src/app/components/PaymentSummary/index.test.tsx b/src/app/components/PaymentSummary/index.test.tsx
index fbbf989798..ecac0672b8 100644
--- a/src/app/components/PaymentSummary/index.test.tsx
+++ b/src/app/components/PaymentSummary/index.test.tsx
@@ -1,5 +1,5 @@
 import PaymentSummary, { Props } from "@components/PaymentSummary";
-import { render, screen, act } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import { I18nextProvider } from "react-i18next";
 import { BrowserRouter } from "react-router-dom";
 import { settingsFixture as mockSettings } from "~/../tests/fixtures/settings";
diff --git a/src/app/components/TransactionsTable/index.test.tsx b/src/app/components/TransactionsTable/index.test.tsx
index e6da0f5e83..fd8348386e 100644
--- a/src/app/components/TransactionsTable/index.test.tsx
+++ b/src/app/components/TransactionsTable/index.test.tsx
@@ -118,7 +118,7 @@ describe("TransactionsTable", () => {
 
     expect(screen.getByText("Alby")).toBeInTheDocument();
     expect(screen.getByText(/5 days ago/)).toBeInTheDocument();
-    expect(await screen.findByText(/-1,234,000 sats/)).toBeInTheDocument();
+    expect(await screen.findByText(/- 1,234,000/)).toBeInTheDocument();
     expect(await screen.findByText(/~\$241.02/)).toBeInTheDocument();
   });
 
@@ -135,7 +135,7 @@ describe("TransactionsTable", () => {
 
     expect(await screen.findByText("lambo lambo")).toBeInTheDocument();
     expect(await screen.findByText(/4 days ago/)).toBeInTheDocument();
-    expect(await screen.findByText(/\+66,666 sats/)).toBeInTheDocument();
+    expect(await screen.findByText(/\+ 66,666/)).toBeInTheDocument();
     expect(await screen.findByText(/~\$13.02/)).toBeInTheDocument();
 
     const disclosureButtons = screen.queryByRole("button");
@@ -155,7 +155,7 @@ describe("TransactionsTable", () => {
 
     expect(screen.getByText("dumplings")).toBeInTheDocument();
     expect(screen.getByText(/5 days ago/)).toBeInTheDocument();
-    expect(await screen.findByText(/\+88,888 sats/)).toBeInTheDocument();
+    expect(await screen.findByText(/\+ 88,888/)).toBeInTheDocument();
     expect(await screen.findByText(/~\$17.36/)).toBeInTheDocument();
   });
 });
diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
index 4492d7499a..87b9eb5e72 100644
--- a/src/app/components/TransactionsTable/index.tsx
+++ b/src/app/components/TransactionsTable/index.tsx
@@ -3,6 +3,7 @@ import {
   ArrowUpIcon,
 } from "@bitcoin-design/bitcoin-icons-react/filled";
 import Loading from "@components/Loading";
+import dayjs from "dayjs";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import Modal from "~/app/components/Modal";
@@ -99,18 +100,18 @@ export default function TransactionsTable({
                         "text-sm font-medium",
                         type == "incoming"
                           ? "text-green-600 dark:color-green-400"
-                          : "text-orange-600 dark:color-orange-400",
-                        "inline"
+                          : "text-orange-600 dark:color-orange-400"
                       )}
                     >
                       {type == "outgoing" ? "-" : "+"}{" "}
-                      {getFormattedSats(tx.totalAmount)}{" "}
-                    </p>
-                    <p className="inline text-gray-600 dark:text-neutral-400">
-                      {tCommon("sats", {
-                        count: Number(tx.totalAmount),
-                      })}
+                      {getFormattedSats(tx.totalAmount).replace(/sats?/g, " ")}
+                      <span className=" text-gray-800 dark:text-neutral-400">
+                        {tCommon("sats", {
+                          count: Number(tx.totalAmount),
+                        })}
+                      </span>
                     </p>
+
                     {!!tx.totalAmountFiat && (
                       <p className="text-xs text-gray-400 dark:text-neutral-600">
                         ~{tx.totalAmountFiat}
@@ -126,7 +127,7 @@ export default function TransactionsTable({
       <Modal
         isOpen={modalOpen}
         close={() => setModalOpen(false)}
-        title={"test"}
+        title={"Transactions"}
       >
         {transaction && (
           <div className="p-3 flex flex-col gap-4 justify-center ">
@@ -134,16 +135,90 @@ export default function TransactionsTable({
               <div className="flex items-center justify-center">
                 {getTransactionType(transaction) == "outgoing" ? (
                   <div className="flex justify-center items-center bg-orange-100 rounded-full p-8">
-                    <ArrowUpIcon className="w-12 h-12 text-orange-400" />
+                    <ArrowUpIcon className="w-8 h-8 text-orange-400" />
                   </div>
                 ) : (
                   <div className="flex justify-center items-center bg-green-100 rounded-full p-8">
-                    <ArrowDownIcon className="w-12 h-12 text-green-400" />
+                    <ArrowDownIcon className="w-8 h-8 text-green-400" />
                   </div>
                 )}
               </div>
+              <h2 className="mt-4 text-md text-gray-900 font-bold dark:text-white text-center">
+                {transaction.type == "received" ? "Received" : "Sent"}
+              </h2>
+            </div>
+            <div className="flex items-center text-center justify-center dark:text-white">
+              <div>
+                <p
+                  className={classNames(
+                    "text-lg font-medium",
+                    transaction.type == "received"
+                      ? "text-green-600 dark:color-green-400"
+                      : "text-orange-600 dark:color-orange-400",
+                    "inline"
+                  )}
+                >
+                  {transaction.type == "sent" ? "-" : "+"}{" "}
+                  {getFormattedSats(transaction.totalAmount).replace(
+                    /sats?/g,
+                    " "
+                  )}
+                  <span className=" text-gray-800 dark:text-neutral-400">
+                    {tCommon("sats", {
+                      count: Number(transaction.amount),
+                    })}
+                  </span>
+                </p>
+
+                {!!transaction.totalAmountFiat && (
+                  <p className="text-sm mt-1 text-gray-400 dark:text-neutral-600">
+                    ~{transaction.totalAmountFiat}
+                  </p>
+                )}
+              </div>
+            </div>
+            <div>
+              <div>
+                <div className="mt-6">
+                  <dl>
+                    <div className="grid grid-cols-3 gap-2 px-0">
+                      <dt className="text-md font-medium leading-6 text-gray-400 dark:text-neutral-600 text-right">
+                        Date & Time
+                      </dt>
+                      <dd className="text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
+                        {dayjs(transaction.timestamp).format(
+                          "D MMMM YYYY, HH:mm"
+                        )}
+                      </dd>
+                    </div>
+                    <div className="grid grid-cols-3 gap-2 px-0">
+                      <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
+                        Fees
+                      </dt>
+                      <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
+                        {transaction.totalFees} Sats
+                      </dd>
+                    </div>
+                    <div className="grid grid-cols-3 gap-2 px-0">
+                      <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
+                        Description
+                      </dt>
+                      <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
+                        {transaction.description}
+                      </dd>
+                    </div>
+                    <div className="grid grid-cols-3 gap-2 px-0">
+                      <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
+                        Preimage
+                      </dt>
+                      <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
+                        {transaction.preimage}
+                      </dd>
+                    </div>
+                  </dl>
+                </div>
+              </div>
             </div>
-            <div>details</div>
           </div>
         )}
       </Modal>
diff --git a/src/common/utils/__tests__/currencyConvert.test.ts b/src/common/utils/__tests__/currencyConvert.test.ts
index a01f816828..1f8af2a33e 100644
--- a/src/common/utils/__tests__/currencyConvert.test.ts
+++ b/src/common/utils/__tests__/currencyConvert.test.ts
@@ -110,19 +110,19 @@ describe("Currency coversion utils", () => {
     test("formats correctly for english", async () => {
       const result = getFormattedSats({ amount: 123456789, locale: "en" });
 
-      expect(result).toBe("123,456,789");
+      expect(result).toBe("123,456,789 sats");
     });
 
     test("formats correctly for spanish", async () => {
       const result = getFormattedSats({ amount: 123456789, locale: "es" });
 
-      expect(result).toBe("123.456.789");
+      expect(result).toBe("123.456.789 sats");
     });
 
     test("falls back to english", async () => {
       const result = getFormattedSats({ amount: 123456789, locale: "" });
 
-      expect(result).toBe("123,456,789");
+      expect(result).toBe("123,456,789 sats");
     });
   });
 });
diff --git a/src/common/utils/currencyConvert.ts b/src/common/utils/currencyConvert.ts
index cb986bf359..2a83b657d5 100644
--- a/src/common/utils/currencyConvert.ts
+++ b/src/common/utils/currencyConvert.ts
@@ -2,6 +2,7 @@
  * Highly inspired by: https://github.com/AryanJ-NYC/bitcoin-conversion
  */
 
+import i18n from "~/i18n/i18nConfig";
 import type { ACCOUNT_CURRENCIES, CURRENCIES } from "../constants";
 
 export const numSatsInBtc = 100_000_000;
@@ -48,5 +49,7 @@ export const getFormattedSats = (params: {
 }) => {
   const formattedNumber = getFormattedNumber(params);
 
-  return `${formattedNumber}`;
+  return `${formattedNumber} ${i18n.t("common:sats", {
+    count: Number(params.amount),
+  })}`;
 };

From b96acbc4966c850ea74623026ac4ed782369b54a Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Mon, 25 Sep 2023 09:30:14 +0530
Subject: [PATCH 08/40] feat: add payment hash in transaction model

---
 .../components/TransactionsTable/index.tsx    | 70 ++++++++++++-------
 src/types.ts                                  |  1 +
 2 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
index 87b9eb5e72..ce361375f5 100644
--- a/src/app/components/TransactionsTable/index.tsx
+++ b/src/app/components/TransactionsTable/index.tsx
@@ -151,7 +151,7 @@ export default function TransactionsTable({
               <div>
                 <p
                   className={classNames(
-                    "text-lg font-medium",
+                    "text-3xl font-medium",
                     transaction.type == "received"
                       ? "text-green-600 dark:color-green-400"
                       : "text-orange-600 dark:color-orange-400",
@@ -171,7 +171,7 @@ export default function TransactionsTable({
                 </p>
 
                 {!!transaction.totalAmountFiat && (
-                  <p className="text-sm mt-1 text-gray-400 dark:text-neutral-600">
+                  <p className="text-md mt-1 text-gray-400 dark:text-neutral-600">
                     ~{transaction.totalAmountFiat}
                   </p>
                 )}
@@ -181,7 +181,7 @@ export default function TransactionsTable({
               <div>
                 <div className="mt-6">
                   <dl>
-                    <div className="grid grid-cols-3 gap-2 px-0">
+                    <div className="grid grid-cols-3 gap-2 p-1">
                       <dt className="text-md font-medium leading-6 text-gray-400 dark:text-neutral-600 text-right">
                         Date & Time
                       </dt>
@@ -191,30 +191,46 @@ export default function TransactionsTable({
                         )}
                       </dd>
                     </div>
-                    <div className="grid grid-cols-3 gap-2 px-0">
-                      <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
-                        Fees
-                      </dt>
-                      <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
-                        {transaction.totalFees} Sats
-                      </dd>
-                    </div>
-                    <div className="grid grid-cols-3 gap-2 px-0">
-                      <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
-                        Description
-                      </dt>
-                      <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
-                        {transaction.description}
-                      </dd>
-                    </div>
-                    <div className="grid grid-cols-3 gap-2 px-0">
-                      <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
-                        Preimage
-                      </dt>
-                      <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
-                        {transaction.preimage}
-                      </dd>
-                    </div>
+                    {transaction.totalFees !== undefined && (
+                      <div className="grid grid-cols-3 gap-2 px-0 p-1">
+                        <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
+                          Fee
+                        </dt>
+                        <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
+                          {transaction.totalFees} Sats
+                        </dd>
+                      </div>
+                    )}
+                    {transaction.description !== undefined && (
+                      <div className="grid grid-cols-3 gap-2 px-0 p-1">
+                        <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
+                          Description
+                        </dt>
+                        <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
+                          {transaction.description}
+                        </dd>
+                      </div>
+                    )}
+                    {transaction.type == "sent" && (
+                      <div className="grid grid-cols-3 gap-2 px-0 p-1">
+                        <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
+                          Preimage
+                        </dt>
+                        <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
+                          {transaction.preimage}
+                        </dd>
+                      </div>
+                    )}
+                    {transaction.type == "sent" && (
+                      <div className="grid grid-cols-3 gap-2 px-0 p-1">
+                        <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
+                          Hash
+                        </dt>
+                        <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
+                          {transaction.paymentHash}
+                        </dd>
+                      </div>
+                    )}
                   </dl>
                 </div>
               </div>
diff --git a/src/types.ts b/src/types.ts
index 7039183743..e9a0796876 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -698,6 +698,7 @@ export type Transaction = {
   createdAt?: string;
   currency?: string;
   date: string;
+  paymentHash?: string;
   description?: string;
   host?: string;
   id: string;

From 5e617df3e6ea1989cd85788e4312fda46d5fd313 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Tue, 26 Sep 2023 13:08:35 +0530
Subject: [PATCH 09/40] feat: add show more button

---
 .../components/TransactionsTable/index.tsx    | 30 +++++++++++++++++--
 src/app/utils/payments.ts                     |  2 +-
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
index ce361375f5..5fd6a5972e 100644
--- a/src/app/components/TransactionsTable/index.tsx
+++ b/src/app/components/TransactionsTable/index.tsx
@@ -1,11 +1,14 @@
 import {
   ArrowDownIcon,
   ArrowUpIcon,
+  CaretDownIcon,
+  CaretUpIcon,
 } from "@bitcoin-design/bitcoin-icons-react/filled";
 import Loading from "@components/Loading";
 import dayjs from "dayjs";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import Hyperlink from "~/app/components/Hyperlink";
 import Modal from "~/app/components/Modal";
 import { useSettings } from "~/app/context/SettingsContext";
 import { classNames } from "~/app/utils";
@@ -26,6 +29,7 @@ export default function TransactionsTable({
   const [modalOpen, setModalOpen] = useState(false);
   const [transaction, setTransaction] = useState<Transaction | undefined>();
   const { t: tCommon } = useTranslation("common");
+  const [showMoreFields, setShowMoreFields] = useState(false);
 
   function openDetails(transaction: Transaction) {
     setTransaction(transaction);
@@ -38,6 +42,10 @@ export default function TransactionsTable({
       : "incoming";
   }
 
+  function toggleShowMoreFields() {
+    setShowMoreFields(!showMoreFields);
+  }
+
   return loading ? (
     <div className="w-full flex flex-col items-center mt-4">
       <Loading />
@@ -80,7 +88,7 @@ export default function TransactionsTable({
                           href={tx.publisherLink}
                           rel="noopener noreferrer"
                         >
-                          {tx.title}
+                          {transactionTitle(tx)}
                         </a>
                       ) : (
                         tx.title ||
@@ -211,7 +219,17 @@ export default function TransactionsTable({
                         </dd>
                       </div>
                     )}
-                    {transaction.type == "sent" && (
+                    <div className="flex justify-center mt-4">
+                      <Hyperlink onClick={toggleShowMoreFields}>
+                        {tCommon("actions.more")}{" "}
+                        {showMoreFields ? (
+                          <CaretUpIcon className="h-4 w-4 inline-flex" />
+                        ) : (
+                          <CaretDownIcon className="h-4 w-4 inline-flex" />
+                        )}
+                      </Hyperlink>
+                    </div>
+                    {showMoreFields && transaction.type == "sent" && (
                       <div className="grid grid-cols-3 gap-2 px-0 p-1">
                         <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
                           Preimage
@@ -221,7 +239,7 @@ export default function TransactionsTable({
                         </dd>
                       </div>
                     )}
-                    {transaction.type == "sent" && (
+                    {showMoreFields && transaction.type == "sent" && (
                       <div className="grid grid-cols-3 gap-2 px-0 p-1">
                         <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
                           Hash
@@ -241,3 +259,9 @@ export default function TransactionsTable({
     </>
   );
 }
+
+function transactionTitle(tx: Transaction) {
+  const title = tx.title;
+
+  if (title) return title;
+}
diff --git a/src/app/utils/payments.ts b/src/app/utils/payments.ts
index d2fec32cce..16bca621e0 100644
--- a/src/app/utils/payments.ts
+++ b/src/app/utils/payments.ts
@@ -9,7 +9,7 @@ export const convertPaymentToTransaction = (
   id: `${payment.id}`,
   type: "sent",
   date: dayjs(+payment.createdAt).fromNow(),
-  title: payment.name || payment.description,
+  title: payment.description || payment.name,
   publisherLink: publisherLink || payment.location,
   timestamp: parseInt(payment.createdAt),
 });

From 80a5490eae504e820b07cc99cafca8458b527f7d Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Tue, 26 Sep 2023 14:00:38 +0530
Subject: [PATCH 10/40] feat: add boostagram details

---
 .../components/TransactionsTable/index.tsx    | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
index 5fd6a5972e..101d631f13 100644
--- a/src/app/components/TransactionsTable/index.tsx
+++ b/src/app/components/TransactionsTable/index.tsx
@@ -209,6 +209,26 @@ export default function TransactionsTable({
                         </dd>
                       </div>
                     )}
+                    {transaction.boostagram?.podcast !== undefined && (
+                      <div className="grid grid-cols-3 gap-2 px-0 p-1">
+                        <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
+                          Podcast
+                        </dt>
+                        <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
+                          {transaction.boostagram?.podcast}
+                        </dd>
+                      </div>
+                    )}
+                    {transaction.boostagram?.episode !== undefined && (
+                      <div className="grid grid-cols-3 gap-2 px-0 p-1">
+                        <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
+                          Episode
+                        </dt>
+                        <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
+                          {transaction.boostagram.episode}
+                        </dd>
+                      </div>
+                    )}
                     {transaction.description !== undefined && (
                       <div className="grid grid-cols-3 gap-2 px-0 p-1">
                         <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">

From 314febcc527f33d934513d992c4ef6ea606d2503 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Tue, 26 Sep 2023 14:56:15 +0530
Subject: [PATCH 11/40] feat: cleanup regex keep same color for now

---
 .../TransactionsTable/index.test.tsx          |  6 ++---
 .../components/TransactionsTable/index.tsx    | 25 +++----------------
 src/app/hooks/useTransactions.ts              |  8 +++---
 3 files changed, 10 insertions(+), 29 deletions(-)

diff --git a/src/app/components/TransactionsTable/index.test.tsx b/src/app/components/TransactionsTable/index.test.tsx
index fd8348386e..cf29b6bf12 100644
--- a/src/app/components/TransactionsTable/index.test.tsx
+++ b/src/app/components/TransactionsTable/index.test.tsx
@@ -118,7 +118,7 @@ describe("TransactionsTable", () => {
 
     expect(screen.getByText("Alby")).toBeInTheDocument();
     expect(screen.getByText(/5 days ago/)).toBeInTheDocument();
-    expect(await screen.findByText(/- 1,234,000/)).toBeInTheDocument();
+    expect(await screen.findByText(/- 1,234,000 sats/)).toBeInTheDocument();
     expect(await screen.findByText(/~\$241.02/)).toBeInTheDocument();
   });
 
@@ -135,7 +135,7 @@ describe("TransactionsTable", () => {
 
     expect(await screen.findByText("lambo lambo")).toBeInTheDocument();
     expect(await screen.findByText(/4 days ago/)).toBeInTheDocument();
-    expect(await screen.findByText(/\+ 66,666/)).toBeInTheDocument();
+    expect(await screen.findByText(/\+ 66,666 sats/)).toBeInTheDocument();
     expect(await screen.findByText(/~\$13.02/)).toBeInTheDocument();
 
     const disclosureButtons = screen.queryByRole("button");
@@ -155,7 +155,7 @@ describe("TransactionsTable", () => {
 
     expect(screen.getByText("dumplings")).toBeInTheDocument();
     expect(screen.getByText(/5 days ago/)).toBeInTheDocument();
-    expect(await screen.findByText(/\+ 88,888/)).toBeInTheDocument();
+    expect(await screen.findByText(/\+ 88,888 sats/)).toBeInTheDocument();
     expect(await screen.findByText(/~\$17.36/)).toBeInTheDocument();
   });
 });
diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
index 101d631f13..2da8dfe25a 100644
--- a/src/app/components/TransactionsTable/index.tsx
+++ b/src/app/components/TransactionsTable/index.tsx
@@ -88,7 +88,7 @@ export default function TransactionsTable({
                           href={tx.publisherLink}
                           rel="noopener noreferrer"
                         >
-                          {transactionTitle(tx)}
+                          {tx.title}
                         </a>
                       ) : (
                         tx.title ||
@@ -112,12 +112,7 @@ export default function TransactionsTable({
                       )}
                     >
                       {type == "outgoing" ? "-" : "+"}{" "}
-                      {getFormattedSats(tx.totalAmount).replace(/sats?/g, " ")}
-                      <span className=" text-gray-800 dark:text-neutral-400">
-                        {tCommon("sats", {
-                          count: Number(tx.totalAmount),
-                        })}
-                      </span>
+                      {getFormattedSats(tx.totalAmount)}
                     </p>
 
                     {!!tx.totalAmountFiat && (
@@ -167,15 +162,7 @@ export default function TransactionsTable({
                   )}
                 >
                   {transaction.type == "sent" ? "-" : "+"}{" "}
-                  {getFormattedSats(transaction.totalAmount).replace(
-                    /sats?/g,
-                    " "
-                  )}
-                  <span className=" text-gray-800 dark:text-neutral-400">
-                    {tCommon("sats", {
-                      count: Number(transaction.amount),
-                    })}
-                  </span>
+                  {getFormattedSats(transaction.totalAmount)}
                 </p>
 
                 {!!transaction.totalAmountFiat && (
@@ -279,9 +266,3 @@ export default function TransactionsTable({
     </>
   );
 }
-
-function transactionTitle(tx: Transaction) {
-  const title = tx.title;
-
-  if (title) return title;
-}
diff --git a/src/app/hooks/useTransactions.ts b/src/app/hooks/useTransactions.ts
index d07de8af4e..18ca597bce 100644
--- a/src/app/hooks/useTransactions.ts
+++ b/src/app/hooks/useTransactions.ts
@@ -33,22 +33,22 @@ export const useTransactions = () => {
         const _transactions: Transaction[] =
           await convertPaymentsToTransactions(payments);
 
-        const finalList: Transaction[] = [..._transactions, ...invoices];
+        const transactionList: Transaction[] = [..._transactions, ...invoices];
 
-        for (const transaction of finalList) {
+        for (const transaction of transactionList) {
           transaction.totalAmountFiat = settings.showFiat
             ? await getFormattedFiat(transaction.totalAmount)
             : "";
         }
 
         // Sort the final list by date in descending order.
-        finalList.sort((a, b) => {
+        transactionList.sort((a, b) => {
           const dateA = a.timestamp;
           const dateB = b.timestamp;
           return dateB - dateA;
         });
 
-        setTransactions(finalList);
+        setTransactions(transactionList);
 
         setIsLoadingTransactions(false);
       } catch (e) {

From ce2980e729e806c0b57ec2dac8745cee94c03db4 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Tue, 26 Sep 2023 15:12:25 +0530
Subject: [PATCH 12/40] chore: resolve conflict

---
 src/app/screens/Home/DefaultView/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/screens/Home/DefaultView/index.tsx b/src/app/screens/Home/DefaultView/index.tsx
index 7046508857..48b97f537d 100644
--- a/src/app/screens/Home/DefaultView/index.tsx
+++ b/src/app/screens/Home/DefaultView/index.tsx
@@ -15,7 +15,6 @@ import BalanceBox from "~/app/components/BalanceBox";
 import SkeletonLoader from "~/app/components/SkeletonLoader";
 import toast from "~/app/components/Toast";
 import { useAccount } from "~/app/context/AccountContext";
-
 import { useTransactions } from "~/app/hooks/useTransactions";
 import { PublisherLnData } from "~/app/screens/Home/PublisherLnData";
 import api from "~/common/lib/api";
@@ -35,7 +34,6 @@ const DefaultView: FC<Props> = (props) => {
   const { t } = useTranslation("translation", { keyPrefix: "home" });
   const { t: tCommon } = useTranslation("common");
 
-
   const navigate = useNavigate();
 
   const { account, balancesDecorated, accountLoading } = useAccount();

From 21df7e360448d29f8638d024d6013d6b0a0b0f77 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Wed, 27 Sep 2023 15:13:23 +0530
Subject: [PATCH 13/40] feat: refactor transaction modal setup callback
 communication minor naming corrections shift publisher link in the
 transaction modal correct variable names, show total fees in form of
 formatted sats signed-off-by: pavan joshi <pavanj914@gmail.com>

---
 .../TransactionsTable/TransactionModal.tsx    | 208 ++++++++++++++++++
 .../components/TransactionsTable/index.tsx    | 171 +-------------
 src/app/hooks/useTransactions.ts              |   7 +-
 3 files changed, 225 insertions(+), 161 deletions(-)
 create mode 100644 src/app/components/TransactionsTable/TransactionModal.tsx

diff --git a/src/app/components/TransactionsTable/TransactionModal.tsx b/src/app/components/TransactionsTable/TransactionModal.tsx
new file mode 100644
index 0000000000..27e95685ac
--- /dev/null
+++ b/src/app/components/TransactionsTable/TransactionModal.tsx
@@ -0,0 +1,208 @@
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  CaretDownIcon,
+  CaretUpIcon,
+} from "@bitcoin-design/bitcoin-icons-react/filled";
+import dayjs from "dayjs";
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import Hyperlink from "~/app/components/Hyperlink";
+import Modal from "~/app/components/Modal";
+import { useSettings } from "~/app/context/SettingsContext";
+import { classNames } from "~/app/utils";
+import { Transaction } from "~/types";
+
+type Props = {
+  transaction: Transaction | undefined;
+  onModelClose: () => void;
+  isOpen: boolean;
+};
+
+export default function TransactionModal({
+  transaction,
+  isOpen,
+  onModelClose,
+}: Props) {
+  const { t: tCommon } = useTranslation("common");
+  const [showMoreFields, setShowMoreFields] = useState(false);
+  const { getFormattedSats } = useSettings();
+  const [_isRevealed, setRevealed] = useState(false);
+
+  function toggleShowMoreFields() {
+    setShowMoreFields(!showMoreFields);
+  }
+
+  function getTransactionType(tx: Transaction): "incoming" | "outgoing" {
+    return [tx.type && "sent", "sending"].includes(tx.type)
+      ? "outgoing"
+      : "incoming";
+  }
+
+  useEffect(() => {
+    if (typeof isOpen !== "undefined") {
+      setRevealed(isOpen);
+    }
+  }, [isOpen]);
+
+  return (
+    <Modal
+      isOpen={_isRevealed}
+      close={() => {
+        setRevealed(false);
+        onModelClose();
+        setShowMoreFields(false);
+      }}
+      title={"Transactions"}
+    >
+      {_isRevealed && transaction && (
+        <div className="p-3 flex flex-col gap-4 justify-center ">
+          <div>
+            <div className="flex items-center justify-center">
+              {getTransactionType(transaction) == "outgoing" ? (
+                <div className="flex justify-center items-center bg-orange-100 rounded-full p-8">
+                  <ArrowUpIcon className="w-8 h-8 text-orange-400" />
+                </div>
+              ) : (
+                <div className="flex justify-center items-center bg-green-100 rounded-full p-8">
+                  <ArrowDownIcon className="w-8 h-8 text-green-400" />
+                </div>
+              )}
+            </div>
+            <h2 className="mt-4 text-md text-gray-900 font-bold dark:text-white text-center">
+              {transaction.type == "received" ? "Received" : "Sent"}
+            </h2>
+          </div>
+          <div className="flex items-center text-center justify-center dark:text-white">
+            <div>
+              <p
+                className={classNames(
+                  "text-3xl font-medium",
+                  transaction.type == "received"
+                    ? "text-green-600 dark:color-green-400"
+                    : "text-orange-600 dark:color-orange-400",
+                  "inline"
+                )}
+              >
+                {transaction.type == "sent" ? "-" : "+"}{" "}
+                {getFormattedSats(transaction.totalAmount)}
+              </p>
+
+              {!!transaction.totalAmountFiat && (
+                <p className="text-md mt-1 text-gray-400 dark:text-neutral-600">
+                  ~{transaction.totalAmountFiat}
+                </p>
+              )}
+            </div>
+          </div>
+          <div>
+            <div>
+              <div className="mt-6">
+                <dl>
+                  <div className="grid grid-cols-3 gap-2 p-1">
+                    <dt className="text-md font-medium leading-6 text-gray-400 dark:text-neutral-600 text-right">
+                      Date & Time
+                    </dt>
+                    <dd className="text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
+                      {dayjs(transaction.timestamp).format(
+                        "D MMMM YYYY, HH:mm"
+                      )}
+                    </dd>
+                  </div>
+                  {transaction.totalFees?.toString && (
+                    <div className="grid grid-cols-3 gap-2 px-0 p-1">
+                      <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
+                        Fee
+                      </dt>
+                      <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
+                        {getFormattedSats(transaction.totalFees)}
+                      </dd>
+                    </div>
+                  )}
+                  {transaction.publisherLink && transaction.title && (
+                    <div className="grid grid-cols-3 gap-2 px-0 p-1">
+                      <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
+                        Website
+                      </dt>
+                      <dd className=" text-md leading-6 col-span-2 mt-0 break-all">
+                        <a
+                          className="cursor-pointer text-blue-600 hover:text-blue-700"
+                          target="_blank"
+                          href={transaction.publisherLink}
+                          rel="noopener noreferrer"
+                        >
+                          {transaction.title}
+                        </a>
+                      </dd>
+                    </div>
+                  )}
+
+                  {transaction.boostagram?.podcast && (
+                    <div className="grid grid-cols-3 gap-2 px-0 p-1">
+                      <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
+                        Podcast
+                      </dt>
+                      <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
+                        {transaction.boostagram?.podcast}
+                      </dd>
+                    </div>
+                  )}
+                  {transaction.boostagram?.episode && (
+                    <div className="grid grid-cols-3 gap-2 px-0 p-1">
+                      <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
+                        Episode
+                      </dt>
+                      <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
+                        {transaction.boostagram.episode}
+                      </dd>
+                    </div>
+                  )}
+                  {transaction.description && (
+                    <div className="grid grid-cols-3 gap-2 px-0 p-1">
+                      <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
+                        Description
+                      </dt>
+                      <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
+                        {transaction.description}
+                      </dd>
+                    </div>
+                  )}
+                  <div className="flex justify-center mt-4">
+                    <Hyperlink onClick={toggleShowMoreFields}>
+                      {tCommon("actions.more")}{" "}
+                      {showMoreFields ? (
+                        <CaretUpIcon className="h-4 w-4 inline-flex" />
+                      ) : (
+                        <CaretDownIcon className="h-4 w-4 inline-flex" />
+                      )}
+                    </Hyperlink>
+                  </div>
+                  {showMoreFields && transaction.type == "sent" && (
+                    <div className="grid grid-cols-3 gap-2 px-0 p-1">
+                      <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
+                        Preimage
+                      </dt>
+                      <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
+                        {transaction.preimage}
+                      </dd>
+                    </div>
+                  )}
+                  {showMoreFields && transaction.type == "sent" && (
+                    <div className="grid grid-cols-3 gap-2 px-0 p-1">
+                      <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
+                        Hash
+                      </dt>
+                      <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
+                        {transaction.paymentHash}
+                      </dd>
+                    </div>
+                  )}
+                </dl>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </Modal>
+  );
+}
diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
index 2da8dfe25a..3433645048 100644
--- a/src/app/components/TransactionsTable/index.tsx
+++ b/src/app/components/TransactionsTable/index.tsx
@@ -1,15 +1,12 @@
 import {
   ArrowDownIcon,
   ArrowUpIcon,
-  CaretDownIcon,
-  CaretUpIcon,
 } from "@bitcoin-design/bitcoin-icons-react/filled";
 import Loading from "@components/Loading";
-import dayjs from "dayjs";
+
 import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import Hyperlink from "~/app/components/Hyperlink";
-import Modal from "~/app/components/Modal";
+
+import TransactionModal from "~/app/components/TransactionsTable/TransactionModal";
 import { useSettings } from "~/app/context/SettingsContext";
 import { classNames } from "~/app/utils";
 import { Transaction } from "~/types";
@@ -28,8 +25,6 @@ export default function TransactionsTable({
   const { getFormattedSats } = useSettings();
   const [modalOpen, setModalOpen] = useState(false);
   const [transaction, setTransaction] = useState<Transaction | undefined>();
-  const { t: tCommon } = useTranslation("common");
-  const [showMoreFields, setShowMoreFields] = useState(false);
 
   function openDetails(transaction: Transaction) {
     setTransaction(transaction);
@@ -42,10 +37,6 @@ export default function TransactionsTable({
       : "incoming";
   }
 
-  function toggleShowMoreFields() {
-    setShowMoreFields(!showMoreFields);
-  }
-
   return loading ? (
     <div className="w-full flex flex-col items-center mt-4">
       <Loading />
@@ -82,19 +73,9 @@ export default function TransactionsTable({
       text-sm font-medium text-black truncate dark:text-white"
                   >
                     <p className="truncate">
-                      {tx.publisherLink && tx.title ? (
-                        <a
-                          target="_blank"
-                          href={tx.publisherLink}
-                          rel="noopener noreferrer"
-                        >
-                          {tx.title}
-                        </a>
-                      ) : (
-                        tx.title ||
+                      {tx.title ||
                         tx.boostagram?.message ||
-                        (type == "incoming" ? "Received" : "Sent")
-                      )}
+                        (type == "incoming" ? "Received" : "Sent")}
                     </p>
                   </div>
                   <p className="text-xs text-gray-600 dark:text-neutral-400">
@@ -127,142 +108,14 @@ export default function TransactionsTable({
           );
         })}
       </div>
-      <Modal
-        isOpen={modalOpen}
-        close={() => setModalOpen(false)}
-        title={"Transactions"}
-      >
-        {transaction && (
-          <div className="p-3 flex flex-col gap-4 justify-center ">
-            <div>
-              <div className="flex items-center justify-center">
-                {getTransactionType(transaction) == "outgoing" ? (
-                  <div className="flex justify-center items-center bg-orange-100 rounded-full p-8">
-                    <ArrowUpIcon className="w-8 h-8 text-orange-400" />
-                  </div>
-                ) : (
-                  <div className="flex justify-center items-center bg-green-100 rounded-full p-8">
-                    <ArrowDownIcon className="w-8 h-8 text-green-400" />
-                  </div>
-                )}
-              </div>
-              <h2 className="mt-4 text-md text-gray-900 font-bold dark:text-white text-center">
-                {transaction.type == "received" ? "Received" : "Sent"}
-              </h2>
-            </div>
-            <div className="flex items-center text-center justify-center dark:text-white">
-              <div>
-                <p
-                  className={classNames(
-                    "text-3xl font-medium",
-                    transaction.type == "received"
-                      ? "text-green-600 dark:color-green-400"
-                      : "text-orange-600 dark:color-orange-400",
-                    "inline"
-                  )}
-                >
-                  {transaction.type == "sent" ? "-" : "+"}{" "}
-                  {getFormattedSats(transaction.totalAmount)}
-                </p>
 
-                {!!transaction.totalAmountFiat && (
-                  <p className="text-md mt-1 text-gray-400 dark:text-neutral-600">
-                    ~{transaction.totalAmountFiat}
-                  </p>
-                )}
-              </div>
-            </div>
-            <div>
-              <div>
-                <div className="mt-6">
-                  <dl>
-                    <div className="grid grid-cols-3 gap-2 p-1">
-                      <dt className="text-md font-medium leading-6 text-gray-400 dark:text-neutral-600 text-right">
-                        Date & Time
-                      </dt>
-                      <dd className="text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
-                        {dayjs(transaction.timestamp).format(
-                          "D MMMM YYYY, HH:mm"
-                        )}
-                      </dd>
-                    </div>
-                    {transaction.totalFees !== undefined && (
-                      <div className="grid grid-cols-3 gap-2 px-0 p-1">
-                        <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
-                          Fee
-                        </dt>
-                        <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
-                          {transaction.totalFees} Sats
-                        </dd>
-                      </div>
-                    )}
-                    {transaction.boostagram?.podcast !== undefined && (
-                      <div className="grid grid-cols-3 gap-2 px-0 p-1">
-                        <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
-                          Podcast
-                        </dt>
-                        <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
-                          {transaction.boostagram?.podcast}
-                        </dd>
-                      </div>
-                    )}
-                    {transaction.boostagram?.episode !== undefined && (
-                      <div className="grid grid-cols-3 gap-2 px-0 p-1">
-                        <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
-                          Episode
-                        </dt>
-                        <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
-                          {transaction.boostagram.episode}
-                        </dd>
-                      </div>
-                    )}
-                    {transaction.description !== undefined && (
-                      <div className="grid grid-cols-3 gap-2 px-0 p-1">
-                        <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
-                          Description
-                        </dt>
-                        <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
-                          {transaction.description}
-                        </dd>
-                      </div>
-                    )}
-                    <div className="flex justify-center mt-4">
-                      <Hyperlink onClick={toggleShowMoreFields}>
-                        {tCommon("actions.more")}{" "}
-                        {showMoreFields ? (
-                          <CaretUpIcon className="h-4 w-4 inline-flex" />
-                        ) : (
-                          <CaretDownIcon className="h-4 w-4 inline-flex" />
-                        )}
-                      </Hyperlink>
-                    </div>
-                    {showMoreFields && transaction.type == "sent" && (
-                      <div className="grid grid-cols-3 gap-2 px-0 p-1">
-                        <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
-                          Preimage
-                        </dt>
-                        <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
-                          {transaction.preimage}
-                        </dd>
-                      </div>
-                    )}
-                    {showMoreFields && transaction.type == "sent" && (
-                      <div className="grid grid-cols-3 gap-2 px-0 p-1">
-                        <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
-                          Hash
-                        </dt>
-                        <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
-                          {transaction.paymentHash}
-                        </dd>
-                      </div>
-                    )}
-                  </dl>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
-      </Modal>
+      <TransactionModal
+        transaction={transaction}
+        isOpen={modalOpen}
+        onModelClose={() => {
+          setModalOpen(false);
+        }}
+      />
     </>
   );
 }
diff --git a/src/app/hooks/useTransactions.ts b/src/app/hooks/useTransactions.ts
index 18ca597bce..1bda4c0b36 100644
--- a/src/app/hooks/useTransactions.ts
+++ b/src/app/hooks/useTransactions.ts
@@ -18,9 +18,12 @@ export const useTransactions = () => {
           accountId,
           limit,
         });
-        const fetchInvoice = await api.getInvoices({ isSettled: true, limit });
+        const getInvoicesResponse = await api.getInvoices({
+          isSettled: true,
+          limit,
+        });
 
-        const invoices: Transaction[] = fetchInvoice.invoices.map(
+        const invoices: Transaction[] = getInvoicesResponse.invoices.map(
           (invoice) => ({
             ...invoice,
             title: invoice.memo,

From 3092cf4caf71f05111187b387bd1429ba6034cdd Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Tue, 3 Oct 2023 15:21:40 +0530
Subject: [PATCH 14/40] feat: add getTransactions Method

---
 src/app/hooks/useTransactions.ts              |  6 +++
 src/common/lib/api.ts                         |  4 ++
 .../background-script/actions/ln/index.ts     |  4 +-
 .../actions/ln/transactions.ts                | 38 +++++++++++++++++
 .../background-script/connectors/alby.ts      | 41 ++++++++++++++++++-
 .../background-script/connectors/citadel.ts   | 10 +++++
 .../background-script/connectors/commando.ts  | 10 +++++
 .../connectors/connector.interface.ts         |  8 +++-
 .../background-script/connectors/eclair.ts    | 10 +++++
 .../background-script/connectors/galoy.ts     | 10 +++++
 .../background-script/connectors/kollider.ts  | 10 +++++
 .../background-script/connectors/lnbits.ts    | 10 +++++
 .../background-script/connectors/lnc.ts       | 10 +++++
 .../background-script/connectors/lnd.ts       | 10 +++++
 .../background-script/connectors/lndhub.ts    | 10 +++++
 src/extension/background-script/router.ts     |  1 +
 src/types.ts                                  |  6 ++-
 17 files changed, 194 insertions(+), 4 deletions(-)
 create mode 100644 src/extension/background-script/actions/ln/transactions.ts

diff --git a/src/app/hooks/useTransactions.ts b/src/app/hooks/useTransactions.ts
index 1bda4c0b36..5d458aa5c4 100644
--- a/src/app/hooks/useTransactions.ts
+++ b/src/app/hooks/useTransactions.ts
@@ -33,6 +33,12 @@ export const useTransactions = () => {
           })
         );
 
+        // const getalltrans = await api.getTransactions({
+        //   isSettled: true,
+        //   limit,
+        // });
+        // console.log(getalltrans);
+
         const _transactions: Transaction[] =
           await convertPaymentsToTransactions(payments);
 
diff --git a/src/common/lib/api.ts b/src/common/lib/api.ts
index 3211403022..d588cafab9 100644
--- a/src/common/lib/api.ts
+++ b/src/common/lib/api.ts
@@ -26,6 +26,7 @@ import type {
   MessageInvoices,
   MessageLnurlAuth,
   MessageSettingsSet,
+  MessageTransactions,
   NodeInfo,
   PsetPreview,
   SettingsStorage,
@@ -168,6 +169,8 @@ export const getBlocklist = (host: string) =>
   msg.request<BlocklistRes>("getBlocklist", { host });
 export const getInvoices = (options?: MessageInvoices["args"]) =>
   msg.request<{ invoices: Invoice[] }>("getInvoices", options);
+export const getTransactions = (options?: MessageTransactions["args"]) =>
+  msg.request<{ transactions: Invoice[] }>("getTransactions", options);
 export const lnurlAuth = (
   options: MessageLnurlAuth["args"]
 ): Promise<LnurlAuthResponse> =>
@@ -260,6 +263,7 @@ export default {
   unlock,
   getBlocklist,
   getInvoices,
+  getTransactions,
   lnurlAuth,
   getCurrencyRate,
   nostr: {
diff --git a/src/extension/background-script/actions/ln/index.ts b/src/extension/background-script/actions/ln/index.ts
index 5f26c3fe3e..8b2667de30 100644
--- a/src/extension/background-script/actions/ln/index.ts
+++ b/src/extension/background-script/actions/ln/index.ts
@@ -7,6 +7,7 @@ import makeInvoice from "./makeInvoice";
 import request from "./request";
 import sendPayment from "./sendPayment";
 import signMessage from "./signMessage";
+import transactions from "./transactions";
 
 export {
   checkPayment,
@@ -15,7 +16,8 @@ export {
   invoices,
   keysend,
   makeInvoice,
+  request,
   sendPayment,
   signMessage,
-  request,
+  transactions,
 };
diff --git a/src/extension/background-script/actions/ln/transactions.ts b/src/extension/background-script/actions/ln/transactions.ts
new file mode 100644
index 0000000000..1e07b67540
--- /dev/null
+++ b/src/extension/background-script/actions/ln/transactions.ts
@@ -0,0 +1,38 @@
+import utils from "~/common/lib/utils";
+import state from "~/extension/background-script/state";
+import type { Invoice, MessageTransactions } from "~/types";
+
+const transactions = async (message: MessageTransactions) => {
+  const isSettled = message.args.isSettled;
+  const limit = message.args.limit;
+
+  const connector = await state.getState().getConnector();
+  try {
+    const result = await connector.getTransactions();
+    let invoices: Invoice[] = result.data.transactions
+      .filter((invoice) => (isSettled ? invoice.settled : !invoice.settled))
+      .map((invoice) => {
+        const boostagram = utils.getBoostagramFromInvoiceCustomRecords(
+          invoice.custom_records
+        );
+        return { ...invoice, boostagram };
+      });
+
+    if (limit) {
+      invoices = invoices.slice(0, limit);
+    }
+
+    return {
+      data: {
+        invoices,
+      },
+    };
+  } catch (e) {
+    console.error(e);
+    if (e instanceof Error) {
+      return { error: e.message };
+    }
+  }
+};
+
+export default transactions;
diff --git a/src/extension/background-script/connectors/alby.ts b/src/extension/background-script/connectors/alby.ts
index 260feebfcb..065797d380 100644
--- a/src/extension/background-script/connectors/alby.ts
+++ b/src/extension/background-script/connectors/alby.ts
@@ -20,6 +20,7 @@ import Connector, {
   GetBalanceResponse,
   GetInfoResponse,
   GetInvoicesResponse,
+  GetTransactionsResponse,
   KeysendArgs,
   MakeInvoiceArgs,
   MakeInvoiceResponse,
@@ -69,7 +70,14 @@ export default class Alby implements Connector {
   }
 
   get supportedMethods() {
-    return ["getInfo", "keysend", "makeInvoice", "sendPayment", "getBalance"];
+    return [
+      "getInfo",
+      "keysend",
+      "makeInvoice",
+      "sendPayment",
+      "getBalance",
+      "getTransactions",
+    ];
   }
 
   // not yet implemented
@@ -104,6 +112,37 @@ export default class Alby implements Connector {
     };
   }
 
+  async getTransactions(): Promise<GetTransactionsResponse> {
+    const incomingInvoices = (await this._request((client) =>
+      client.incomingInvoices({})
+    )) as Invoice[];
+
+    const outgoingInvoices = (await this._request((client) =>
+      client.outgoingInvoices({})
+    )) as Invoice[];
+
+    const transactions: ConnectorInvoice[] = [
+      ...incomingInvoices,
+      ...outgoingInvoices,
+    ].map(
+      (invoice, index): ConnectorInvoice => ({
+        custom_records: invoice.custom_records,
+        id: `${invoice.payment_request}-${index}`,
+        memo: invoice.comment || invoice.memo,
+        preimage: "", // alby wallet api doesn't support preimage (yet)
+        settled: invoice.settled,
+        settleDate: new Date(invoice.settled_at).getTime(),
+        totalAmount: `${invoice.amount}`,
+        type: invoice.type == "incoming" ? "received" : "sent",
+      })
+    );
+    return {
+      data: {
+        transactions,
+      },
+    };
+  }
+
   async getInfo(): Promise<
     GetInfoResponse<WebLNNode & GetAccountInformationResponse>
   > {
diff --git a/src/extension/background-script/connectors/citadel.ts b/src/extension/background-script/connectors/citadel.ts
index 24e1a90234..5d1d5ce00b 100644
--- a/src/extension/background-script/connectors/citadel.ts
+++ b/src/extension/background-script/connectors/citadel.ts
@@ -7,6 +7,7 @@ import Connector, {
   GetBalanceResponse,
   GetInfoResponse,
   GetInvoicesResponse,
+  GetTransactionsResponse,
   KeysendArgs,
   MakeInvoiceArgs,
   MakeInvoiceResponse,
@@ -85,6 +86,15 @@ class CitadelConnector implements Connector {
     );
   }
 
+  getTransactions(): Promise<GetTransactionsResponse> {
+    console.error(
+      `Not yet supported with the currently used account: ${this.constructor.name}`
+    );
+    throw new Error(
+      `${this.constructor.name}: "getTransactions" is not yet supported. Contact us if you need it.`
+    );
+  }
+
   // not yet implemented
   async connectPeer(): Promise<ConnectPeerResponse> {
     console.error(
diff --git a/src/extension/background-script/connectors/commando.ts b/src/extension/background-script/connectors/commando.ts
index 6ea545af53..1b7dc82de4 100644
--- a/src/extension/background-script/connectors/commando.ts
+++ b/src/extension/background-script/connectors/commando.ts
@@ -14,6 +14,7 @@ import Connector, {
   GetBalanceResponse,
   GetInfoResponse,
   GetInvoicesResponse,
+  GetTransactionsResponse,
   KeysendArgs,
   MakeInvoiceArgs,
   MakeInvoiceResponse,
@@ -221,6 +222,15 @@ export default class Commando implements Connector {
       });
   }
 
+  getTransactions(): Promise<GetTransactionsResponse> {
+    console.error(
+      `Not yet supported with the currently used account: ${this.constructor.name}`
+    );
+    throw new Error(
+      `${this.constructor.name}: "getTransactions" is not yet supported. Contact us if you need it.`
+    );
+  }
+
   async getInfo(): Promise<GetInfoResponse> {
     const response = (await this.ln.commando({
       method: "getinfo",
diff --git a/src/extension/background-script/connectors/connector.interface.ts b/src/extension/background-script/connectors/connector.interface.ts
index 03700cef9b..0bd8723ec8 100644
--- a/src/extension/background-script/connectors/connector.interface.ts
+++ b/src/extension/background-script/connectors/connector.interface.ts
@@ -29,7 +29,7 @@ export interface ConnectorInvoice {
   settled: boolean;
   settleDate: number;
   totalAmount: string;
-  type: "received";
+  type: "received" | "sent";
 }
 
 export interface MakeInvoiceArgs {
@@ -61,6 +61,11 @@ export type GetInvoicesResponse = {
   };
 };
 
+export type GetTransactionsResponse = {
+  data: {
+    transactions: ConnectorInvoice[];
+  };
+};
 export type SendPaymentResponse = {
   data: {
     preimage: string;
@@ -120,6 +125,7 @@ export default interface Connector {
   getInfo(): Promise<GetInfoResponse>;
   getBalance(): Promise<GetBalanceResponse>;
   getInvoices(): Promise<GetInvoicesResponse>;
+  getTransactions(): Promise<GetTransactionsResponse>;
   makeInvoice(args: MakeInvoiceArgs): Promise<MakeInvoiceResponse>;
   sendPayment(args: SendPaymentArgs): Promise<SendPaymentResponse>;
   keysend(args: KeysendArgs): Promise<SendPaymentResponse>;
diff --git a/src/extension/background-script/connectors/eclair.ts b/src/extension/background-script/connectors/eclair.ts
index 4f73c267ff..9bff743413 100644
--- a/src/extension/background-script/connectors/eclair.ts
+++ b/src/extension/background-script/connectors/eclair.ts
@@ -10,6 +10,7 @@ import Connector, {
   GetBalanceResponse,
   GetInfoResponse,
   GetInvoicesResponse,
+  GetTransactionsResponse,
   KeysendArgs,
   MakeInvoiceArgs,
   MakeInvoiceResponse,
@@ -100,6 +101,15 @@ class Eclair implements Connector {
     };
   }
 
+  getTransactions(): Promise<GetTransactionsResponse> {
+    console.error(
+      `Not yet supported with the currently used account: ${this.constructor.name}`
+    );
+    throw new Error(
+      `${this.constructor.name}: "getTransactions" is not yet supported. Contact us if you need it.`
+    );
+  }
+
   async getBalance(): Promise<GetBalanceResponse> {
     const balances = await this.request("/usablebalances");
     const total = balances
diff --git a/src/extension/background-script/connectors/galoy.ts b/src/extension/background-script/connectors/galoy.ts
index 9690cfdd80..74e94ba5d0 100644
--- a/src/extension/background-script/connectors/galoy.ts
+++ b/src/extension/background-script/connectors/galoy.ts
@@ -10,6 +10,7 @@ import Connector, {
   GetBalanceResponse,
   GetInfoResponse,
   GetInvoicesResponse,
+  GetTransactionsResponse,
   KeysendArgs,
   MakeInvoiceArgs,
   MakeInvoiceResponse,
@@ -96,6 +97,15 @@ class Galoy implements Connector {
     return { data: { invoices: [] } };
   }
 
+  getTransactions(): Promise<GetTransactionsResponse> {
+    console.error(
+      `Not yet supported with the currently used account: ${this.constructor.name}`
+    );
+    throw new Error(
+      `${this.constructor.name}: "getTransactions" is not yet supported. Contact us if you need it.`
+    );
+  }
+
   async getBalance(): Promise<GetBalanceResponse> {
     const query = {
       query: `
diff --git a/src/extension/background-script/connectors/kollider.ts b/src/extension/background-script/connectors/kollider.ts
index d00c125097..049ed6229a 100644
--- a/src/extension/background-script/connectors/kollider.ts
+++ b/src/extension/background-script/connectors/kollider.ts
@@ -16,6 +16,7 @@ import Connector, {
   GetBalanceResponse,
   GetInfoResponse,
   GetInvoicesResponse,
+  GetTransactionsResponse,
   KeysendArgs,
   MakeInvoiceArgs,
   MakeInvoiceResponse,
@@ -133,6 +134,15 @@ export default class Kollider implements Connector {
     };
   }
 
+  getTransactions(): Promise<GetTransactionsResponse> {
+    console.error(
+      `Not yet supported with the currently used account: ${this.constructor.name}`
+    );
+    throw new Error(
+      `${this.constructor.name}: "getTransactions" is not yet supported. Contact us if you need it.`
+    );
+  }
+
   async getInfo(): Promise<GetInfoResponse> {
     return { data: { alias: `Kollider (${this.currency})` } };
   }
diff --git a/src/extension/background-script/connectors/lnbits.ts b/src/extension/background-script/connectors/lnbits.ts
index 31939584c4..ed977faea0 100644
--- a/src/extension/background-script/connectors/lnbits.ts
+++ b/src/extension/background-script/connectors/lnbits.ts
@@ -14,6 +14,7 @@ import Connector, {
   GetBalanceResponse,
   GetInfoResponse,
   GetInvoicesResponse,
+  GetTransactionsResponse,
   KeysendArgs,
   MakeInvoiceArgs,
   MakeInvoiceResponse,
@@ -145,6 +146,15 @@ class LnBits implements Connector {
     );
   }
 
+  getTransactions(): Promise<GetTransactionsResponse> {
+    console.error(
+      `Not yet supported with the currently used account: ${this.constructor.name}`
+    );
+    throw new Error(
+      `${this.constructor.name}: "getTransactions" is not yet supported. Contact us if you need it.`
+    );
+  }
+
   getBalance(): Promise<GetBalanceResponse> {
     return this.request(
       "GET",
diff --git a/src/extension/background-script/connectors/lnc.ts b/src/extension/background-script/connectors/lnc.ts
index 69789de0f6..c5bfc6e375 100644
--- a/src/extension/background-script/connectors/lnc.ts
+++ b/src/extension/background-script/connectors/lnc.ts
@@ -19,6 +19,7 @@ import Connector, {
   GetBalanceResponse,
   GetInfoResponse,
   GetInvoicesResponse,
+  GetTransactionsResponse,
   KeysendArgs,
   MakeInvoiceArgs,
   MakeInvoiceResponse,
@@ -270,6 +271,15 @@ class Lnc implements Connector {
     };
   }
 
+  getTransactions(): Promise<GetTransactionsResponse> {
+    console.error(
+      `Not yet supported with the currently used account: ${this.constructor.name}`
+    );
+    throw new Error(
+      `${this.constructor.name}: "getTransactions" is not yet supported. Contact us if you need it.`
+    );
+  }
+
   // not yet implemented
   async connectPeer(): Promise<ConnectPeerResponse> {
     console.error(
diff --git a/src/extension/background-script/connectors/lnd.ts b/src/extension/background-script/connectors/lnd.ts
index a488a12951..25e79df351 100644
--- a/src/extension/background-script/connectors/lnd.ts
+++ b/src/extension/background-script/connectors/lnd.ts
@@ -16,6 +16,7 @@ import Connector, {
   GetBalanceResponse,
   GetInfoResponse,
   GetInvoicesResponse,
+  GetTransactionsResponse,
   KeysendArgs,
   MakeInvoiceArgs,
   MakeInvoiceResponse,
@@ -462,6 +463,15 @@ class Lnd implements Connector {
     };
   }
 
+  getTransactions(): Promise<GetTransactionsResponse> {
+    console.error(
+      `Not yet supported with the currently used account: ${this.constructor.name}`
+    );
+    throw new Error(
+      `${this.constructor.name}: "getTransactions" is not yet supported. Contact us if you need it.`
+    );
+  }
+
   protected async request<Type>(
     method: string,
     path: string,
diff --git a/src/extension/background-script/connectors/lndhub.ts b/src/extension/background-script/connectors/lndhub.ts
index 0d0e7473bd..dc8945e97e 100644
--- a/src/extension/background-script/connectors/lndhub.ts
+++ b/src/extension/background-script/connectors/lndhub.ts
@@ -19,6 +19,7 @@ import Connector, {
   GetBalanceResponse,
   GetInfoResponse,
   GetInvoicesResponse,
+  GetTransactionsResponse,
   KeysendArgs,
   MakeInvoiceArgs,
   MakeInvoiceResponse,
@@ -129,6 +130,15 @@ export default class LndHub implements Connector {
     };
   }
 
+  getTransactions(): Promise<GetTransactionsResponse> {
+    console.error(
+      `Not yet supported with the currently used account: ${this.constructor.name}`
+    );
+    throw new Error(
+      `${this.constructor.name}: "getTransactions" is not yet supported. Contact us if you need it.`
+    );
+  }
+
   async getInfo(): Promise<GetInfoResponse> {
     const { alias } = await this.request<{ alias: string }>(
       "GET",
diff --git a/src/extension/background-script/router.ts b/src/extension/background-script/router.ts
index 1cd1b50b4e..3a60f9898b 100644
--- a/src/extension/background-script/router.ts
+++ b/src/extension/background-script/router.ts
@@ -32,6 +32,7 @@ const routes = {
   unlock: accounts.unlock,
   getInfo: ln.getInfo,
   getInvoices: ln.invoices,
+  getTransactions: ln.transactions,
   sendPayment: ln.sendPayment,
   keysend: ln.keysend,
   checkPayment: ln.checkPayment,
diff --git a/src/types.ts b/src/types.ts
index e9a0796876..0bdd0e90a9 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -345,6 +345,10 @@ export interface MessageInvoices extends Omit<MessageDefault, "args"> {
   args: { limit?: number; isSettled?: boolean };
   action: "getInvoices";
 }
+export interface MessageTransactions extends Omit<MessageDefault, "args"> {
+  args: { limit?: number; isSettled?: boolean };
+  action: "getTransactions";
+}
 
 export interface MessageAllowanceEnable extends MessageDefault {
   origin: OriginData;
@@ -872,7 +876,7 @@ export type SupportedExchanges = "alby" | "coindesk" | "yadio";
 export interface Invoice {
   id: string;
   memo: string;
-  type: "received";
+  type: "received" | "sent";
   settled: boolean;
   settleDate: number;
   totalAmount: string;

From ef18f75e991ab3c9e295b62e0323a6c55dc79cd9 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Tue, 3 Oct 2023 20:15:06 +0530
Subject: [PATCH 15/40] chore: some improvements

---
 src/app/hooks/useTransactions.ts              | 29 +++++++++++++++----
 .../actions/ln/transactions.ts                | 21 +++++++++-----
 2 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/app/hooks/useTransactions.ts b/src/app/hooks/useTransactions.ts
index 5d458aa5c4..5fe6552400 100644
--- a/src/app/hooks/useTransactions.ts
+++ b/src/app/hooks/useTransactions.ts
@@ -33,16 +33,33 @@ export const useTransactions = () => {
           })
         );
 
-        // const getalltrans = await api.getTransactions({
-        //   isSettled: true,
-        //   limit,
-        // });
-        // console.log(getalltrans);
+        let allTransactions = undefined;
+
+        const getAllTransactionsResponse = await api.getTransactions({
+          isSettled: true,
+          limit,
+        });
+
+        try {
+          allTransactions = getAllTransactionsResponse.transactions.map(
+            (transaction) => ({
+              ...transaction,
+              title: transaction.memo,
+              description: transaction.memo,
+              date: dayjs(transaction.settleDate).fromNow(),
+              timestamp: transaction.settleDate,
+            })
+          );
+        } catch (e) {
+          console.error(e);
+        }
 
         const _transactions: Transaction[] =
           await convertPaymentsToTransactions(payments);
 
-        const transactionList: Transaction[] = [..._transactions, ...invoices];
+        const transactionList: Transaction[] = allTransactions
+          ? allTransactions
+          : [..._transactions, ...invoices];
 
         for (const transaction of transactionList) {
           transaction.totalAmountFiat = settings.showFiat
diff --git a/src/extension/background-script/actions/ln/transactions.ts b/src/extension/background-script/actions/ln/transactions.ts
index 1e07b67540..a62ac33c8b 100644
--- a/src/extension/background-script/actions/ln/transactions.ts
+++ b/src/extension/background-script/actions/ln/transactions.ts
@@ -8,23 +8,30 @@ const transactions = async (message: MessageTransactions) => {
 
   const connector = await state.getState().getConnector();
   try {
+    const supportedMethods = connector.supportedMethods || [];
+    if (!supportedMethods.includes("getTransactions")) {
+      return "not supported";
+    }
     const result = await connector.getTransactions();
-    let invoices: Invoice[] = result.data.transactions
-      .filter((invoice) => (isSettled ? invoice.settled : !invoice.settled))
-      .map((invoice) => {
+
+    let transactions: Invoice[] = result.data.transactions
+      .filter((transaction) =>
+        isSettled ? transaction.settled : !transaction.settled
+      )
+      .map((transaction) => {
         const boostagram = utils.getBoostagramFromInvoiceCustomRecords(
-          invoice.custom_records
+          transaction.custom_records
         );
-        return { ...invoice, boostagram };
+        return { ...transaction, boostagram };
       });
 
     if (limit) {
-      invoices = invoices.slice(0, limit);
+      transactions = transactions.slice(0, limit);
     }
 
     return {
       data: {
-        invoices,
+        transactions,
       },
     };
   } catch (e) {

From 4cd595176f66ec1ab1d1ab18d62c876b18d834a4 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Wed, 4 Oct 2023 12:12:45 +0530
Subject: [PATCH 16/40] chore: proper error handling

---
 src/app/hooks/useTransactions.ts                      | 11 +++++------
 .../background-script/actions/ln/transactions.ts      |  4 ----
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/app/hooks/useTransactions.ts b/src/app/hooks/useTransactions.ts
index 5fe6552400..c7c412ed43 100644
--- a/src/app/hooks/useTransactions.ts
+++ b/src/app/hooks/useTransactions.ts
@@ -33,14 +33,13 @@ export const useTransactions = () => {
           })
         );
 
-        let allTransactions = undefined;
-
-        const getAllTransactionsResponse = await api.getTransactions({
-          isSettled: true,
-          limit,
-        });
+        let allTransactions;
 
         try {
+          const getAllTransactionsResponse = await api.getTransactions({
+            isSettled: true,
+            limit,
+          });
           allTransactions = getAllTransactionsResponse.transactions.map(
             (transaction) => ({
               ...transaction,
diff --git a/src/extension/background-script/actions/ln/transactions.ts b/src/extension/background-script/actions/ln/transactions.ts
index a62ac33c8b..6194643a98 100644
--- a/src/extension/background-script/actions/ln/transactions.ts
+++ b/src/extension/background-script/actions/ln/transactions.ts
@@ -8,10 +8,6 @@ const transactions = async (message: MessageTransactions) => {
 
   const connector = await state.getState().getConnector();
   try {
-    const supportedMethods = connector.supportedMethods || [];
-    if (!supportedMethods.includes("getTransactions")) {
-      return "not supported";
-    }
     const result = await connector.getTransactions();
 
     let transactions: Invoice[] = result.data.transactions

From fa27b14ad0a2ebf5e80e1d73618f6a56d8a7caa6 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Wed, 4 Oct 2023 12:39:15 +0530
Subject: [PATCH 17/40] feat: add strokes to the icons

---
 .../components/TransactionsTable/TransactionModal.tsx  | 10 ++++++----
 src/app/components/TransactionsTable/index.tsx         |  6 +++---
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/app/components/TransactionsTable/TransactionModal.tsx b/src/app/components/TransactionsTable/TransactionModal.tsx
index 27e95685ac..20d786a01d 100644
--- a/src/app/components/TransactionsTable/TransactionModal.tsx
+++ b/src/app/components/TransactionsTable/TransactionModal.tsx
@@ -1,9 +1,11 @@
 import {
-  ArrowDownIcon,
-  ArrowUpIcon,
   CaretDownIcon,
   CaretUpIcon,
 } from "@bitcoin-design/bitcoin-icons-react/filled";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+} from "@bitcoin-design/bitcoin-icons-react/outline";
 import dayjs from "dayjs";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -61,11 +63,11 @@ export default function TransactionModal({
             <div className="flex items-center justify-center">
               {getTransactionType(transaction) == "outgoing" ? (
                 <div className="flex justify-center items-center bg-orange-100 rounded-full p-8">
-                  <ArrowUpIcon className="w-8 h-8 text-orange-400" />
+                  <ArrowUpIcon className="w-8 h-8 text-orange-400 stroke-[5px]" />
                 </div>
               ) : (
                 <div className="flex justify-center items-center bg-green-100 rounded-full p-8">
-                  <ArrowDownIcon className="w-8 h-8 text-green-400" />
+                  <ArrowDownIcon className="w-8 h-8 text-green-400 stroke-[5px]" />
                 </div>
               )}
             </div>
diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
index 3433645048..5137f9beb4 100644
--- a/src/app/components/TransactionsTable/index.tsx
+++ b/src/app/components/TransactionsTable/index.tsx
@@ -1,7 +1,7 @@
 import {
   ArrowDownIcon,
   ArrowUpIcon,
-} from "@bitcoin-design/bitcoin-icons-react/filled";
+} from "@bitcoin-design/bitcoin-icons-react/outline";
 import Loading from "@components/Loading";
 
 import { useState } from "react";
@@ -59,11 +59,11 @@ export default function TransactionsTable({
                 <div className="flex items-center">
                   {type == "outgoing" ? (
                     <div className="flex justify-center items-center bg-orange-100 rounded-full w-8 h-8">
-                      <ArrowUpIcon className="w-6 h-6 text-orange-400" />
+                      <ArrowUpIcon className="w-6 h-6 text-orange-400 stroke-[4px]" />
                     </div>
                   ) : (
                     <div className="flex justify-center items-center bg-green-100 rounded-full w-8 h-8">
-                      <ArrowDownIcon className="w-6 h-6 text-green-400" />
+                      <ArrowDownIcon className="w-6 h-6 text-green-400 stroke-[4px]" />
                     </div>
                   )}
                 </div>

From f5dd239d5ddcec783673d470c058c5a1c06fbbe5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Wed, 4 Oct 2023 14:05:02 +0200
Subject: [PATCH 18/40] fix: style improvements

---
 src/app/components/Modal/index.tsx            |   9 +-
 .../TransactionsTable/TransactionModal.tsx    | 200 +++++++++---------
 .../components/TransactionsTable/index.tsx    |   2 +-
 src/app/screens/Home/DefaultView/index.tsx    |  28 ++-
 src/i18n/locales/en/translation.json          |   4 +-
 5 files changed, 123 insertions(+), 120 deletions(-)

diff --git a/src/app/components/Modal/index.tsx b/src/app/components/Modal/index.tsx
index 9dfbded91a..bcc94b42c1 100644
--- a/src/app/components/Modal/index.tsx
+++ b/src/app/components/Modal/index.tsx
@@ -1,3 +1,4 @@
+import { CrossIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import ReactModal from "react-modal";
 
 type Props = {
@@ -21,9 +22,15 @@ export default function Modal({
       onRequestClose={closeModal}
       contentLabel={title}
       overlayClassName="bg-black bg-opacity-50 fixed inset-0 flex justify-center items-center p-5"
-      className="rounded-lg bg-white dark:bg-surface-02dp w-full max-w-md overflow-hidden"
+      className="rounded-lg bg-white dark:bg-surface-02dp w-full max-w-md overflow-hidden relative px-4 pt-10 pb-6"
       style={{ content: { maxHeight: "90vh" } }}
     >
+      <button
+        onClick={closeModal}
+        className="absolute right-4 top-4  text-gray-600 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-300"
+      >
+        <CrossIcon className="w-6 h-6" />
+      </button>
       {children}
     </ReactModal>
   );
diff --git a/src/app/components/TransactionsTable/TransactionModal.tsx b/src/app/components/TransactionsTable/TransactionModal.tsx
index 20d786a01d..2c0b37d02a 100644
--- a/src/app/components/TransactionsTable/TransactionModal.tsx
+++ b/src/app/components/TransactionsTable/TransactionModal.tsx
@@ -21,6 +21,31 @@ type Props = {
   isOpen: boolean;
 };
 
+const Dt = ({ children }: { children: React.ReactNode }) => (
+  <dt className="text-sm leading-5 text-gray-400 dark:text-neutral-500 text-right">
+    {children}
+  </dt>
+);
+
+const Dd = ({ children }: { children: React.ReactNode }) => (
+  <dd className="text-sm leading-5 text-gray-800 dark:text-neutral-200 col-span-2 break-all">
+    {children}
+  </dd>
+);
+
+const TransactionDetailRow = ({
+  title,
+  content,
+}: {
+  title: React.ReactNode;
+  content: React.ReactNode;
+}) => (
+  <div className="grid grid-cols-3 gap-2 p-1">
+    <Dt>{title}</Dt>
+    <Dd>{content}</Dd>
+  </div>
+);
+
 export default function TransactionModal({
   transaction,
   isOpen,
@@ -97,111 +122,78 @@ export default function TransactionModal({
               )}
             </div>
           </div>
-          <div>
-            <div>
-              <div className="mt-6">
-                <dl>
-                  <div className="grid grid-cols-3 gap-2 p-1">
-                    <dt className="text-md font-medium leading-6 text-gray-400 dark:text-neutral-600 text-right">
-                      Date & Time
-                    </dt>
-                    <dd className="text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
-                      {dayjs(transaction.timestamp).format(
-                        "D MMMM YYYY, HH:mm"
-                      )}
-                    </dd>
-                  </div>
-                  {transaction.totalFees?.toString && (
-                    <div className="grid grid-cols-3 gap-2 px-0 p-1">
-                      <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
-                        Fee
-                      </dt>
-                      <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
-                        {getFormattedSats(transaction.totalFees)}
-                      </dd>
-                    </div>
-                  )}
-                  {transaction.publisherLink && transaction.title && (
-                    <div className="grid grid-cols-3 gap-2 px-0 p-1">
-                      <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
-                        Website
-                      </dt>
-                      <dd className=" text-md leading-6 col-span-2 mt-0 break-all">
-                        <a
-                          className="cursor-pointer text-blue-600 hover:text-blue-700"
-                          target="_blank"
-                          href={transaction.publisherLink}
-                          rel="noopener noreferrer"
-                        >
-                          {transaction.title}
-                        </a>
-                      </dd>
-                    </div>
-                  )}
-
-                  {transaction.boostagram?.podcast && (
-                    <div className="grid grid-cols-3 gap-2 px-0 p-1">
-                      <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
-                        Podcast
-                      </dt>
-                      <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
-                        {transaction.boostagram?.podcast}
-                      </dd>
-                    </div>
-                  )}
-                  {transaction.boostagram?.episode && (
-                    <div className="grid grid-cols-3 gap-2 px-0 p-1">
-                      <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
-                        Episode
-                      </dt>
-                      <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
-                        {transaction.boostagram.episode}
-                      </dd>
-                    </div>
-                  )}
-                  {transaction.description && (
-                    <div className="grid grid-cols-3 gap-2 px-0 p-1">
-                      <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
-                        Description
-                      </dt>
-                      <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
-                        {transaction.description}
-                      </dd>
-                    </div>
-                  )}
-                  <div className="flex justify-center mt-4">
-                    <Hyperlink onClick={toggleShowMoreFields}>
-                      {tCommon("actions.more")}{" "}
-                      {showMoreFields ? (
-                        <CaretUpIcon className="h-4 w-4 inline-flex" />
-                      ) : (
-                        <CaretDownIcon className="h-4 w-4 inline-flex" />
-                      )}
-                    </Hyperlink>
-                  </div>
-                  {showMoreFields && transaction.type == "sent" && (
-                    <div className="grid grid-cols-3 gap-2 px-0 p-1">
-                      <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
-                        Preimage
-                      </dt>
-                      <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
-                        {transaction.preimage}
-                      </dd>
-                    </div>
-                  )}
-                  {showMoreFields && transaction.type == "sent" && (
-                    <div className="grid grid-cols-3 gap-2 px-0 p-1">
-                      <dt className="text-md text-right font-medium leading-6 text-gray-400 dark:text-neutral-600">
-                        Hash
-                      </dt>
-                      <dd className=" text-md leading-6  text-gray-900 dark:text-white col-span-2 mt-0 break-all">
-                        {transaction.paymentHash}
-                      </dd>
-                    </div>
-                  )}
-                </dl>
-              </div>
+          {/* List */}
+          <div className="mt-6">
+            <TransactionDetailRow
+              title="Date & Time"
+              content={dayjs(transaction.timestamp).format(
+                "D MMMM YYYY, HH:mm"
+              )}
+            />
+            {transaction.totalFees?.toString && (
+              <TransactionDetailRow
+                title="Fee"
+                content={getFormattedSats(transaction.totalFees)}
+              />
+            )}
+            {transaction.publisherLink && transaction.title && (
+              <TransactionDetailRow
+                title="Website"
+                content={
+                  <Hyperlink
+                    target="_blank"
+                    href={transaction.publisherLink}
+                    rel="noopener noreferrer"
+                  >
+                    {transaction.title}
+                  </Hyperlink>
+                }
+              />
+            )}
+            {transaction.boostagram?.podcast && (
+              <TransactionDetailRow
+                title="Podcast"
+                content={transaction.boostagram?.podcast}
+              />
+            )}
+            {transaction.boostagram?.episode && (
+              <TransactionDetailRow
+                title="Episode"
+                content={transaction.boostagram.episode}
+              />
+            )}
+            {transaction.description && (
+              <TransactionDetailRow
+                title="Description"
+                content={transaction.description}
+              />
+            )}
+            <div className="flex justify-center mt-4">
+              <Hyperlink onClick={toggleShowMoreFields}>
+                {tCommon("actions.more")}{" "}
+                {showMoreFields ? (
+                  <CaretUpIcon className="h-4 w-4 inline-flex" />
+                ) : (
+                  <CaretDownIcon className="h-4 w-4 inline-flex" />
+                )}
+              </Hyperlink>
             </div>
+            {showMoreFields && (
+              <>
+                {transaction.preimage && (
+                  <TransactionDetailRow
+                    title="Preimage"
+                    content={transaction.preimage}
+                  />
+                )}
+                {transaction.paymentHash && (
+                  <TransactionDetailRow
+                    title="Payment hash"
+                    content={transaction.paymentHash}
+                  />
+                )}
+              </>
+            )}
           </div>
         </div>
       )}
diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
index 5137f9beb4..35b0f5b2ca 100644
--- a/src/app/components/TransactionsTable/index.tsx
+++ b/src/app/components/TransactionsTable/index.tsx
@@ -78,7 +78,7 @@ export default function TransactionsTable({
                         (type == "incoming" ? "Received" : "Sent")}
                     </p>
                   </div>
-                  <p className="text-xs text-gray-600 dark:text-neutral-400">
+                  <p className="text-xs text-gray-400 dark:text-neutral-500">
                     {tx.date}
                   </p>
                 </div>
diff --git a/src/app/screens/Home/DefaultView/index.tsx b/src/app/screens/Home/DefaultView/index.tsx
index 48b97f537d..cf92fb50d3 100644
--- a/src/app/screens/Home/DefaultView/index.tsx
+++ b/src/app/screens/Home/DefaultView/index.tsx
@@ -1,9 +1,9 @@
 import {
+  ArrowRightIcon,
   ReceiveIcon,
   SendIcon,
 } from "@bitcoin-design/bitcoin-icons-react/filled";
 import Button from "@components/Button";
-import Hyperlink from "@components/Hyperlink";
 import Loading from "@components/Loading";
 import TransactionsTable from "@components/TransactionsTable";
 import dayjs from "dayjs";
@@ -12,6 +12,7 @@ import { FC, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import BalanceBox from "~/app/components/BalanceBox";
+import Hyperlink from "~/app/components/Hyperlink";
 import SkeletonLoader from "~/app/components/SkeletonLoader";
 import toast from "~/app/components/Toast";
 import { useAccount } from "~/app/context/AccountContext";
@@ -171,22 +172,27 @@ const DefaultView: FC<Props> = (props) => {
 
         {!isLoading && (
           <div>
-            <h2 className="mb-2 text-lg lg:text-xl text-gray-900 font-bold dark:text-white text-center">
-              {t("default_view.latest_transactions")}
-            </h2>
+            <div className="flex justify-between items-center mb-2">
+              <h2 className="text-lg lg:text-xl font-semibold dark:text-white text-center">
+                {t("default_view.latest_transactions")}
+              </h2>
+
+              {!isLoading && transactions.length > 0 && (
+                <Hyperlink
+                  onClick={() => handleViewAllLink("/transactions")}
+                  className="flex justify-between items-center"
+                >
+                  {t("default_view.see_all")}
+                  <ArrowRightIcon className="w-4 h-4" />
+                </Hyperlink>
+              )}
+            </div>
 
             <TransactionsTable
               transactions={transactions}
               loading={isLoading}
               noResultMsg={t("default_view.no_transactions")}
             />
-            {!isLoading && transactions.length > 0 && (
-              <div className="mt-5 text-center">
-                <Hyperlink onClick={() => handleViewAllLink("/transactions")}>
-                  {t("default_view.all_transactions_link")}
-                </Hyperlink>
-              </div>
-            )}
           </div>
         )}
       </div>
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index d46bc544cf..b694216125 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -367,8 +367,7 @@
         "is_blocked_hint": "Alby is currently disabled on {{host}}",
         "block_removed": "Enabled {{host}}. Please reload the website.",
         "no_transactions": "No transactions for this account yet.",
-
-        "all_transactions_link": "See all transactions"
+        "see_all": "See all"
       }
     },
     "accounts": {
@@ -954,7 +953,6 @@
     "transactions": {
       "title": "Transactions",
       "description": "Transactions for this account",
-
       "list_empty": "No transactions available yet."
     },
     "onboard": {

From 7688615bc02c89e6114685017759e31274a29a76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Mon, 9 Oct 2023 11:01:32 +0200
Subject: [PATCH 19/40] fix: spacing improvements

---
 .../TransactionsTable/TransactionModal.tsx    | 51 ++++++++++---------
 .../components/TransactionsTable/index.tsx    | 11 ++--
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/app/components/TransactionsTable/TransactionModal.tsx b/src/app/components/TransactionsTable/TransactionModal.tsx
index 2c0b37d02a..7c34e26696 100644
--- a/src/app/components/TransactionsTable/TransactionModal.tsx
+++ b/src/app/components/TransactionsTable/TransactionModal.tsx
@@ -116,13 +116,12 @@ export default function TransactionModal({
               </p>
 
               {!!transaction.totalAmountFiat && (
-                <p className="text-md mt-1 text-gray-400 dark:text-neutral-600">
+                <p className="text-md mt-1 text-gray-400 dark:text-neutral-500">
                   ~{transaction.totalAmountFiat}
                 </p>
               )}
             </div>
           </div>
-          {/* List */}
           <div className="mt-6">
             <TransactionDetailRow
               title="Date & Time"
@@ -168,29 +167,33 @@ export default function TransactionModal({
                 content={transaction.description}
               />
             )}
-            <div className="flex justify-center mt-4">
-              <Hyperlink onClick={toggleShowMoreFields}>
-                {tCommon("actions.more")}{" "}
-                {showMoreFields ? (
-                  <CaretUpIcon className="h-4 w-4 inline-flex" />
-                ) : (
-                  <CaretDownIcon className="h-4 w-4 inline-flex" />
-                )}
-              </Hyperlink>
-            </div>
-            {showMoreFields && (
+            {(transaction.preimage || transaction.paymentHash) && (
               <>
-                {transaction.preimage && (
-                  <TransactionDetailRow
-                    title="Preimage"
-                    content={transaction.preimage}
-                  />
-                )}
-                {transaction.paymentHash && (
-                  <TransactionDetailRow
-                    title="Payment hash"
-                    content={transaction.paymentHash}
-                  />
+                <div className="flex justify-center mt-4">
+                  <Hyperlink onClick={toggleShowMoreFields}>
+                    {tCommon("actions.more")}{" "}
+                    {showMoreFields ? (
+                      <CaretUpIcon className="h-4 w-4 inline-flex" />
+                    ) : (
+                      <CaretDownIcon className="h-4 w-4 inline-flex" />
+                    )}
+                  </Hyperlink>
+                </div>
+                {showMoreFields && (
+                  <>
+                    {transaction.preimage && (
+                      <TransactionDetailRow
+                        title="Preimage"
+                        content={transaction.preimage}
+                      />
+                    )}
+                    {transaction.paymentHash && (
+                      <TransactionDetailRow
+                        title="Payment hash"
+                        content={transaction.paymentHash}
+                      />
+                    )}
+                  </>
                 )}
               </>
             )}
diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
index 35b0f5b2ca..05d88a3856 100644
--- a/src/app/components/TransactionsTable/index.tsx
+++ b/src/app/components/TransactionsTable/index.tsx
@@ -55,23 +55,20 @@ export default function TransactionsTable({
               className="px-3 py-2 hover:bg-gray-100 dark:hover:bg-surface-02dp cursor-pointer rounded-md"
               onClick={() => openDetails(tx)}
             >
-              <div className="flex gap-3">
+              <div className="flex gap-4">
                 <div className="flex items-center">
                   {type == "outgoing" ? (
                     <div className="flex justify-center items-center bg-orange-100 rounded-full w-8 h-8">
-                      <ArrowUpIcon className="w-6 h-6 text-orange-400 stroke-[4px]" />
+                      <ArrowUpIcon className="w-4 h-4 text-orange-400 stroke-[4px]" />
                     </div>
                   ) : (
                     <div className="flex justify-center items-center bg-green-100 rounded-full w-8 h-8">
-                      <ArrowDownIcon className="w-6 h-6 text-green-400 stroke-[4px]" />
+                      <ArrowDownIcon className="w-4 h-4 text-green-400 stroke-[4px]" />
                     </div>
                   )}
                 </div>
                 <div className="overflow-hidden mr-3">
-                  <div
-                    className="
-      text-sm font-medium text-black truncate dark:text-white"
-                  >
+                  <div className="text-sm font-medium text-black truncate dark:text-white">
                     <p className="truncate">
                       {tx.title ||
                         tx.boostagram?.message ||

From 4a1eed451631515eeed84d80b81a384f742cda29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Wed, 11 Oct 2023 14:20:50 +0200
Subject: [PATCH 20/40] fix: translations & layout improvements

---
 src/app/components/Modal/index.tsx            |  5 +-
 .../TransactionsTable/TransactionModal.tsx    | 55 +++++++++++--------
 .../components/TransactionsTable/index.tsx    |  6 +-
 src/i18n/locales/cs/translation.json          |  2 +-
 src/i18n/locales/da/translation.json          |  2 +-
 src/i18n/locales/de/translation.json          |  2 +-
 src/i18n/locales/en/translation.json          | 11 ++--
 src/i18n/locales/eo/translation.json          |  2 +-
 src/i18n/locales/es/translation.json          |  2 +-
 src/i18n/locales/fa/translation.json          |  2 +-
 src/i18n/locales/fi/translation.json          |  2 +-
 src/i18n/locales/fr/translation.json          |  2 +-
 src/i18n/locales/hi/translation.json          |  2 +-
 src/i18n/locales/id/translation.json          |  2 +-
 src/i18n/locales/it/translation.json          |  2 +-
 src/i18n/locales/mr/translation.json          |  2 +-
 src/i18n/locales/nl/translation.json          |  2 +-
 src/i18n/locales/pl/translation.json          |  2 +-
 src/i18n/locales/pt_BR/translation.json       |  2 +-
 src/i18n/locales/ro/translation.json          |  2 +-
 src/i18n/locales/ru/translation.json          |  2 +-
 src/i18n/locales/sv/translation.json          |  2 +-
 src/i18n/locales/th/translation.json          |  2 +-
 src/i18n/locales/tl/translation.json          |  2 +-
 src/i18n/locales/uk/translation.json          |  2 +-
 src/i18n/locales/zh_Hans/translation.json     |  2 +-
 src/i18n/locales/zh_Hant/translation.json     |  2 +-
 27 files changed, 67 insertions(+), 56 deletions(-)

diff --git a/src/app/components/Modal/index.tsx b/src/app/components/Modal/index.tsx
index bcc94b42c1..8abacc74cb 100644
--- a/src/app/components/Modal/index.tsx
+++ b/src/app/components/Modal/index.tsx
@@ -18,11 +18,12 @@ export default function Modal({
     <ReactModal
       ariaHideApp={false}
       closeTimeoutMS={200}
+      shouldFocusAfterRender={false}
       isOpen={isOpen}
       onRequestClose={closeModal}
       contentLabel={title}
-      overlayClassName="bg-black bg-opacity-50 fixed inset-0 flex justify-center items-center p-5"
-      className="rounded-lg bg-white dark:bg-surface-02dp w-full max-w-md overflow-hidden relative px-4 pt-10 pb-6"
+      overlayClassName="bg-black bg-opacity-50 fixed inset-0 flex justify-center items-center p-5 cursor-pointer"
+      className="rounded-lg shadow-xl bg-white dark:bg-surface-02dp w-full max-w-md overflow-hidden relative px-4 pt-10 pb-6 cursor-auto"
       style={{ content: { maxHeight: "90vh" } }}
     >
       <button
diff --git a/src/app/components/TransactionsTable/TransactionModal.tsx b/src/app/components/TransactionsTable/TransactionModal.tsx
index 7c34e26696..1689ed587d 100644
--- a/src/app/components/TransactionsTable/TransactionModal.tsx
+++ b/src/app/components/TransactionsTable/TransactionModal.tsx
@@ -22,13 +22,13 @@ type Props = {
 };
 
 const Dt = ({ children }: { children: React.ReactNode }) => (
-  <dt className="text-sm leading-5 text-gray-400 dark:text-neutral-500 text-right">
+  <dt className="basis-28 text-gray-400 dark:text-neutral-500 text-right">
     {children}
   </dt>
 );
 
 const Dd = ({ children }: { children: React.ReactNode }) => (
-  <dd className="text-sm leading-5 text-gray-800 dark:text-neutral-200 col-span-2 break-all">
+  <dd className="flex-1 text-gray-800 dark:text-neutral-200 break-all">
     {children}
   </dd>
 );
@@ -37,10 +37,10 @@ const TransactionDetailRow = ({
   title,
   content,
 }: {
-  title: React.ReactNode;
-  content: React.ReactNode;
+  title: React.ReactNode | string;
+  content: React.ReactNode | string;
 }) => (
-  <div className="grid grid-cols-3 gap-2 p-1">
+  <div className="flex p-1 text-sm leading-5 space-x-3">
     <Dt>{title}</Dt>
     <Dd>{content}</Dd>
   </div>
@@ -52,6 +52,9 @@ export default function TransactionModal({
   onModelClose,
 }: Props) {
   const { t: tCommon } = useTranslation("common");
+  const { t } = useTranslation("components", {
+    keyPrefix: "transactions_table",
+  });
   const [showMoreFields, setShowMoreFields] = useState(false);
   const { getFormattedSats } = useSettings();
   const [_isRevealed, setRevealed] = useState(false);
@@ -97,7 +100,7 @@ export default function TransactionModal({
               )}
             </div>
             <h2 className="mt-4 text-md text-gray-900 font-bold dark:text-white text-center">
-              {transaction.type == "received" ? "Received" : "Sent"}
+              {transaction.type == "received" ? t("received") : t("sent")}
             </h2>
           </div>
           <div className="flex items-center text-center justify-center dark:text-white">
@@ -107,8 +110,7 @@ export default function TransactionModal({
                   "text-3xl font-medium",
                   transaction.type == "received"
                     ? "text-green-600 dark:color-green-400"
-                    : "text-orange-600 dark:color-orange-400",
-                  "inline"
+                    : "text-orange-600 dark:color-orange-400"
                 )}
               >
                 {transaction.type == "sent" ? "-" : "+"}{" "}
@@ -137,15 +139,17 @@ export default function TransactionModal({
             )}
             {transaction.publisherLink && transaction.title && (
               <TransactionDetailRow
-                title="Website"
+                title={tCommon("website")}
                 content={
-                  <Hyperlink
-                    target="_blank"
-                    href={transaction.publisherLink}
-                    rel="noopener noreferrer"
-                  >
-                    {transaction.title}
-                  </Hyperlink>
+                  <>
+                    <Hyperlink
+                      target="_blank"
+                      href={transaction.publisherLink}
+                      rel="noopener noreferrer"
+                    >
+                      {transaction.title}
+                    </Hyperlink>
+                  </>
                 }
               />
             )}
@@ -171,29 +175,34 @@ export default function TransactionModal({
               <>
                 <div className="flex justify-center mt-4">
                   <Hyperlink onClick={toggleShowMoreFields}>
-                    {tCommon("actions.more")}{" "}
                     {showMoreFields ? (
-                      <CaretUpIcon className="h-4 w-4 inline-flex" />
+                      <>
+                        {tCommon("actions.hide")}
+                        <CaretUpIcon className="h-4 w-4 inline-flex" />
+                      </>
                     ) : (
-                      <CaretDownIcon className="h-4 w-4 inline-flex" />
+                      <>
+                        {tCommon("actions.more")}
+                        <CaretDownIcon className="h-4 w-4 inline-flex" />
+                      </>
                     )}
                   </Hyperlink>
                 </div>
                 {showMoreFields && (
-                  <>
+                  <div className="mt-4">
                     {transaction.preimage && (
                       <TransactionDetailRow
-                        title="Preimage"
+                        title={t("preimage")}
                         content={transaction.preimage}
                       />
                     )}
                     {transaction.paymentHash && (
                       <TransactionDetailRow
-                        title="Payment hash"
+                        title={t("payment_hash")}
                         content={transaction.paymentHash}
                       />
                     )}
-                  </>
+                  </div>
                 )}
               </>
             )}
diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
index 05d88a3856..9ccad8cc6b 100644
--- a/src/app/components/TransactionsTable/index.tsx
+++ b/src/app/components/TransactionsTable/index.tsx
@@ -5,6 +5,7 @@ import {
 import Loading from "@components/Loading";
 
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import TransactionModal from "~/app/components/TransactionsTable/TransactionModal";
 import { useSettings } from "~/app/context/SettingsContext";
@@ -25,6 +26,9 @@ export default function TransactionsTable({
   const { getFormattedSats } = useSettings();
   const [modalOpen, setModalOpen] = useState(false);
   const [transaction, setTransaction] = useState<Transaction | undefined>();
+  const { t } = useTranslation("components", {
+    keyPrefix: "transactions_table",
+  });
 
   function openDetails(transaction: Transaction) {
     setTransaction(transaction);
@@ -72,7 +76,7 @@ export default function TransactionsTable({
                     <p className="truncate">
                       {tx.title ||
                         tx.boostagram?.message ||
-                        (type == "incoming" ? "Received" : "Sent")}
+                        (type == "incoming" ? t("received") : t("sent"))}
                     </p>
                   </div>
                   <p className="text-xs text-gray-400 dark:text-neutral-500">
diff --git a/src/i18n/locales/cs/translation.json b/src/i18n/locales/cs/translation.json
index 7486600627..8e5b84d8e4 100644
--- a/src/i18n/locales/cs/translation.json
+++ b/src/i18n/locales/cs/translation.json
@@ -820,7 +820,7 @@
         "allow_camera_access": "Prosím povolte přístup kamery ve svém nastavení."
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "Poplatek",
       "preimage": "Preimage",
       "received": "Přijato",
diff --git a/src/i18n/locales/da/translation.json b/src/i18n/locales/da/translation.json
index fdfb7d51f4..3292b3ed4e 100644
--- a/src/i18n/locales/da/translation.json
+++ b/src/i18n/locales/da/translation.json
@@ -727,7 +727,7 @@
         "allow_camera_access": "Giv adgang til kameraet i indstillingsvinduet."
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "Betaling",
       "preimage": "Præ-visning",
       "received": "Modtaget",
diff --git a/src/i18n/locales/de/translation.json b/src/i18n/locales/de/translation.json
index 66aa0f0fab..6fe4747a04 100644
--- a/src/i18n/locales/de/translation.json
+++ b/src/i18n/locales/de/translation.json
@@ -1038,7 +1038,7 @@
       },
       "title": "QR Code scannen"
     },
-    "transactionsTable": {
+    "transactions_table": {
       "sent": "Gesendet",
       "boostagram": {
         "sender": "Sender",
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index b694216125..7eddc7024b 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -992,6 +992,7 @@
     "help": "Help",
     "balance": "Balance",
     "or": "or",
+    "website": "Website",
     "actions": {
       "back": "Back",
       "delete": "Delete",
@@ -1022,6 +1023,7 @@
       "log_in": "Log in",
       "remember": "Remember my choice and don't ask again",
       "more": "More",
+      "hide": "Hide",
       "disconnect": "Disconnect",
       "review": "Review",
       "download": "Download"
@@ -1083,9 +1085,10 @@
         "allow_camera_access": "Please allow camera access in the settings screen."
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "Fee",
       "preimage": "Preimage",
+      "payment_hash": "Payment hash",
       "received": "Received",
       "sent": "Sent",
       "boostagram": {
@@ -1096,12 +1099,6 @@
       },
       "open_location": "Open website"
     },
-    "transaction_list": {
-      "tabs": {
-        "outgoing": "Outgoing",
-        "incoming": "Incoming"
-      }
-    },
     "budget_control": {
       "remember": {
         "label": "Remember and set a budget",
diff --git a/src/i18n/locales/eo/translation.json b/src/i18n/locales/eo/translation.json
index d5bd956a6b..40c2e3fa67 100644
--- a/src/i18n/locales/eo/translation.json
+++ b/src/i18n/locales/eo/translation.json
@@ -578,7 +578,7 @@
         "allow_camera_access": ""
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "Kotizo",
       "preimage": "",
       "received": "Ricevita",
diff --git a/src/i18n/locales/es/translation.json b/src/i18n/locales/es/translation.json
index 11540fcc32..f2dfa5c068 100644
--- a/src/i18n/locales/es/translation.json
+++ b/src/i18n/locales/es/translation.json
@@ -820,7 +820,7 @@
         "allow_camera_access": "Permita el acceso a la cámara en la pantalla de configuración."
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "Comisión",
       "preimage": "Preimagen",
       "received": "Recibido",
diff --git a/src/i18n/locales/fa/translation.json b/src/i18n/locales/fa/translation.json
index 85ca212d69..3249888f96 100644
--- a/src/i18n/locales/fa/translation.json
+++ b/src/i18n/locales/fa/translation.json
@@ -1027,7 +1027,7 @@
         "allow_camera_access": "لطفا در صفحه تنظیمات اجازه دسترسی به دوربین بدهید."
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "کارمزد",
       "preimage": "پیش نمایش",
       "received": "دریافت شد",
diff --git a/src/i18n/locales/fi/translation.json b/src/i18n/locales/fi/translation.json
index 2b6260f413..89c2af1063 100644
--- a/src/i18n/locales/fi/translation.json
+++ b/src/i18n/locales/fi/translation.json
@@ -573,7 +573,7 @@
         "allow_camera_access": "Salli kameran käyttöoikeus asetusruudussa."
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "Kustannus",
       "preimage": "Esikuva",
       "received": "Vastaanotettu",
diff --git a/src/i18n/locales/fr/translation.json b/src/i18n/locales/fr/translation.json
index 004ca43e9b..6f5b62ef6b 100644
--- a/src/i18n/locales/fr/translation.json
+++ b/src/i18n/locales/fr/translation.json
@@ -733,7 +733,7 @@
         "allow_camera_access": "Veuillez autoriser l'accès à la caméra dans l'écran des paramètres."
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "Frais",
       "preimage": "Préimage",
       "received": "Reçu",
diff --git a/src/i18n/locales/hi/translation.json b/src/i18n/locales/hi/translation.json
index 71ac701ec1..2356a6d5f5 100644
--- a/src/i18n/locales/hi/translation.json
+++ b/src/i18n/locales/hi/translation.json
@@ -691,7 +691,7 @@
         "allow_camera_access": "कृपया सेटिंग स्क्रीन में कैमरा एक्सेस की अनुमति दें।"
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "शुल्क",
       "preimage": "Preimage",
       "received": "प्राप्त",
diff --git a/src/i18n/locales/id/translation.json b/src/i18n/locales/id/translation.json
index 8a95cbc789..d96cce801b 100644
--- a/src/i18n/locales/id/translation.json
+++ b/src/i18n/locales/id/translation.json
@@ -852,7 +852,7 @@
       "screen_reader": "Toggle Dropdown",
       "title": "Ganti akun"
     },
-    "transactionsTable": {
+    "transactions_table": {
       "sent": "Terkirim",
       "fee": "Biaya",
       "preimage": "Preimage",
diff --git a/src/i18n/locales/it/translation.json b/src/i18n/locales/it/translation.json
index d4d722c713..f2cc046c1c 100644
--- a/src/i18n/locales/it/translation.json
+++ b/src/i18n/locales/it/translation.json
@@ -727,7 +727,7 @@
         "allow_camera_access": "Si prega di consentire l'accesso alla fotocamera nella schermata delle impostazioni."
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "Tassa",
       "preimage": "Preimmagine",
       "received": "Ricevuto",
diff --git a/src/i18n/locales/mr/translation.json b/src/i18n/locales/mr/translation.json
index 207bedbd2a..6204900062 100644
--- a/src/i18n/locales/mr/translation.json
+++ b/src/i18n/locales/mr/translation.json
@@ -754,7 +754,7 @@
         "allow_camera_access": "कृपया सेटिंग्ज स्क्रीनमध्ये कॅमेरा प्रवेशास अनुमती द्या."
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "शुल्क",
       "preimage": "प्रीइमेज",
       "received": "प्राप्त",
diff --git a/src/i18n/locales/nl/translation.json b/src/i18n/locales/nl/translation.json
index 91d48859d3..343ef6ba74 100644
--- a/src/i18n/locales/nl/translation.json
+++ b/src/i18n/locales/nl/translation.json
@@ -587,7 +587,7 @@
         "allow_camera_access": ""
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "",
       "preimage": "",
       "received": "",
diff --git a/src/i18n/locales/pl/translation.json b/src/i18n/locales/pl/translation.json
index 9813fa851a..6c0ab5e4a8 100644
--- a/src/i18n/locales/pl/translation.json
+++ b/src/i18n/locales/pl/translation.json
@@ -781,7 +781,7 @@
         "allow_camera_access": "Proszę pozwolić na dostęp do kamery w ekranie ustawień."
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "Opłata",
       "preimage": "Obraz pierwotny (preimage)",
       "received": "Otrzymano",
diff --git a/src/i18n/locales/pt_BR/translation.json b/src/i18n/locales/pt_BR/translation.json
index 77e489b4bf..58ff7b081e 100644
--- a/src/i18n/locales/pt_BR/translation.json
+++ b/src/i18n/locales/pt_BR/translation.json
@@ -1058,7 +1058,7 @@
         "allow_camera_access": "Permita o acesso à câmera na tela configurações."
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "Taxa",
       "preimage": "Pré-imagem",
       "received": "Recebida",
diff --git a/src/i18n/locales/ro/translation.json b/src/i18n/locales/ro/translation.json
index 9872ce37c0..0b985bb76d 100644
--- a/src/i18n/locales/ro/translation.json
+++ b/src/i18n/locales/ro/translation.json
@@ -727,7 +727,7 @@
         "allow_camera_access": ""
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "",
       "preimage": "",
       "received": "",
diff --git a/src/i18n/locales/ru/translation.json b/src/i18n/locales/ru/translation.json
index 6914e56e98..05b051fa72 100644
--- a/src/i18n/locales/ru/translation.json
+++ b/src/i18n/locales/ru/translation.json
@@ -727,7 +727,7 @@
         "allow_camera_access": ""
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "",
       "preimage": "",
       "received": "",
diff --git a/src/i18n/locales/sv/translation.json b/src/i18n/locales/sv/translation.json
index a48c8e6531..e36a8bfa81 100644
--- a/src/i18n/locales/sv/translation.json
+++ b/src/i18n/locales/sv/translation.json
@@ -1040,7 +1040,7 @@
         "allow_camera_access": "Tillåt kameraåtkomst under inställningar."
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "Avgift",
       "preimage": "Förhandsvy",
       "received": "Mottaget",
diff --git a/src/i18n/locales/th/translation.json b/src/i18n/locales/th/translation.json
index 0101d9009d..07295e3fd9 100644
--- a/src/i18n/locales/th/translation.json
+++ b/src/i18n/locales/th/translation.json
@@ -1120,7 +1120,7 @@
         "invalid_credentials": "รหัสผ่านไม่ถูกต้อง โปรดเช็ครหัสผ่านและอีเมลของคุณ และลองอีกครั้ง"
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "ค่าทำเนียม",
       "preimage": "Preimage",
       "received": "ได้รับ",
diff --git a/src/i18n/locales/tl/translation.json b/src/i18n/locales/tl/translation.json
index 53b3b8bae4..5e2d11fa43 100644
--- a/src/i18n/locales/tl/translation.json
+++ b/src/i18n/locales/tl/translation.json
@@ -524,7 +524,7 @@
         "allow_camera_access": ""
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "",
       "preimage": "",
       "received": "",
diff --git a/src/i18n/locales/uk/translation.json b/src/i18n/locales/uk/translation.json
index 3a7291508c..e8ad7f7bd1 100644
--- a/src/i18n/locales/uk/translation.json
+++ b/src/i18n/locales/uk/translation.json
@@ -727,7 +727,7 @@
         "allow_camera_access": ""
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "",
       "preimage": "",
       "received": "",
diff --git a/src/i18n/locales/zh_Hans/translation.json b/src/i18n/locales/zh_Hans/translation.json
index 7cb616e30b..5380ff824d 100644
--- a/src/i18n/locales/zh_Hans/translation.json
+++ b/src/i18n/locales/zh_Hans/translation.json
@@ -1037,7 +1037,7 @@
       },
       "edit_permissions": "编辑权限"
     },
-    "transactionsTable": {
+    "transactions_table": {
       "boostagram": {
         "podcast": "播客",
         "message": "消息",
diff --git a/src/i18n/locales/zh_Hant/translation.json b/src/i18n/locales/zh_Hant/translation.json
index 3e811613e1..471a6fd7a3 100644
--- a/src/i18n/locales/zh_Hant/translation.json
+++ b/src/i18n/locales/zh_Hant/translation.json
@@ -1024,7 +1024,7 @@
         "allow_camera_access": "請在設置屏幕中允許攝像頭訪問。"
       }
     },
-    "transactionsTable": {
+    "transactions_table": {
       "fee": "費用",
       "preimage": "原像",
       "received": "已收到",

From db98c003f2fe8df53f584e5e78242606ef4502ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Wed, 11 Oct 2023 14:24:32 +0200
Subject: [PATCH 21/40] fix: translations

---
 .../components/TransactionsTable/TransactionModal.tsx  | 10 +++++-----
 src/i18n/locales/en/translation.json                   |  4 +++-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/app/components/TransactionsTable/TransactionModal.tsx b/src/app/components/TransactionsTable/TransactionModal.tsx
index 1689ed587d..82da54a5fa 100644
--- a/src/app/components/TransactionsTable/TransactionModal.tsx
+++ b/src/app/components/TransactionsTable/TransactionModal.tsx
@@ -126,14 +126,14 @@ export default function TransactionModal({
           </div>
           <div className="mt-6">
             <TransactionDetailRow
-              title="Date & Time"
+              title={t("date_time")}
               content={dayjs(transaction.timestamp).format(
                 "D MMMM YYYY, HH:mm"
               )}
             />
             {transaction.totalFees?.toString && (
               <TransactionDetailRow
-                title="Fee"
+                title={t("fee")}
                 content={getFormattedSats(transaction.totalFees)}
               />
             )}
@@ -155,19 +155,19 @@ export default function TransactionModal({
             )}
             {transaction.boostagram?.podcast && (
               <TransactionDetailRow
-                title="Podcast"
+                title={t("boostagram.podcast")}
                 content={transaction.boostagram?.podcast}
               />
             )}
             {transaction.boostagram?.episode && (
               <TransactionDetailRow
-                title="Episode"
+                title={t("boostagram.episode")}
                 content={transaction.boostagram.episode}
               />
             )}
             {transaction.description && (
               <TransactionDetailRow
-                title="Description"
+                title={tCommon("description")}
                 content={transaction.description}
               />
             )}
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index 7eddc7024b..45c9a64b38 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -1091,11 +1091,13 @@
       "payment_hash": "Payment hash",
       "received": "Received",
       "sent": "Sent",
+      "date_time": "Date & Time",
       "boostagram": {
         "sender": "Sender",
         "message": "Message",
         "app": "App",
-        "podcast": "Podcast"
+        "podcast": "Podcast",
+        "episode": "Episode"
       },
       "open_location": "Open website"
     },

From ce6fdadd8821ee9bfe275fe8d5834c6610382bc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Wed, 11 Oct 2023 16:13:58 +0200
Subject: [PATCH 22/40] fix: modal usage, remove headings

---
 src/app/components/Modal/index.tsx            |  14 +-
 src/app/components/SitePreferences/index.tsx  | 136 ++++++++----------
 .../TransactionsTable/TransactionModal.tsx    |   2 +-
 src/app/screens/Accounts/Detail/index.tsx     |  57 ++++----
 src/app/screens/Home/AllowanceView/index.tsx  |   3 -
 src/app/screens/Home/DefaultView/index.tsx    |  28 ++--
 src/app/screens/Publishers/Detail/index.tsx   |  41 +++---
 src/app/screens/Settings/index.tsx            |  27 ++--
 src/i18n/locales/en/translation.json          |   3 -
 9 files changed, 133 insertions(+), 178 deletions(-)

diff --git a/src/app/components/Modal/index.tsx b/src/app/components/Modal/index.tsx
index 8abacc74cb..827a198d19 100644
--- a/src/app/components/Modal/index.tsx
+++ b/src/app/components/Modal/index.tsx
@@ -5,14 +5,15 @@ type Props = {
   children?: React.ReactNode;
   isOpen: boolean;
   close: () => void;
-  title: string;
+  contentLabel: string;
+  title?: string;
 };
 
 export default function Modal({
   children,
   isOpen,
   close: closeModal,
-  title,
+  contentLabel: title,
 }: Props) {
   return (
     <ReactModal
@@ -22,13 +23,16 @@ export default function Modal({
       isOpen={isOpen}
       onRequestClose={closeModal}
       contentLabel={title}
-      overlayClassName="bg-black bg-opacity-50 fixed inset-0 flex justify-center items-center p-5 cursor-pointer"
-      className="rounded-lg shadow-xl bg-white dark:bg-surface-02dp w-full max-w-md overflow-hidden relative px-4 pt-10 pb-6 cursor-auto"
+      overlayClassName="bg-black bg-opacity-50 fixed inset-0 flex justify-center items-center cursor-pointer"
+      className="rounded-lg shadow-xl bg-white dark:bg-surface-02dp w-full max-w-md overflow-hidden relative p-5 cursor-auto mx-5"
       style={{ content: { maxHeight: "90vh" } }}
     >
+      {title && (
+        <h2 className="text-2xl font-bold dark:text-white mb-6">{title}</h2>
+      )}
       <button
         onClick={closeModal}
-        className="absolute right-4 top-4  text-gray-600 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-300"
+        className="absolute right-5 top-5 text-gray-600 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-300"
       >
         <CrossIcon className="w-6 h-6" />
       </button>
diff --git a/src/app/components/SitePreferences/index.tsx b/src/app/components/SitePreferences/index.tsx
index 23f7c0f2f4..d52fd4c39b 100644
--- a/src/app/components/SitePreferences/index.tsx
+++ b/src/app/components/SitePreferences/index.tsx
@@ -1,4 +1,3 @@
-import { CrossIcon } from "@bitcoin-design/bitcoin-icons-react/outline";
 import Button from "@components/Button";
 import Hyperlink from "@components/Hyperlink";
 import Setting from "@components/Setting";
@@ -179,95 +178,82 @@ function SitePreferences({ launcherType, allowance, onEdit, onDelete }: Props) {
       <Modal
         isOpen={modalIsOpen}
         close={closeModal}
-        title={t("edit_allowance.screen_reader")}
+        contentLabel={t("edit_allowance.screen_reader")}
+        title={t("edit_allowance.title")}
       >
-        <div className="p-5 flex justify-between dark:bg-surface-02dp">
-          <h2 className="text-2xl font-bold dark:text-white">
-            {t("edit_allowance.title")}
-          </h2>
-          <button onClick={closeModal}>
-            <CrossIcon className="w-6 h-6 dark:text-white" />
-          </button>
-        </div>
-
         <form
           onSubmit={(e: FormEvent) => {
             e.preventDefault();
             updateAllowance();
           }}
         >
-          <div
-            style={{ maxHeight: "calc(90vh - 154px)", overflowY: "auto" }}
-            className="p-5 border-t border-b border-gray-200 dark:bg-surface-02dp dark:border-neutral-700"
-          >
-            <div className="pb-4 border-b border-gray-200 dark:border-neutral-700">
-              <DualCurrencyField
-                id="budget"
-                label={t("new_budget.label")}
-                min={0}
-                autoFocus
-                placeholder={tCommon("sats", { count: 0 })}
-                value={budget}
-                hint={t("hint")}
-                fiatValue={fiatAmount}
-                onChange={(e) => setBudget(e.target.value)}
+          <div className="pb-4 border-b border-gray-200 dark:border-neutral-700">
+            <DualCurrencyField
+              id="budget"
+              label={t("new_budget.label")}
+              min={0}
+              autoFocus
+              placeholder={tCommon("sats", { count: 0 })}
+              value={budget}
+              hint={t("hint")}
+              fiatValue={fiatAmount}
+              onChange={(e) => setBudget(e.target.value)}
+            />
+          </div>
+          <div className={hasPermissions ? "pb-4" : ""}>
+            <Setting
+              title={t("enable_login.title")}
+              subtitle={t("enable_login.subtitle")}
+            >
+              <Toggle
+                checked={lnurlAuth}
+                onChange={() => setLnurlAuth(!lnurlAuth)}
               />
-            </div>
-            <div className={hasPermissions ? "pb-4" : ""}>
-              <Setting
-                title={t("enable_login.title")}
-                subtitle={t("enable_login.subtitle")}
-              >
-                <Toggle
-                  checked={lnurlAuth}
-                  onChange={() => setLnurlAuth(!lnurlAuth)}
-                />
-              </Setting>
-            </div>
+            </Setting>
+          </div>
 
-            {hasPermissions && (
+          {hasPermissions && (
+            <div>
+              <h2 className="pt-4 text-lg text-gray-900 font-bold dark:text-white">
+                {t("edit_permissions")}
+              </h2>
               <div>
-                <h2 className="pt-4 text-lg text-gray-900 font-bold dark:text-white">
-                  {t("edit_permissions")}
-                </h2>
-                <div>
-                  {permissions.map((permission) => (
-                    <Fragment key={permission.id}>
-                      <Setting
-                        title={permission.method}
-                        subtitle={tPermissions(
-                          permission.method
-                            .toLowerCase()
-                            .split("/")
-                            .slice(-2)
-                            .join(".") as unknown as TemplateStringsArray
-                        )}
-                        /* split the method at "/", take the last two items in
+                {permissions.map((permission) => (
+                  <Fragment key={permission.id}>
+                    <Setting
+                      title={permission.method}
+                      subtitle={tPermissions(
+                        permission.method
+                          .toLowerCase()
+                          .split("/")
+                          .slice(-2)
+                          .join(".") as unknown as TemplateStringsArray
+                      )}
+                      /* split the method at "/", take the last two items in
                         the array and join them with "." to get the i18n string
                         webln/lnd/getinfo -> lnd.getinfo
                         nostr/nip04decrypt --> nostr.nip04decrypt */
-                      >
-                        <Toggle
-                          checked={permission.enabled}
-                          onChange={() => {
-                            setPermissions(
-                              permissions.map((prm) =>
-                                prm.id === permission.id
-                                  ? { ...prm, enabled: !prm.enabled }
-                                  : prm
-                              )
-                            );
-                          }}
-                        />
-                      </Setting>
-                    </Fragment>
-                  ))}
-                </div>
+                    >
+                      <Toggle
+                        checked={permission.enabled}
+                        onChange={() => {
+                          setPermissions(
+                            permissions.map((prm) =>
+                              prm.id === permission.id
+                                ? { ...prm, enabled: !prm.enabled }
+                                : prm
+                            )
+                          );
+                        }}
+                      />
+                    </Setting>
+                  </Fragment>
+                ))}
               </div>
-            )}
-          </div>
+            </div>
+          )}
 
-          <div className="flex justify-between items-center p-5 dark:bg-surface-02dp">
+          <div className="mt-6 flex justify-between items-center dark:bg-surface-02dp">
             <Hyperlink
               onClick={async () => {
                 if (window.confirm(t("confirm_delete"))) {
diff --git a/src/app/components/TransactionsTable/TransactionModal.tsx b/src/app/components/TransactionsTable/TransactionModal.tsx
index 82da54a5fa..74a0594e02 100644
--- a/src/app/components/TransactionsTable/TransactionModal.tsx
+++ b/src/app/components/TransactionsTable/TransactionModal.tsx
@@ -83,7 +83,7 @@ export default function TransactionModal({
         onModelClose();
         setShowMoreFields(false);
       }}
-      title={"Transactions"}
+      contentLabel={"Transactions"}
     >
       {_isRevealed && transaction && (
         <div className="p-3 flex flex-col gap-4 justify-center ">
diff --git a/src/app/screens/Accounts/Detail/index.tsx b/src/app/screens/Accounts/Detail/index.tsx
index dc3fc7b193..4c39581b60 100644
--- a/src/app/screens/Accounts/Detail/index.tsx
+++ b/src/app/screens/Accounts/Detail/index.tsx
@@ -1,4 +1,3 @@
-import { CrossIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import Button from "@components/Button";
 import Container from "@components/Container";
 import Loading from "@components/Loading";
@@ -264,50 +263,42 @@ function AccountDetail() {
                   <Modal
                     isOpen={exportModalIsOpen}
                     close={closeExportModal}
-                    title={t("export.screen_reader")}
+                    contentLabel={t("export.screen_reader")}
+                    title={t("export.title")}
                   >
-                    <div className="p-5 flex justify-between">
-                      <h2 className="text-2xl font-bold dark:text-white">
-                        {t("export.title")}
-                      </h2>
-                      <button onClick={closeExportModal}>
-                        <CrossIcon className="w-6 h-6 dark:text-white" />
-                      </button>
-                    </div>
-
                     {exportLoading && (
-                      <div className="p-5 flex justify-center items-center space-x-2 dark:text-white">
+                      <div className="flex justify-center items-center space-x-2 dark:text-white">
                         <Loading />
                         <span>{t("export.waiting")}</span>
                       </div>
                     )}
                     {!exportLoading && (
-                      <div className="p-5">
-                        <div className="flex flex-col gap-4 justify-center items-center dark:text-white">
-                          <p>{t("export.scan_qr")}</p>
+                      <div className="flex flex-col gap-4 justify-center items-center dark:text-white">
+                        <p>{t("export.scan_qr")}</p>
+                        <div className="p-5">
                           <QRCode
                             value={`lndhub://${lndHubData.login}:${lndHubData.password}@${lndHubData.url}/`}
                             size={256}
                           />
-                          <div className="w-full">
-                            <TextField
-                              id="uri"
-                              label={t("export.export_uri")}
-                              readOnly
-                              value={`lndhub://${lndHubData.login}:${lndHubData.password}@${lndHubData.url}/`}
-                            />
-                          </div>
-                          {lndHubData.lnAddress && (
-                            <div className="w-full dark:text-white">
-                              <p className="font-medium">
-                                {t("export.your_ln_address")}
-                              </p>
-                              {lndHubData.lnAddress && (
-                                <p>{lndHubData.lnAddress}</p>
-                              )}
-                            </div>
-                          )}
                         </div>
+                        <div className="w-full">
+                          <TextField
+                            id="uri"
+                            label={t("export.export_uri")}
+                            readOnly
+                            value={`lndhub://${lndHubData.login}:${lndHubData.password}@${lndHubData.url}/`}
+                          />
+                        </div>
+                        {lndHubData.lnAddress && (
+                          <div className="w-full dark:text-white">
+                            <p className="font-medium">
+                              {t("export.your_ln_address")}
+                            </p>
+                            {lndHubData.lnAddress && (
+                              <p>{lndHubData.lnAddress}</p>
+                            )}
+                          </div>
+                        )}
                       </div>
                     )}
                   </Modal>
diff --git a/src/app/screens/Home/AllowanceView/index.tsx b/src/app/screens/Home/AllowanceView/index.tsx
index d91187dcf6..7f454498ae 100644
--- a/src/app/screens/Home/AllowanceView/index.tsx
+++ b/src/app/screens/Home/AllowanceView/index.tsx
@@ -139,9 +139,6 @@ const AllowanceView: FC<Props> = (props) => {
             />
           </div>
         )}
-        <h2 className="mb-2 text-lg text-gray-900 font-bold dark:text-white text-center">
-          {t("allowance_view.latest_transactions")}
-        </h2>
 
         {isLoadingTransactions && (
           <div className="flex justify-center">
diff --git a/src/app/screens/Home/DefaultView/index.tsx b/src/app/screens/Home/DefaultView/index.tsx
index cf92fb50d3..7a303d0f2e 100644
--- a/src/app/screens/Home/DefaultView/index.tsx
+++ b/src/app/screens/Home/DefaultView/index.tsx
@@ -126,7 +126,7 @@ const DefaultView: FC<Props> = (props) => {
             </a>
           </div>
         )}
-        <div className="flex mb-6 lg:mb-12 space-x-4">
+        <div className="flex mb-4 space-x-4">
           <Button
             fullWidth
             icon={<ReceiveIcon className="w-6 h-6" />}
@@ -172,27 +172,23 @@ const DefaultView: FC<Props> = (props) => {
 
         {!isLoading && (
           <div>
-            <div className="flex justify-between items-center mb-2">
-              <h2 className="text-lg lg:text-xl font-semibold dark:text-white text-center">
-                {t("default_view.latest_transactions")}
-              </h2>
+            <TransactionsTable
+              transactions={transactions}
+              loading={isLoading}
+              noResultMsg={t("default_view.no_transactions")}
+            />
 
-              {!isLoading && transactions.length > 0 && (
+            {!isLoading && transactions.length > 0 && (
+              <div className="text-center">
                 <Hyperlink
                   onClick={() => handleViewAllLink("/transactions")}
-                  className="flex justify-between items-center"
+                  className="flex justify-center items-center mt-2"
                 >
                   {t("default_view.see_all")}
-                  <ArrowRightIcon className="w-4 h-4" />
+                  <ArrowRightIcon className="ml-2 w-4 h-4" />
                 </Hyperlink>
-              )}
-            </div>
-
-            <TransactionsTable
-              transactions={transactions}
-              loading={isLoading}
-              noResultMsg={t("default_view.no_transactions")}
-            />
+              </div>
+            )}
           </div>
         )}
       </div>
diff --git a/src/app/screens/Publishers/Detail/index.tsx b/src/app/screens/Publishers/Detail/index.tsx
index a02dbe2851..c0909df09e 100644
--- a/src/app/screens/Publishers/Detail/index.tsx
+++ b/src/app/screens/Publishers/Detail/index.tsx
@@ -64,34 +64,29 @@ function PublisherDetail() {
   }, [fetchData, isLoadingSettings]);
 
   return (
-    <div>
-      <div className="border-b border-gray-200 dark:border-neutral-700">
-        {allowance && (
-          <PublisherPanel
-            allowance={allowance}
-            onEdit={fetchData}
-            onDelete={() => {
-              navigate("/publishers", { replace: true });
-            }}
-            title={allowance?.name || ""}
-            image={allowance?.imageURL || ""}
-            url={allowance?.host}
-            isCard={false}
-            isSmall={false}
-          />
-        )}
-      </div>
+    <>
+      {allowance && (
+        <PublisherPanel
+          allowance={allowance}
+          onEdit={fetchData}
+          onDelete={() => {
+            navigate("/publishers", { replace: true });
+          }}
+          title={allowance?.name || ""}
+          image={allowance?.imageURL || ""}
+          url={allowance?.host}
+          isCard={false}
+          isSmall={false}
+        />
+      )}
 
       {allowance && (
         <Container>
-          <div>
-            <h2 className="mt-[34px] mb-4 text-lg text-gray-900 font-bold dark:text-white text-center">
-              {t("allowance_view.latest_transactions")}
-            </h2>
+          <div className="mt-5">
             {transactions && transactions?.length > 0 ? (
               <TransactionsTable transactions={transactions} />
             ) : (
-              <p className="text-gray-500 dark:text-neutral-400 text-center">
+              <p className="text-gray-500 dark:text-neutral-400">
                 <Trans
                   i18nKey={"allowance_view.no_transactions"}
                   t={t}
@@ -104,7 +99,7 @@ function PublisherDetail() {
           </div>
         </Container>
       )}
-    </div>
+    </>
   );
 }
 
diff --git a/src/app/screens/Settings/index.tsx b/src/app/screens/Settings/index.tsx
index 291ac9eb06..680f5c0242 100644
--- a/src/app/screens/Settings/index.tsx
+++ b/src/app/screens/Settings/index.tsx
@@ -1,4 +1,3 @@
-import { CrossIcon } from "@bitcoin-design/bitcoin-icons-react/outline";
 import Button from "@components/Button";
 import Container from "@components/Container";
 import LocaleSwitcher from "@components/LocaleSwitcher/LocaleSwitcher";
@@ -295,32 +294,22 @@ function Settings() {
         <Modal
           isOpen={modalIsOpen}
           close={closeModal}
-          title={t("change_password.screen_reader")}
+          contentLabel={t("change_password.screen_reader")}
+          title={t("change_password.title")}
         >
-          <div className="p-5 flex justify-between dark:bg-surface-02dp">
-            <h2 className="text-2xl font-bold dark:text-white">
-              {t("change_password.title")}
-            </h2>
-            <button onClick={closeModal}>
-              <CrossIcon className="w-6 h-6 dark:text-white" />
-            </button>
-          </div>
-
           <form
             onSubmit={(e: FormEvent) => {
               e.preventDefault();
               updateAccountPassword(formData.password);
             }}
           >
-            <div className="p-5 border-t border-b border-gray-200 dark:bg-surface-02dp dark:border-neutral-500">
-              <PasswordForm
-                i18nKeyPrefix="settings.change_password"
-                formData={formData}
-                setFormData={setFormData}
-              />
-            </div>
+            <PasswordForm
+              i18nKeyPrefix="settings.change_password"
+              formData={formData}
+              setFormData={setFormData}
+            />
 
-            <div className="flex justify-end p-5 dark:bg-surface-02dp">
+            <div className="flex justify-center mt-6">
               <Button
                 label={t("change_password.submit.label")}
                 type="submit"
diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
index dd3d80c118..93da1faa5c 100644
--- a/src/i18n/locales/en/translation.json
+++ b/src/i18n/locales/en/translation.json
@@ -352,9 +352,7 @@
         "send_satoshis": "⚡️ Send Satoshis ⚡️",
         "enable_now": "Enable Now"
       },
-      "latest_transactions": "Latest Transactions",
       "allowance_view": {
-        "latest_transactions": "Latest Transactions",
         "budget_spent": "Budget spent",
         "sats": "sats",
         "no_transactions": "No transactions on <0>{{name}}</0> yet.",
@@ -363,7 +361,6 @@
         "permissions": "Permissions"
       },
       "default_view": {
-        "latest_transactions": "Latest Transactions",
         "is_blocked_hint": "Alby is currently disabled on {{host}}",
         "block_removed": "Enabled {{host}}. Please reload the website.",
         "no_transactions": "No transactions for this account yet.",

From f757e355f347f4cd6979753cd3ee8094027b643c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Thu, 12 Oct 2023 16:42:16 +0200
Subject: [PATCH 23/40] fix: modal & colors

---
 src/app/components/Modal/index.tsx                     |  5 +++--
 .../components/TransactionsTable/TransactionModal.tsx  | 10 +++++-----
 src/app/components/TransactionsTable/index.tsx         |  7 +++----
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/app/components/Modal/index.tsx b/src/app/components/Modal/index.tsx
index 827a198d19..dbd58a2c0c 100644
--- a/src/app/components/Modal/index.tsx
+++ b/src/app/components/Modal/index.tsx
@@ -13,7 +13,8 @@ export default function Modal({
   children,
   isOpen,
   close: closeModal,
-  contentLabel: title,
+  contentLabel,
+  title,
 }: Props) {
   return (
     <ReactModal
@@ -22,7 +23,7 @@ export default function Modal({
       shouldFocusAfterRender={false}
       isOpen={isOpen}
       onRequestClose={closeModal}
-      contentLabel={title}
+      contentLabel={contentLabel}
       overlayClassName="bg-black bg-opacity-50 fixed inset-0 flex justify-center items-center cursor-pointer"
       className="rounded-lg shadow-xl bg-white dark:bg-surface-02dp w-full max-w-md overflow-hidden relative p-5 cursor-auto mx-5"
       style={{ content: { maxHeight: "90vh" } }}
diff --git a/src/app/components/TransactionsTable/TransactionModal.tsx b/src/app/components/TransactionsTable/TransactionModal.tsx
index 74a0594e02..93c5713568 100644
--- a/src/app/components/TransactionsTable/TransactionModal.tsx
+++ b/src/app/components/TransactionsTable/TransactionModal.tsx
@@ -17,7 +17,7 @@ import { Transaction } from "~/types";
 
 type Props = {
   transaction: Transaction | undefined;
-  onModelClose: () => void;
+  onClose: () => void;
   isOpen: boolean;
 };
 
@@ -49,7 +49,7 @@ const TransactionDetailRow = ({
 export default function TransactionModal({
   transaction,
   isOpen,
-  onModelClose,
+  onClose,
 }: Props) {
   const { t: tCommon } = useTranslation("common");
   const { t } = useTranslation("components", {
@@ -80,7 +80,7 @@ export default function TransactionModal({
       isOpen={_isRevealed}
       close={() => {
         setRevealed(false);
-        onModelClose();
+        onClose();
         setShowMoreFields(false);
       }}
       contentLabel={"Transactions"}
@@ -90,11 +90,11 @@ 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 rounded-full p-8">
+                <div className="flex justify-center items-center bg-orange-100 dark:bg-[#261911] rounded-full p-8">
                   <ArrowUpIcon className="w-8 h-8 text-orange-400 stroke-[5px]" />
                 </div>
               ) : (
-                <div className="flex justify-center items-center bg-green-100 rounded-full p-8">
+                <div className="flex justify-center items-center bg-green-100 dark:bg-[#0F1E1A] rounded-full p-8">
                   <ArrowDownIcon className="w-8 h-8 text-green-400 stroke-[5px]" />
                 </div>
               )}
diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
index 9ccad8cc6b..c1188c815f 100644
--- a/src/app/components/TransactionsTable/index.tsx
+++ b/src/app/components/TransactionsTable/index.tsx
@@ -62,11 +62,11 @@ export default function TransactionsTable({
               <div className="flex gap-4">
                 <div className="flex items-center">
                   {type == "outgoing" ? (
-                    <div className="flex justify-center items-center bg-orange-100 rounded-full w-8 h-8">
+                    <div className="flex justify-center items-center bg-orange-100 dark:bg-[#261911] rounded-full w-8 h-8">
                       <ArrowUpIcon className="w-4 h-4 text-orange-400 stroke-[4px]" />
                     </div>
                   ) : (
-                    <div className="flex justify-center items-center bg-green-100 rounded-full w-8 h-8">
+                    <div className="flex justify-center items-center bg-green-100 dark:bg-[#0F1E1A] rounded-full w-8 h-8">
                       <ArrowDownIcon className="w-4 h-4 text-green-400 stroke-[4px]" />
                     </div>
                   )}
@@ -109,11 +109,10 @@ export default function TransactionsTable({
           );
         })}
       </div>
-
       <TransactionModal
         transaction={transaction}
         isOpen={modalOpen}
-        onModelClose={() => {
+        onClose={() => {
           setModalOpen(false);
         }}
       />

From bf489673124464c6b85cc804c44dc9c5f58593b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Thu, 12 Oct 2023 17:26:28 +0200
Subject: [PATCH 24/40] fix: cleanup modal

---
 .../TransactionsTable/TransactionModal.tsx    | 290 +++++++++---------
 .../components/TransactionsTable/index.tsx    |  16 +-
 2 files changed, 148 insertions(+), 158 deletions(-)

diff --git a/src/app/components/TransactionsTable/TransactionModal.tsx b/src/app/components/TransactionsTable/TransactionModal.tsx
index 93c5713568..21f338a1f2 100644
--- a/src/app/components/TransactionsTable/TransactionModal.tsx
+++ b/src/app/components/TransactionsTable/TransactionModal.tsx
@@ -7,7 +7,7 @@ import {
   ArrowUpIcon,
 } from "@bitcoin-design/bitcoin-icons-react/outline";
 import dayjs from "dayjs";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import Hyperlink from "~/app/components/Hyperlink";
 import Modal from "~/app/components/Modal";
@@ -16,36 +16,11 @@ import { classNames } from "~/app/utils";
 import { Transaction } from "~/types";
 
 type Props = {
-  transaction: Transaction | undefined;
+  transaction: Transaction;
   onClose: () => void;
   isOpen: boolean;
 };
 
-const Dt = ({ children }: { children: React.ReactNode }) => (
-  <dt className="basis-28 text-gray-400 dark:text-neutral-500 text-right">
-    {children}
-  </dt>
-);
-
-const Dd = ({ children }: { children: React.ReactNode }) => (
-  <dd className="flex-1 text-gray-800 dark:text-neutral-200 break-all">
-    {children}
-  </dd>
-);
-
-const TransactionDetailRow = ({
-  title,
-  content,
-}: {
-  title: React.ReactNode | string;
-  content: React.ReactNode | string;
-}) => (
-  <div className="flex p-1 text-sm leading-5 space-x-3">
-    <Dt>{title}</Dt>
-    <Dd>{content}</Dd>
-  </div>
-);
-
 export default function TransactionModal({
   transaction,
   isOpen,
@@ -57,7 +32,6 @@ export default function TransactionModal({
   });
   const [showMoreFields, setShowMoreFields] = useState(false);
   const { getFormattedSats } = useSettings();
-  const [_isRevealed, setRevealed] = useState(false);
 
   function toggleShowMoreFields() {
     setShowMoreFields(!showMoreFields);
@@ -69,146 +43,160 @@ export default function TransactionModal({
       : "incoming";
   }
 
-  useEffect(() => {
-    if (typeof isOpen !== "undefined") {
-      setRevealed(isOpen);
-    }
-  }, [isOpen]);
-
   return (
     <Modal
-      isOpen={_isRevealed}
+      isOpen={isOpen}
       close={() => {
-        setRevealed(false);
         onClose();
         setShowMoreFields(false);
       }}
       contentLabel={"Transactions"}
     >
-      {_isRevealed && transaction && (
-        <div className="p-3 flex flex-col gap-4 justify-center ">
+      <div className="p-3 flex flex-col gap-4 justify-center ">
+        <div>
+          <div className="flex items-center justify-center">
+            {getTransactionType(transaction) == "outgoing" ? (
+              <div className="flex justify-center items-center bg-orange-100 dark:bg-[#261911] rounded-full p-8">
+                <ArrowUpIcon className="w-8 h-8 text-orange-400 stroke-[5px]" />
+              </div>
+            ) : (
+              <div className="flex justify-center items-center bg-green-100 dark:bg-[#0F1E1A] rounded-full p-8">
+                <ArrowDownIcon className="w-8 h-8 text-green-400 stroke-[5px]" />
+              </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>
+        </div>
+        <div className="flex items-center text-center justify-center dark:text-white">
           <div>
-            <div className="flex items-center justify-center">
-              {getTransactionType(transaction) == "outgoing" ? (
-                <div className="flex justify-center items-center bg-orange-100 dark:bg-[#261911] rounded-full p-8">
-                  <ArrowUpIcon className="w-8 h-8 text-orange-400 stroke-[5px]" />
-                </div>
-              ) : (
-                <div className="flex justify-center items-center bg-green-100 dark:bg-[#0F1E1A] rounded-full p-8">
-                  <ArrowDownIcon className="w-8 h-8 text-green-400 stroke-[5px]" />
-                </div>
+            <p
+              className={classNames(
+                "text-3xl font-medium",
+                transaction.type == "received"
+                  ? "text-green-600 dark:color-green-400"
+                  : "text-orange-600 dark:color-orange-400"
               )}
-            </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>
-          </div>
-          <div className="flex items-center text-center justify-center dark:text-white">
-            <div>
-              <p
-                className={classNames(
-                  "text-3xl font-medium",
-                  transaction.type == "received"
-                    ? "text-green-600 dark:color-green-400"
-                    : "text-orange-600 dark:color-orange-400"
-                )}
-              >
-                {transaction.type == "sent" ? "-" : "+"}{" "}
-                {getFormattedSats(transaction.totalAmount)}
-              </p>
+            >
+              {transaction.type == "sent" ? "-" : "+"}{" "}
+              {getFormattedSats(transaction.totalAmount)}
+            </p>
 
-              {!!transaction.totalAmountFiat && (
-                <p className="text-md mt-1 text-gray-400 dark:text-neutral-500">
-                  ~{transaction.totalAmountFiat}
-                </p>
-              )}
-            </div>
+            {!!transaction.totalAmountFiat && (
+              <p className="text-md mt-1 text-gray-400 dark:text-neutral-500">
+                ~{transaction.totalAmountFiat}
+              </p>
+            )}
           </div>
-          <div className="mt-6">
+        </div>
+        <div className="mt-6">
+          <TransactionDetailRow
+            title={t("date_time")}
+            content={dayjs(transaction.timestamp).format("D MMMM YYYY, HH:mm")}
+          />
+          {transaction.totalFees?.toString && (
             <TransactionDetailRow
-              title={t("date_time")}
-              content={dayjs(transaction.timestamp).format(
-                "D MMMM YYYY, HH:mm"
-              )}
+              title={t("fee")}
+              content={getFormattedSats(transaction.totalFees)}
             />
-            {transaction.totalFees?.toString && (
-              <TransactionDetailRow
-                title={t("fee")}
-                content={getFormattedSats(transaction.totalFees)}
-              />
-            )}
-            {transaction.publisherLink && transaction.title && (
-              <TransactionDetailRow
-                title={tCommon("website")}
-                content={
-                  <>
-                    <Hyperlink
-                      target="_blank"
-                      href={transaction.publisherLink}
-                      rel="noopener noreferrer"
-                    >
-                      {transaction.title}
-                    </Hyperlink>
-                  </>
-                }
-              />
-            )}
-            {transaction.boostagram?.podcast && (
-              <TransactionDetailRow
-                title={t("boostagram.podcast")}
-                content={transaction.boostagram?.podcast}
-              />
-            )}
-            {transaction.boostagram?.episode && (
-              <TransactionDetailRow
-                title={t("boostagram.episode")}
-                content={transaction.boostagram.episode}
-              />
-            )}
-            {transaction.description && (
-              <TransactionDetailRow
-                title={tCommon("description")}
-                content={transaction.description}
-              />
-            )}
-            {(transaction.preimage || transaction.paymentHash) && (
-              <>
-                <div className="flex justify-center mt-4">
-                  <Hyperlink onClick={toggleShowMoreFields}>
-                    {showMoreFields ? (
-                      <>
-                        {tCommon("actions.hide")}
-                        <CaretUpIcon className="h-4 w-4 inline-flex" />
-                      </>
-                    ) : (
-                      <>
-                        {tCommon("actions.more")}
-                        <CaretDownIcon className="h-4 w-4 inline-flex" />
-                      </>
-                    )}
+          )}
+          {transaction.publisherLink && transaction.title && (
+            <TransactionDetailRow
+              title={tCommon("website")}
+              content={
+                <>
+                  <Hyperlink
+                    target="_blank"
+                    href={transaction.publisherLink}
+                    rel="noopener noreferrer"
+                  >
+                    {transaction.title}
                   </Hyperlink>
+                </>
+              }
+            />
+          )}
+          {transaction.boostagram?.podcast && (
+            <TransactionDetailRow
+              title={t("boostagram.podcast")}
+              content={transaction.boostagram?.podcast}
+            />
+          )}
+          {transaction.boostagram?.episode && (
+            <TransactionDetailRow
+              title={t("boostagram.episode")}
+              content={transaction.boostagram.episode}
+            />
+          )}
+          {transaction.description && (
+            <TransactionDetailRow
+              title={tCommon("description")}
+              content={transaction.description}
+            />
+          )}
+          {(transaction.preimage || transaction.paymentHash) && (
+            <>
+              <div className="flex justify-center mt-4">
+                <Hyperlink onClick={toggleShowMoreFields}>
+                  {showMoreFields ? (
+                    <>
+                      {tCommon("actions.hide")}
+                      <CaretUpIcon className="h-4 w-4 inline-flex" />
+                    </>
+                  ) : (
+                    <>
+                      {tCommon("actions.more")}
+                      <CaretDownIcon className="h-4 w-4 inline-flex" />
+                    </>
+                  )}
+                </Hyperlink>
+              </div>
+              {showMoreFields && (
+                <div className="mt-4">
+                  {transaction.preimage && (
+                    <TransactionDetailRow
+                      title={t("preimage")}
+                      content={transaction.preimage}
+                    />
+                  )}
+                  {transaction.paymentHash && (
+                    <TransactionDetailRow
+                      title={t("payment_hash")}
+                      content={transaction.paymentHash}
+                    />
+                  )}
                 </div>
-                {showMoreFields && (
-                  <div className="mt-4">
-                    {transaction.preimage && (
-                      <TransactionDetailRow
-                        title={t("preimage")}
-                        content={transaction.preimage}
-                      />
-                    )}
-                    {transaction.paymentHash && (
-                      <TransactionDetailRow
-                        title={t("payment_hash")}
-                        content={transaction.paymentHash}
-                      />
-                    )}
-                  </div>
-                )}
-              </>
-            )}
-          </div>
+              )}
+            </>
+          )}
         </div>
-      )}
+      </div>
     </Modal>
   );
 }
+
+const Dt = ({ children }: { children: React.ReactNode }) => (
+  <dt className="basis-28 text-gray-400 dark:text-neutral-500 text-right">
+    {children}
+  </dt>
+);
+
+const Dd = ({ children }: { children: React.ReactNode }) => (
+  <dd className="flex-1 text-gray-800 dark:text-neutral-200 break-all">
+    {children}
+  </dd>
+);
+
+const TransactionDetailRow = ({
+  title,
+  content,
+}: {
+  title: React.ReactNode | string;
+  content: React.ReactNode | string;
+}) => (
+  <div className="flex p-1 text-sm leading-5 space-x-3">
+    <Dt>{title}</Dt>
+    <Dd>{content}</Dd>
+  </div>
+);
diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
index c1188c815f..59ad74653a 100644
--- a/src/app/components/TransactionsTable/index.tsx
+++ b/src/app/components/TransactionsTable/index.tsx
@@ -109,13 +109,15 @@ export default function TransactionsTable({
           );
         })}
       </div>
-      <TransactionModal
-        transaction={transaction}
-        isOpen={modalOpen}
-        onClose={() => {
-          setModalOpen(false);
-        }}
-      />
+      {transaction && (
+        <TransactionModal
+          transaction={transaction}
+          isOpen={modalOpen}
+          onClose={() => {
+            setModalOpen(false);
+          }}
+        />
+      )}
     </>
   );
 }

From 65ff2458db49d84c47029d414a9f40d35ec97007 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Tue, 17 Oct 2023 18:12:43 +0530
Subject: [PATCH 25/40] feat: use new invoices method to fetch all transactions
 at once

---
 package.json                                       |  2 +-
 src/extension/background-script/connectors/alby.ts | 13 +++----------
 yarn.lock                                          |  9 +++++----
 3 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index e9c283f850..1d143dc8cf 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
   "dependencies": {
     "@bitcoin-design/bitcoin-icons-react": "^0.1.9",
     "@bitcoinerlab/secp256k1": "^1.0.5",
-    "@getalby/sdk": "^2.2.3",
+    "@getalby/sdk": "^2.5.0",
     "@headlessui/react": "^1.7.16",
     "@lightninglabs/lnc-web": "^0.2.4-alpha",
     "@noble/curves": "^1.1.0",
diff --git a/src/extension/background-script/connectors/alby.ts b/src/extension/background-script/connectors/alby.ts
index 256dbdd5a7..cdaf00fff3 100644
--- a/src/extension/background-script/connectors/alby.ts
+++ b/src/extension/background-script/connectors/alby.ts
@@ -114,18 +114,11 @@ export default class Alby implements Connector {
   }
 
   async getTransactions(): Promise<GetTransactionsResponse> {
-    const incomingInvoices = (await this._request((client) =>
-      client.incomingInvoices({})
-    )) as Invoice[];
-
-    const outgoingInvoices = (await this._request((client) =>
-      client.outgoingInvoices({})
+    const invoicesResponse = (await this._request((client) =>
+      client.invoices({})
     )) as Invoice[];
 
-    const transactions: ConnectorInvoice[] = [
-      ...incomingInvoices,
-      ...outgoingInvoices,
-    ].map(
+    const transactions: ConnectorInvoice[] = invoicesResponse.map(
       (invoice, index): ConnectorInvoice => ({
         custom_records: invoice.custom_records,
         id: `${invoice.payment_request}-${index}`,
diff --git a/yarn.lock b/yarn.lock
index 300c99a960..ba25cf1cfa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -572,12 +572,13 @@
   resolved "https://registry.npmjs.org/@eslint/js/-/js-8.48.0.tgz"
   integrity sha512-ZSjtmelB7IJfWD2Fvb7+Z+ChTIKWq6kjda95fLcQKNS5aheVHn4IkfgRQE3sIIzTcSLwLcLZUD9UBt+V7+h+Pw==
 
-"@getalby/sdk@^2.2.3":
-  version "2.2.3"
-  resolved "https://registry.npmjs.org/@getalby/sdk/-/sdk-2.2.3.tgz"
-  integrity sha512-8NvzGtpyne8EmRlCcg/sF3kUZWeHRXqZwS1HNuP1ytNNfmKFUZpo3GOauwzEpFFmaD+Fht5bjT3Y/XLk0QtFSw==
+"@getalby/sdk@^2.5.0":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@getalby/sdk/-/sdk-2.5.0.tgz#d1b0a22cbcf986755c4b684096d97f52ed0b469d"
+  integrity sha512-MRLgI6WxCCLgrar+qDqm/UhKs+V6yXzNm4y1bJRAuN72nkKT+TjTJHCmk9GjTngR3FrOfLbeMsPwBxCmbvfrLQ==
   dependencies:
     crypto-js "^4.1.1"
+    events "^3.3.0"
     nostr-tools "1.13.1"
 
 "@headlessui/react@^1.7.16":

From 2a6543a0ac43b3ffa0fcaec17a4fe8d83c026486 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Wed, 25 Oct 2023 15:00:50 +0530
Subject: [PATCH 26/40] feat: implement getTransactions method for citadel,
 commando, eclair, galoy, kollider, lnc, lnd, lndhub signed-off-by: pavan
 joshi <pavanj914@gmail.com>

---
 src/app/hooks/useTransactions.ts              |  1 +
 .../background-script/connectors/citadel.ts   |  6 +-
 .../background-script/connectors/commando.ts  | 71 +++++++++++++++++--
 .../background-script/connectors/eclair.ts    |  6 +-
 .../background-script/connectors/galoy.ts     |  6 +-
 .../background-script/connectors/kollider.ts  |  6 +-
 .../background-script/connectors/lnc.ts       | 54 ++++++++++++--
 .../background-script/connectors/lnd.ts       | 71 +++++++++++++++++--
 .../background-script/connectors/lndhub.ts    | 50 +++++++++++--
 9 files changed, 228 insertions(+), 43 deletions(-)

diff --git a/src/app/hooks/useTransactions.ts b/src/app/hooks/useTransactions.ts
index c7c412ed43..c6bffa5aa1 100644
--- a/src/app/hooks/useTransactions.ts
+++ b/src/app/hooks/useTransactions.ts
@@ -18,6 +18,7 @@ export const useTransactions = () => {
           accountId,
           limit,
         });
+
         const getInvoicesResponse = await api.getInvoices({
           isSettled: true,
           limit,
diff --git a/src/extension/background-script/connectors/citadel.ts b/src/extension/background-script/connectors/citadel.ts
index 78fe84c756..da68b89b89 100644
--- a/src/extension/background-script/connectors/citadel.ts
+++ b/src/extension/background-script/connectors/citadel.ts
@@ -87,13 +87,11 @@ class CitadelConnector implements Connector {
     );
   }
 
-  getTransactions(): Promise<GetTransactionsResponse> {
+  async getTransactions(): Promise<GetTransactionsResponse> {
     console.error(
       `Not yet supported with the currently used account: ${this.constructor.name}`
     );
-    throw new Error(
-      `${this.constructor.name}: "getTransactions" is not yet supported. Contact us if you need it.`
-    );
+    return { data: { transactions: [] } };
   }
 
   // not yet implemented
diff --git a/src/extension/background-script/connectors/commando.ts b/src/extension/background-script/connectors/commando.ts
index 291405b8c8..3f7089f9ab 100644
--- a/src/extension/background-script/connectors/commando.ts
+++ b/src/extension/background-script/connectors/commando.ts
@@ -61,6 +61,11 @@ type CommandoListFundsResponse = {
 type CommandoListInvoicesResponse = {
   invoices: CommandoInvoice[];
 };
+
+type CommandoListSendPaysResponse = {
+  payments: CommandoPayment[];
+};
+
 type CommandoPayInvoiceResponse = {
   payment_preimage: string;
   payment_hash: string;
@@ -82,6 +87,24 @@ type CommandoInvoice = {
   payment_hash: string;
 };
 
+type CommandoPayment = {
+  id: number;
+  partid?: number;
+  groupid: number;
+  created_at: number;
+  label?: string;
+  status: string;
+  description?: string;
+  amount_sent_msat: number;
+  amount_msat?: number;
+  bolt11?: string;
+  bolt12?: string;
+  payment_preimage: string;
+  payment_hash: string;
+  destination: string;
+  erroronion?: string;
+};
+
 const supportedMethods: string[] = [
   "bkpr-listbalances",
   "checkmessage",
@@ -223,13 +246,47 @@ export default class Commando implements Connector {
       });
   }
 
-  getTransactions(): Promise<GetTransactionsResponse> {
-    console.error(
-      `Not yet supported with the currently used account: ${this.constructor.name}`
-    );
-    throw new Error(
-      `${this.constructor.name}: "getTransactions" is not yet supported. Contact us if you need it.`
-    );
+  async getTransactions(): Promise<GetTransactionsResponse> {
+    const incomingInvoicesResponse = await this.getInvoices();
+    const outgoingInvoicesResponse = await this.ln
+      .commando({
+        method: "listsendpays",
+        params: {},
+        rune: this.config.rune,
+      })
+      .then((resp) => {
+        const parsed = resp as CommandoListSendPaysResponse;
+        return {
+          data: {
+            payments: parsed.payments
+              .map(
+                (payment, index): ConnectorInvoice => ({
+                  id: `${payment.id}`,
+                  memo: payment.description || "Sent",
+                  settled: payment.status === "complete",
+                  preimage: payment.payment_preimage,
+                  settleDate: payment.created_at * 1000,
+                  type: "sent",
+                  totalAmount: (payment.amount_sent_msat / 1000).toString(),
+                })
+              )
+              .filter((payment) => payment.settled),
+          },
+        };
+      });
+
+    const transactions: ConnectorInvoice[] = [
+      ...incomingInvoicesResponse.data.invoices,
+      ...outgoingInvoicesResponse.data.payments,
+    ].sort((a, b) => {
+      return b.settleDate - a.settleDate;
+    });
+
+    return {
+      data: {
+        transactions,
+      },
+    };
   }
 
   async getInfo(): Promise<GetInfoResponse> {
diff --git a/src/extension/background-script/connectors/eclair.ts b/src/extension/background-script/connectors/eclair.ts
index f467150029..ca0c1921f6 100644
--- a/src/extension/background-script/connectors/eclair.ts
+++ b/src/extension/background-script/connectors/eclair.ts
@@ -102,13 +102,11 @@ class Eclair implements Connector {
     };
   }
 
-  getTransactions(): Promise<GetTransactionsResponse> {
+  async getTransactions(): Promise<GetTransactionsResponse> {
     console.error(
       `Not yet supported with the currently used account: ${this.constructor.name}`
     );
-    throw new Error(
-      `${this.constructor.name}: "getTransactions" is not yet supported. Contact us if you need it.`
-    );
+    return { data: { transactions: [] } };
   }
 
   async getBalance(): Promise<GetBalanceResponse> {
diff --git a/src/extension/background-script/connectors/galoy.ts b/src/extension/background-script/connectors/galoy.ts
index 1226d483f6..b8c13a0a8e 100644
--- a/src/extension/background-script/connectors/galoy.ts
+++ b/src/extension/background-script/connectors/galoy.ts
@@ -98,13 +98,11 @@ class Galoy implements Connector {
     return { data: { invoices: [] } };
   }
 
-  getTransactions(): Promise<GetTransactionsResponse> {
+  async getTransactions(): Promise<GetTransactionsResponse> {
     console.error(
       `Not yet supported with the currently used account: ${this.constructor.name}`
     );
-    throw new Error(
-      `${this.constructor.name}: "getTransactions" is not yet supported. Contact us if you need it.`
-    );
+    return { data: { transactions: [] } };
   }
 
   async getBalance(): Promise<GetBalanceResponse> {
diff --git a/src/extension/background-script/connectors/kollider.ts b/src/extension/background-script/connectors/kollider.ts
index 049ed6229a..01f519ba83 100644
--- a/src/extension/background-script/connectors/kollider.ts
+++ b/src/extension/background-script/connectors/kollider.ts
@@ -134,13 +134,11 @@ export default class Kollider implements Connector {
     };
   }
 
-  getTransactions(): Promise<GetTransactionsResponse> {
+  async getTransactions(): Promise<GetTransactionsResponse> {
     console.error(
       `Not yet supported with the currently used account: ${this.constructor.name}`
     );
-    throw new Error(
-      `${this.constructor.name}: "getTransactions" is not yet supported. Contact us if you need it.`
-    );
+    return { data: { transactions: [] } };
   }
 
   async getInfo(): Promise<GetInfoResponse> {
diff --git a/src/extension/background-script/connectors/lnc.ts b/src/extension/background-script/connectors/lnc.ts
index 77bf85d2bc..554768428e 100644
--- a/src/extension/background-script/connectors/lnc.ts
+++ b/src/extension/background-script/connectors/lnc.ts
@@ -1,4 +1,5 @@
 import LNC from "@lightninglabs/lnc-web";
+import lightningPayReq from "bolt11";
 import Base64 from "crypto-js/enc-base64";
 import Hex from "crypto-js/enc-hex";
 import UTF8 from "crypto-js/enc-utf8";
@@ -272,13 +273,52 @@ class Lnc implements Connector {
     };
   }
 
-  getTransactions(): Promise<GetTransactionsResponse> {
-    console.error(
-      `Not yet supported with the currently used account: ${this.constructor.name}`
-    );
-    throw new Error(
-      `${this.constructor.name}: "getTransactions" is not yet supported. Contact us if you need it.`
-    );
+  async getTransactions(): Promise<GetTransactionsResponse> {
+    let index = 100;
+    const incomingInvoices = await this.getInvoices();
+
+    const outgoingInvoicesResponse = await this.lnc.lnd.lightning.ListPayments({
+      reversed: true,
+      max_payments: 100,
+      include_incomplete: false,
+    });
+
+    const outgoingInvoices: ConnectorInvoice[] =
+      outgoingInvoicesResponse.payments.map(
+        (payment: FixMe, arrayIndex: number): ConnectorInvoice => {
+          let memo = "Sent";
+          if (payment.payment_request) {
+            memo = (
+              lightningPayReq
+                .decode(payment.payment_request)
+                .tags.find((tag) => tag.tagName === "description")?.data ||
+              "Sent"
+            ).toString();
+          }
+          return {
+            id: `${payment.payment_request}-${index++}`,
+            memo: memo,
+            preimage: payment.payment_preimage,
+            settled: true,
+            settleDate: parseInt(payment.creation_date) * 1000,
+            totalAmount: payment.value_sat,
+            type: "sent",
+          };
+        }
+      );
+
+    const transactions: ConnectorInvoice[] = [
+      ...incomingInvoices.data.invoices,
+      ...outgoingInvoices,
+    ].sort((a, b) => {
+      return b.settleDate - a.settleDate;
+    });
+
+    return {
+      data: {
+        transactions,
+      },
+    };
   }
 
   // not yet implemented
diff --git a/src/extension/background-script/connectors/lnd.ts b/src/extension/background-script/connectors/lnd.ts
index b4ff3475a0..d0953b2291 100644
--- a/src/extension/background-script/connectors/lnd.ts
+++ b/src/extension/background-script/connectors/lnd.ts
@@ -1,3 +1,4 @@
+import lightningPayReq from "bolt11";
 import Base64 from "crypto-js/enc-base64";
 import Hex from "crypto-js/enc-hex";
 import UTF8 from "crypto-js/enc-utf8";
@@ -464,13 +465,69 @@ class Lnd implements Connector {
     };
   }
 
-  getTransactions(): Promise<GetTransactionsResponse> {
-    console.error(
-      `Not yet supported with the currently used account: ${this.constructor.name}`
-    );
-    throw new Error(
-      `${this.constructor.name}: "getTransactions" is not yet supported. Contact us if you need it.`
-    );
+  async getTransactions(): Promise<GetTransactionsResponse> {
+    let index = 100;
+    // incoming invoices return 0-99 entries by default
+    const incomingInvoices = await this.getInvoices();
+
+    const outgoingInvoicesResponse = await this.request<{
+      payments: {
+        payment_hash: string;
+        payment_preimage: string;
+        value_sat: string;
+        value_msat: string;
+        payment_request: string;
+        status: string;
+        fee_sat: string;
+        fee_msat: string;
+        creation_time_ns: string;
+        creation_date: string;
+        htlcs: Array<string>;
+        payment_index: string;
+        failure_reason: string;
+      }[];
+      last_index_offset: string;
+      first_index_offset: string;
+      total_num_payments: string;
+    }>("GET", "/v1/payments", {
+      reversed: true,
+      max_payments: 100,
+      include_incomplete: false,
+    });
+
+    const outgoingInvoices: ConnectorInvoice[] =
+      outgoingInvoicesResponse.payments.map((payment, _): ConnectorInvoice => {
+        let memo = "Sent";
+        if (payment.payment_request) {
+          memo = (
+            lightningPayReq
+              .decode(payment.payment_request)
+              .tags.find((tag) => tag.tagName === "description")?.data || "Sent"
+          ).toString();
+        }
+        return {
+          id: `${payment.payment_request}-${index++}`,
+          memo: memo,
+          preimage: payment.payment_preimage,
+          settled: true,
+          settleDate: parseInt(payment.creation_date) * 1000,
+          totalAmount: payment.value_sat,
+          type: "sent",
+        };
+      });
+
+    const transactions: ConnectorInvoice[] = [
+      ...incomingInvoices.data.invoices,
+      ...outgoingInvoices,
+    ].sort((a, b) => {
+      return b.settleDate - a.settleDate;
+    });
+
+    return {
+      data: {
+        transactions,
+      },
+    };
   }
 
   protected async request<Type>(
diff --git a/src/extension/background-script/connectors/lndhub.ts b/src/extension/background-script/connectors/lndhub.ts
index d006c04f89..3affc830c6 100644
--- a/src/extension/background-script/connectors/lndhub.ts
+++ b/src/extension/background-script/connectors/lndhub.ts
@@ -131,13 +131,51 @@ export default class LndHub implements Connector {
     };
   }
 
-  getTransactions(): Promise<GetTransactionsResponse> {
-    console.error(
-      `Not yet supported with the currently used account: ${this.constructor.name}`
-    );
-    throw new Error(
-      `${this.constructor.name}: "getTransactions" is not yet supported. Contact us if you need it.`
+  async getTransactions(): Promise<GetTransactionsResponse> {
+    const incomingInvoices = await this.getInvoices();
+    const outgoingInvoicesResponse = await this.request<
+      {
+        custom_records: ConnectorInvoice["custom_records"];
+        fee: string;
+        keysend: boolean;
+        memo: string;
+        payment_hash: string;
+        payment_preimage: string;
+        r_hash: {
+          type: "Buffer";
+          data: number[];
+        };
+        timestamp: number;
+        type: "paid_invoice";
+        value: number;
+      }[]
+    >("GET", "/gettxs", { limit: 100 });
+
+    // /gettxs endpoint returns successfull outgoing  transactions bydefault
+    const outgoingInvoices: ConnectorInvoice[] = outgoingInvoicesResponse.map(
+      (transaction, index): ConnectorInvoice => ({
+        id: `${index}`,
+        memo: transaction.memo,
+        preimage: transaction.payment_preimage,
+        settled: true,
+        settleDate: transaction.timestamp * 1000,
+        totalAmount: `${transaction.value}`,
+        type: "sent",
+      })
     );
+
+    const transactions: ConnectorInvoice[] = [
+      ...incomingInvoices.data.invoices,
+      ...outgoingInvoices,
+    ].sort((a, b) => {
+      return b.settleDate - a.settleDate;
+    });
+
+    return {
+      data: {
+        transactions,
+      },
+    };
   }
 
   async getInfo(): Promise<GetInfoResponse> {

From 0290101608a93b48984416e7ffc261281d55f5e2 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Wed, 25 Oct 2023 15:33:39 +0530
Subject: [PATCH 27/40] feat: lnbits get transactions method

---
 .../background-script/connectors/lnbits.ts    | 47 +++++++++++++++++--
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/src/extension/background-script/connectors/lnbits.ts b/src/extension/background-script/connectors/lnbits.ts
index c3688cddaf..cd6640ab23 100644
--- a/src/extension/background-script/connectors/lnbits.ts
+++ b/src/extension/background-script/connectors/lnbits.ts
@@ -148,11 +148,48 @@ class LnBits implements Connector {
   }
 
   getTransactions(): Promise<GetTransactionsResponse> {
-    console.error(
-      `Not yet supported with the currently used account: ${this.constructor.name}`
-    );
-    throw new Error(
-      `${this.constructor.name}: "getTransactions" is not yet supported. Contact us if you need it.`
+    return this.request(
+      "GET",
+      "/api/v1/payments",
+      this.config.adminkey,
+      undefined
+    ).then(
+      (
+        data: {
+          checking_id: string;
+          pending: boolean;
+          amount: number;
+          fee: number;
+          memo: string;
+          time: number;
+          bolt11: string;
+          preimage: string;
+          payment_hash: string;
+          wallet_id: string;
+          webhook: string;
+          webhook_status: string;
+        }[]
+      ) => {
+        const transactions: ConnectorInvoice[] = data.map(
+          (transaction, index): ConnectorInvoice => {
+            return {
+              id: `${transaction.checking_id}-${index}`,
+              memo: transaction.memo,
+              preimage: transaction.preimage,
+              settled: !transaction.pending,
+              settleDate: transaction.time * 1000,
+              totalAmount: `${Math.abs(Math.floor(transaction.amount / 1000))}`,
+              type: transaction.amount > 0 ? "received" : "sent",
+            };
+          }
+        );
+
+        return {
+          data: {
+            transactions,
+          },
+        };
+      }
     );
   }
 

From d30059a047cc962cbfd09010ba693d682dc8def6 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Thu, 26 Oct 2023 16:06:19 +0530
Subject: [PATCH 28/40] feat: cleanup useTransactions hook

---
 src/app/hooks/useTransactions.ts           | 58 +++++-----------------
 src/app/screens/Home/DefaultView/index.tsx |  2 +-
 src/app/screens/Transactions/index.tsx     |  2 +-
 3 files changed, 14 insertions(+), 48 deletions(-)

diff --git a/src/app/hooks/useTransactions.ts b/src/app/hooks/useTransactions.ts
index c6bffa5aa1..5127bd9297 100644
--- a/src/app/hooks/useTransactions.ts
+++ b/src/app/hooks/useTransactions.ts
@@ -2,7 +2,6 @@ import dayjs from "dayjs";
 import { useCallback, useState } from "react";
 import toast from "~/app/components/Toast";
 import { useSettings } from "~/app/context/SettingsContext";
-import { convertPaymentsToTransactions } from "~/app/utils/payments";
 import api from "~/common/lib/api";
 import { Transaction } from "~/types";
 
@@ -12,69 +11,36 @@ export const useTransactions = () => {
   const [isLoadingTransactions, setIsLoadingTransactions] = useState(true);
 
   const loadTransactions = useCallback(
-    async (accountId: string, limit?: number) => {
+    async (limit?: number) => {
       try {
-        const { payments } = await api.getPaymentsByAccount({
-          accountId,
-          limit,
-        });
-
-        const getInvoicesResponse = await api.getInvoices({
+        const getTransactionsResponse = await api.getTransactions({
           isSettled: true,
           limit,
         });
-
-        const invoices: Transaction[] = getInvoicesResponse.invoices.map(
-          (invoice) => ({
-            ...invoice,
-            title: invoice.memo,
-            description: invoice.memo,
-            date: dayjs(invoice.settleDate).fromNow(),
-            timestamp: invoice.settleDate,
+        const transactions = getTransactionsResponse.transactions.map(
+          (transaction) => ({
+            ...transaction,
+            title: transaction.memo,
+            description: transaction.memo,
+            date: dayjs(transaction.settleDate).fromNow(),
+            timestamp: transaction.settleDate,
           })
         );
 
-        let allTransactions;
-
-        try {
-          const getAllTransactionsResponse = await api.getTransactions({
-            isSettled: true,
-            limit,
-          });
-          allTransactions = getAllTransactionsResponse.transactions.map(
-            (transaction) => ({
-              ...transaction,
-              title: transaction.memo,
-              description: transaction.memo,
-              date: dayjs(transaction.settleDate).fromNow(),
-              timestamp: transaction.settleDate,
-            })
-          );
-        } catch (e) {
-          console.error(e);
-        }
-
-        const _transactions: Transaction[] =
-          await convertPaymentsToTransactions(payments);
-
-        const transactionList: Transaction[] = allTransactions
-          ? allTransactions
-          : [..._transactions, ...invoices];
-
-        for (const transaction of transactionList) {
+        for (const transaction of transactions) {
           transaction.totalAmountFiat = settings.showFiat
             ? await getFormattedFiat(transaction.totalAmount)
             : "";
         }
 
         // Sort the final list by date in descending order.
-        transactionList.sort((a, b) => {
+        transactions.sort((a, b) => {
           const dateA = a.timestamp;
           const dateB = b.timestamp;
           return dateB - dateA;
         });
 
-        setTransactions(transactionList);
+        setTransactions(transactions);
 
         setIsLoadingTransactions(false);
       } catch (e) {
diff --git a/src/app/screens/Home/DefaultView/index.tsx b/src/app/screens/Home/DefaultView/index.tsx
index 7a303d0f2e..bcad5eaea3 100644
--- a/src/app/screens/Home/DefaultView/index.tsx
+++ b/src/app/screens/Home/DefaultView/index.tsx
@@ -50,7 +50,7 @@ const DefaultView: FC<Props> = (props) => {
   const itemsLimit = 8;
 
   useEffect(() => {
-    if (account?.id) loadTransactions(account.id, itemsLimit);
+    if (account?.id) loadTransactions(itemsLimit);
   }, [
     account?.id,
     balancesDecorated?.accountBalance,
diff --git a/src/app/screens/Transactions/index.tsx b/src/app/screens/Transactions/index.tsx
index 446e6dac2d..b4f84541a6 100644
--- a/src/app/screens/Transactions/index.tsx
+++ b/src/app/screens/Transactions/index.tsx
@@ -20,7 +20,7 @@ function Transactions() {
   const listItems = transactions;
 
   useEffect(() => {
-    if (account?.id) loadTransactions(account.id);
+    if (account?.id) loadTransactions();
   }, [account?.id, balancesDecorated?.accountBalance, loadTransactions]);
 
   return (

From 20bf68ac0be8298c624f001ed5f27ee30607a9f7 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Thu, 26 Oct 2023 16:18:29 +0530
Subject: [PATCH 29/40] chore: cleanup unused var

---
 src/app/screens/Home/DefaultView/index.tsx | 9 ++-------
 src/app/screens/Transactions/index.tsx     | 6 +++---
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/app/screens/Home/DefaultView/index.tsx b/src/app/screens/Home/DefaultView/index.tsx
index bcad5eaea3..f696612a36 100644
--- a/src/app/screens/Home/DefaultView/index.tsx
+++ b/src/app/screens/Home/DefaultView/index.tsx
@@ -50,13 +50,8 @@ const DefaultView: FC<Props> = (props) => {
   const itemsLimit = 8;
 
   useEffect(() => {
-    if (account?.id) loadTransactions(itemsLimit);
-  }, [
-    account?.id,
-    balancesDecorated?.accountBalance,
-    loadTransactions,
-    itemsLimit,
-  ]);
+    loadTransactions(itemsLimit);
+  }, [balancesDecorated?.accountBalance, loadTransactions, itemsLimit]);
 
   // check if currentURL is blocked
   useEffect(() => {
diff --git a/src/app/screens/Transactions/index.tsx b/src/app/screens/Transactions/index.tsx
index b4f84541a6..ae0a1490fb 100644
--- a/src/app/screens/Transactions/index.tsx
+++ b/src/app/screens/Transactions/index.tsx
@@ -11,7 +11,7 @@ function Transactions() {
     keyPrefix: "transactions",
   });
 
-  const { account, balancesDecorated, accountLoading } = useAccount();
+  const { balancesDecorated, accountLoading } = useAccount();
 
   const { transactions, isLoadingTransactions, loadTransactions } =
     useTransactions();
@@ -20,8 +20,8 @@ function Transactions() {
   const listItems = transactions;
 
   useEffect(() => {
-    if (account?.id) loadTransactions();
-  }, [account?.id, balancesDecorated?.accountBalance, loadTransactions]);
+    loadTransactions();
+  }, [balancesDecorated?.accountBalance, loadTransactions]);
 
   return (
     <Container>

From 393c553fd54e02194b6ed4afe7f01efc256019f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Mon, 30 Oct 2023 20:07:11 +0100
Subject: [PATCH 30/40] fix: break long content w/o whitespaces in modal

---
 src/app/components/TransactionsTable/TransactionModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/TransactionsTable/TransactionModal.tsx b/src/app/components/TransactionsTable/TransactionModal.tsx
index 21f338a1f2..47f64ccf52 100644
--- a/src/app/components/TransactionsTable/TransactionModal.tsx
+++ b/src/app/components/TransactionsTable/TransactionModal.tsx
@@ -183,7 +183,7 @@ const Dt = ({ children }: { children: React.ReactNode }) => (
 );
 
 const Dd = ({ children }: { children: React.ReactNode }) => (
-  <dd className="flex-1 text-gray-800 dark:text-neutral-200 break-all">
+  <dd className="flex-1 text-gray-800 dark:text-neutral-200 break-all whitespace-pre-wrap">
     {children}
   </dd>
 );

From 52e56a2dab34db4c60e19b7f314af3535bcf090c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Mon, 30 Oct 2023 22:13:47 +0100
Subject: [PATCH 31/40] fix: remove sorting in hook

---
 src/app/hooks/useTransactions.ts | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/app/hooks/useTransactions.ts b/src/app/hooks/useTransactions.ts
index 5127bd9297..1be0113f44 100644
--- a/src/app/hooks/useTransactions.ts
+++ b/src/app/hooks/useTransactions.ts
@@ -33,15 +33,7 @@ export const useTransactions = () => {
             : "";
         }
 
-        // Sort the final list by date in descending order.
-        transactions.sort((a, b) => {
-          const dateA = a.timestamp;
-          const dateB = b.timestamp;
-          return dateB - dateA;
-        });
-
         setTransactions(transactions);
-
         setIsLoadingTransactions(false);
       } catch (e) {
         console.error(e);

From 88a93ee43ea076438508e92369ff5a2937ff84ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Mon, 30 Oct 2023 22:36:20 +0100
Subject: [PATCH 32/40] fix: prevent duplicate loading of transactions, spacing

---
 .../components/TransactionsTable/index.tsx    | 146 +++++++++---------
 src/app/screens/Transactions/index.tsx        |  10 +-
 2 files changed, 79 insertions(+), 77 deletions(-)

diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
index 59ad74653a..c3c522ed8c 100644
--- a/src/app/components/TransactionsTable/index.tsx
+++ b/src/app/components/TransactionsTable/index.tsx
@@ -41,83 +41,87 @@ export default function TransactionsTable({
       : "incoming";
   }
 
-  return loading ? (
-    <div className="w-full flex flex-col items-center mt-4">
-      <Loading />
-    </div>
-  ) : !transactions?.length && noResultMsg ? (
-    <p className="text-gray-500 dark:text-neutral-400">{noResultMsg}</p>
-  ) : (
-    <>
-      <div className="overflow-hidden">
-        {transactions?.map((tx) => {
-          const type = getTransactionType(tx);
+  return (
+    <div className="mt-4">
+      {loading ? (
+        <div className="w-full flex flex-col items-center">
+          <Loading />
+        </div>
+      ) : !transactions?.length && noResultMsg ? (
+        <p className="text-gray-500 dark:text-neutral-400">{noResultMsg}</p>
+      ) : (
+        <>
+          <div className="overflow-hidden">
+            {transactions?.map((tx) => {
+              const type = getTransactionType(tx);
 
-          return (
-            <div
-              key={tx.id}
-              className="px-3 py-2 hover:bg-gray-100 dark:hover:bg-surface-02dp cursor-pointer rounded-md"
-              onClick={() => openDetails(tx)}
-            >
-              <div className="flex gap-4">
-                <div className="flex items-center">
-                  {type == "outgoing" ? (
-                    <div className="flex justify-center items-center bg-orange-100 dark:bg-[#261911] rounded-full w-8 h-8">
-                      <ArrowUpIcon className="w-4 h-4 text-orange-400 stroke-[4px]" />
+              return (
+                <div
+                  key={tx.id}
+                  className="px-3 py-2 hover:bg-gray-100 dark:hover:bg-surface-02dp cursor-pointer rounded-md"
+                  onClick={() => openDetails(tx)}
+                >
+                  <div className="flex gap-4">
+                    <div className="flex items-center">
+                      {type == "outgoing" ? (
+                        <div className="flex justify-center items-center bg-orange-100 dark:bg-[#261911] rounded-full w-8 h-8">
+                          <ArrowUpIcon className="w-4 h-4 text-orange-400 stroke-[4px]" />
+                        </div>
+                      ) : (
+                        <div className="flex justify-center items-center bg-green-100 dark:bg-[#0F1E1A] rounded-full w-8 h-8">
+                          <ArrowDownIcon className="w-4 h-4 text-green-400 stroke-[4px]" />
+                        </div>
+                      )}
                     </div>
-                  ) : (
-                    <div className="flex justify-center items-center bg-green-100 dark:bg-[#0F1E1A] rounded-full w-8 h-8">
-                      <ArrowDownIcon className="w-4 h-4 text-green-400 stroke-[4px]" />
+                    <div className="overflow-hidden mr-3">
+                      <div className="text-sm font-medium text-black truncate dark:text-white">
+                        <p className="truncate">
+                          {tx.title ||
+                            tx.boostagram?.message ||
+                            (type == "incoming" ? t("received") : t("sent"))}
+                        </p>
+                      </div>
+                      <p className="text-xs text-gray-400 dark:text-neutral-500">
+                        {tx.date}
+                      </p>
                     </div>
-                  )}
-                </div>
-                <div className="overflow-hidden mr-3">
-                  <div className="text-sm font-medium text-black truncate dark:text-white">
-                    <p className="truncate">
-                      {tx.title ||
-                        tx.boostagram?.message ||
-                        (type == "incoming" ? t("received") : t("sent"))}
-                    </p>
-                  </div>
-                  <p className="text-xs text-gray-400 dark:text-neutral-500">
-                    {tx.date}
-                  </p>
-                </div>
-                <div className="flex ml-auto text-right space-x-3 shrink-0 dark:text-white">
-                  <div>
-                    <p
-                      className={classNames(
-                        "text-sm font-medium",
-                        type == "incoming"
-                          ? "text-green-600 dark:color-green-400"
-                          : "text-orange-600 dark:color-orange-400"
-                      )}
-                    >
-                      {type == "outgoing" ? "-" : "+"}{" "}
-                      {getFormattedSats(tx.totalAmount)}
-                    </p>
+                    <div className="flex ml-auto text-right space-x-3 shrink-0 dark:text-white">
+                      <div>
+                        <p
+                          className={classNames(
+                            "text-sm font-medium",
+                            type == "incoming"
+                              ? "text-green-600 dark:color-green-400"
+                              : "text-orange-600 dark:color-orange-400"
+                          )}
+                        >
+                          {type == "outgoing" ? "-" : "+"}{" "}
+                          {getFormattedSats(tx.totalAmount)}
+                        </p>
 
-                    {!!tx.totalAmountFiat && (
-                      <p className="text-xs text-gray-400 dark:text-neutral-600">
-                        ~{tx.totalAmountFiat}
-                      </p>
-                    )}
+                        {!!tx.totalAmountFiat && (
+                          <p className="text-xs text-gray-400 dark:text-neutral-600">
+                            ~{tx.totalAmountFiat}
+                          </p>
+                        )}
+                      </div>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      {transaction && (
-        <TransactionModal
-          transaction={transaction}
-          isOpen={modalOpen}
-          onClose={() => {
-            setModalOpen(false);
-          }}
-        />
+              );
+            })}
+          </div>
+          {transaction && (
+            <TransactionModal
+              transaction={transaction}
+              isOpen={modalOpen}
+              onClose={() => {
+                setModalOpen(false);
+              }}
+            />
+          )}
+        </>
       )}
-    </>
+    </div>
   );
 }
diff --git a/src/app/screens/Transactions/index.tsx b/src/app/screens/Transactions/index.tsx
index ae0a1490fb..69a2fb8d64 100644
--- a/src/app/screens/Transactions/index.tsx
+++ b/src/app/screens/Transactions/index.tsx
@@ -11,17 +11,15 @@ function Transactions() {
     keyPrefix: "transactions",
   });
 
-  const { balancesDecorated, accountLoading } = useAccount();
-
+  const { accountLoading } = useAccount();
   const { transactions, isLoadingTransactions, loadTransactions } =
     useTransactions();
 
   const isLoading = accountLoading || isLoadingTransactions;
-  const listItems = transactions;
 
   useEffect(() => {
     loadTransactions();
-  }, [balancesDecorated?.accountBalance, loadTransactions]);
+  }, [loadTransactions]);
 
   return (
     <Container>
@@ -39,8 +37,8 @@ function Transactions() {
         </div>
       ) : (
         <div>
-          {listItems && listItems.length > 0 && (
-            <TransactionsTable transactions={listItems} />
+          {transactions && transactions.length > 0 && (
+            <TransactionsTable transactions={transactions} />
           )}
         </div>
       )}

From 32e17a028750efc6b3becfc0aa6108e687576b82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Mon, 30 Oct 2023 23:25:15 +0100
Subject: [PATCH 33/40] fix: add payment hash, cleanup

---
 src/app/hooks/useTransactions.ts              |  1 +
 src/app/screens/Home/DefaultView/index.tsx    |  7 +-
 .../actions/ln/transactions.ts                |  6 +-
 .../background-script/connectors/alby.ts      | 16 ++--
 .../background-script/connectors/citadel.ts   |  4 +-
 .../background-script/connectors/commando.ts  | 46 +++++++-----
 .../connectors/connector.interface.ts         | 18 +++--
 .../background-script/connectors/eclair.ts    |  9 ++-
 .../background-script/connectors/galoy.ts     |  4 +-
 .../background-script/connectors/kollider.ts  | 11 +--
 .../background-script/connectors/lnbits.ts    | 22 ++++--
 .../background-script/connectors/lnc.ts       | 43 ++++++-----
 .../background-script/connectors/lnd.ts       | 73 ++++++++++---------
 .../background-script/connectors/lndhub.ts    | 55 ++++++++------
 src/types.ts                                  |  9 ++-
 15 files changed, 185 insertions(+), 139 deletions(-)

diff --git a/src/app/hooks/useTransactions.ts b/src/app/hooks/useTransactions.ts
index 1be0113f44..ac1ad7eb83 100644
--- a/src/app/hooks/useTransactions.ts
+++ b/src/app/hooks/useTransactions.ts
@@ -17,6 +17,7 @@ export const useTransactions = () => {
           isSettled: true,
           limit,
         });
+
         const transactions = getTransactionsResponse.transactions.map(
           (transaction) => ({
             ...transaction,
diff --git a/src/app/screens/Home/DefaultView/index.tsx b/src/app/screens/Home/DefaultView/index.tsx
index f696612a36..e08c214816 100644
--- a/src/app/screens/Home/DefaultView/index.tsx
+++ b/src/app/screens/Home/DefaultView/index.tsx
@@ -32,12 +32,14 @@ export type Props = {
 };
 
 const DefaultView: FC<Props> = (props) => {
+  const itemsLimit = 8;
+
   const { t } = useTranslation("translation", { keyPrefix: "home" });
   const { t: tCommon } = useTranslation("common");
 
   const navigate = useNavigate();
 
-  const { account, balancesDecorated, accountLoading } = useAccount();
+  const { account, accountLoading } = useAccount();
 
   const lightningAddress = account?.lightningAddress || "";
 
@@ -47,11 +49,10 @@ const DefaultView: FC<Props> = (props) => {
     useTransactions();
 
   const isLoading = accountLoading || isLoadingTransactions;
-  const itemsLimit = 8;
 
   useEffect(() => {
     loadTransactions(itemsLimit);
-  }, [balancesDecorated?.accountBalance, loadTransactions, itemsLimit]);
+  }, [loadTransactions, itemsLimit]);
 
   // check if currentURL is blocked
   useEffect(() => {
diff --git a/src/extension/background-script/actions/ln/transactions.ts b/src/extension/background-script/actions/ln/transactions.ts
index 6194643a98..33dc9fc7cd 100644
--- a/src/extension/background-script/actions/ln/transactions.ts
+++ b/src/extension/background-script/actions/ln/transactions.ts
@@ -18,7 +18,11 @@ const transactions = async (message: MessageTransactions) => {
         const boostagram = utils.getBoostagramFromInvoiceCustomRecords(
           transaction.custom_records
         );
-        return { ...transaction, boostagram };
+        return {
+          ...transaction,
+          boostagram,
+          paymentHash: transaction.payment_hash,
+        };
       });
 
     if (limit) {
diff --git a/src/extension/background-script/connectors/alby.ts b/src/extension/background-script/connectors/alby.ts
index cdaf00fff3..64d6825018 100644
--- a/src/extension/background-script/connectors/alby.ts
+++ b/src/extension/background-script/connectors/alby.ts
@@ -15,7 +15,7 @@ import state from "../state";
 import Connector, {
   CheckPaymentArgs,
   CheckPaymentResponse,
-  ConnectorInvoice,
+  ConnectorTransaction,
   ConnectPeerResponse,
   GetBalanceResponse,
   GetInfoResponse,
@@ -94,15 +94,16 @@ export default class Alby implements Connector {
       client.incomingInvoices({})
     )) as Invoice[];
 
-    const invoices: ConnectorInvoice[] = incomingInvoices.map(
-      (invoice, index): ConnectorInvoice => ({
+    const invoices: ConnectorTransaction[] = incomingInvoices.map(
+      (invoice, index): ConnectorTransaction => ({
         custom_records: invoice.custom_records,
         id: `${invoice.payment_request}-${index}`,
+        payment_hash: invoice.payment_hash,
         memo: invoice.comment || invoice.memo,
         preimage: "", // alby wallet api doesn't support preimage (yet)
         settled: invoice.settled,
         settleDate: new Date(invoice.settled_at).getTime(),
-        totalAmount: `${invoice.amount}`,
+        totalAmount: invoice.amount,
         type: "received",
       })
     );
@@ -118,15 +119,16 @@ export default class Alby implements Connector {
       client.invoices({})
     )) as Invoice[];
 
-    const transactions: ConnectorInvoice[] = invoicesResponse.map(
-      (invoice, index): ConnectorInvoice => ({
+    const transactions: ConnectorTransaction[] = invoicesResponse.map(
+      (invoice, index): ConnectorTransaction => ({
         custom_records: invoice.custom_records,
         id: `${invoice.payment_request}-${index}`,
         memo: invoice.comment || invoice.memo,
         preimage: "", // alby wallet api doesn't support preimage (yet)
+        payment_hash: invoice.payment_hash,
         settled: invoice.settled,
         settleDate: new Date(invoice.settled_at).getTime(),
-        totalAmount: `${invoice.amount}`,
+        totalAmount: invoice.amount,
         type: invoice.type == "incoming" ? "received" : "sent",
       })
     );
diff --git a/src/extension/background-script/connectors/citadel.ts b/src/extension/background-script/connectors/citadel.ts
index da68b89b89..e1a8ad0108 100644
--- a/src/extension/background-script/connectors/citadel.ts
+++ b/src/extension/background-script/connectors/citadel.ts
@@ -80,7 +80,7 @@ class CitadelConnector implements Connector {
   // not yet implemented
   async getInvoices(): Promise<GetInvoicesResponse> {
     console.error(
-      `Not yet supported with the currently used account: ${this.constructor.name}`
+      `getInvoices() is not yet supported with the currently used account: ${this.constructor.name}`
     );
     throw new Error(
       `${this.constructor.name}: "getInvoices" is not yet supported. Contact us if you need it.`
@@ -89,7 +89,7 @@ class CitadelConnector implements Connector {
 
   async getTransactions(): Promise<GetTransactionsResponse> {
     console.error(
-      `Not yet supported with the currently used account: ${this.constructor.name}`
+      `getTransactions() is not yet supported with the currently used account: ${this.constructor.name}`
     );
     return { data: { transactions: [] } };
   }
diff --git a/src/extension/background-script/connectors/commando.ts b/src/extension/background-script/connectors/commando.ts
index 3f7089f9ab..a67db84b97 100644
--- a/src/extension/background-script/connectors/commando.ts
+++ b/src/extension/background-script/connectors/commando.ts
@@ -7,7 +7,7 @@ import { Account } from "~/types";
 import Connector, {
   CheckPaymentArgs,
   CheckPaymentResponse,
-  ConnectorInvoice,
+  ConnectorTransaction,
   ConnectPeerArgs,
   ConnectPeerResponse,
   flattenRequestMethods,
@@ -227,14 +227,15 @@ export default class Commando implements Connector {
           data: {
             invoices: parsed.invoices
               .map(
-                (invoice, index): ConnectorInvoice => ({
+                (invoice, index): ConnectorTransaction => ({
                   id: invoice.label,
                   memo: invoice.description,
                   settled: invoice.status === "paid",
                   preimage: invoice.payment_preimage,
+                  payment_hash: invoice.payment_hash,
                   settleDate: invoice.paid_at * 1000,
                   type: "received",
-                  totalAmount: (invoice.msatoshi / 1000).toString(),
+                  totalAmount: Math.floor(invoice.msatoshi / 1000),
                 })
               )
               .filter((invoice) => invoice.settled)
@@ -248,7 +249,24 @@ export default class Commando implements Connector {
 
   async getTransactions(): Promise<GetTransactionsResponse> {
     const incomingInvoicesResponse = await this.getInvoices();
-    const outgoingInvoicesResponse = await this.ln
+    const outgoingInvoicesResponse = await this.getPayments();
+
+    const transactions: ConnectorTransaction[] = [
+      ...incomingInvoicesResponse.data.invoices,
+      ...outgoingInvoicesResponse.data.payments,
+    ].sort((a, b) => {
+      return b.settleDate - a.settleDate;
+    });
+
+    return {
+      data: {
+        transactions,
+      },
+    };
+  }
+
+  private async getPayments() {
+    return await this.ln
       .commando({
         method: "listsendpays",
         params: {},
@@ -260,33 +278,21 @@ export default class Commando implements Connector {
           data: {
             payments: parsed.payments
               .map(
-                (payment, index): ConnectorInvoice => ({
+                (payment, index): ConnectorTransaction => ({
                   id: `${payment.id}`,
-                  memo: payment.description || "Sent",
+                  memo: payment.description ?? "",
                   settled: payment.status === "complete",
                   preimage: payment.payment_preimage,
+                  payment_hash: payment.payment_hash,
                   settleDate: payment.created_at * 1000,
                   type: "sent",
-                  totalAmount: (payment.amount_sent_msat / 1000).toString(),
+                  totalAmount: payment.amount_sent_msat / 1000,
                 })
               )
               .filter((payment) => payment.settled),
           },
         };
       });
-
-    const transactions: ConnectorInvoice[] = [
-      ...incomingInvoicesResponse.data.invoices,
-      ...outgoingInvoicesResponse.data.payments,
-    ].sort((a, b) => {
-      return b.settleDate - a.settleDate;
-    });
-
-    return {
-      data: {
-        transactions,
-      },
-    };
   }
 
   async getInfo(): Promise<GetInfoResponse> {
diff --git a/src/extension/background-script/connectors/connector.interface.ts b/src/extension/background-script/connectors/connector.interface.ts
index 5213474c4a..1b96f70630 100644
--- a/src/extension/background-script/connectors/connector.interface.ts
+++ b/src/extension/background-script/connectors/connector.interface.ts
@@ -17,18 +17,19 @@ interface Route {
   total_fees: number;
 }
 
-export interface ConnectorInvoice {
+export interface ConnectorTransaction {
   custom_records?: {
     "696969"?: string;
     "7629169"?: string;
     "5482373484"?: string;
   } & Record<string, string>;
   id: string;
-  memo: string;
+  memo?: string;
   preimage: string;
+  payment_hash?: string;
   settled: boolean;
   settleDate: number;
-  totalAmount: string;
+  totalAmount: number;
   type: "received" | "sent";
 }
 
@@ -57,15 +58,22 @@ export type GetBalanceResponse = {
 
 export type GetInvoicesResponse = {
   data: {
-    invoices: ConnectorInvoice[];
+    invoices: ConnectorTransaction[];
   };
 };
 
 export type GetTransactionsResponse = {
   data: {
-    transactions: ConnectorInvoice[];
+    transactions: ConnectorTransaction[];
+  };
+};
+
+export type GetPaymentsResponse = {
+  data: {
+    payments: ConnectorTransaction[];
   };
 };
+
 export type SendPaymentResponse = {
   data: {
     preimage: string;
diff --git a/src/extension/background-script/connectors/eclair.ts b/src/extension/background-script/connectors/eclair.ts
index ca0c1921f6..e3758a055f 100644
--- a/src/extension/background-script/connectors/eclair.ts
+++ b/src/extension/background-script/connectors/eclair.ts
@@ -5,7 +5,7 @@ import { Account } from "~/types";
 import Connector, {
   CheckPaymentArgs,
   CheckPaymentResponse,
-  ConnectorInvoice,
+  ConnectorTransaction,
   ConnectPeerResponse,
   GetBalanceResponse,
   GetInfoResponse,
@@ -76,7 +76,7 @@ class Eclair implements Connector {
 
   async getInvoices(): Promise<GetInvoicesResponse> {
     const response = await this.request("/listinvoices");
-    const invoices: ConnectorInvoice[] = response
+    const invoices: ConnectorTransaction[] = response
       .map(
         (invoice: {
           paymentHash: string;
@@ -85,6 +85,7 @@ class Eclair implements Connector {
           amount: number;
         }) => ({
           id: invoice.paymentHash,
+          payment_hash: invoice.paymentHash,
           memo: invoice.description,
           settled: true,
           settleDate: invoice.timestamp * 1000,
@@ -92,7 +93,7 @@ class Eclair implements Connector {
           type: "received",
         })
       )
-      .sort((a: ConnectorInvoice, b: ConnectorInvoice) => {
+      .sort((a: ConnectorTransaction, b: ConnectorTransaction) => {
         return b.settleDate - a.settleDate;
       });
     return {
@@ -104,7 +105,7 @@ class Eclair implements Connector {
 
   async getTransactions(): Promise<GetTransactionsResponse> {
     console.error(
-      `Not yet supported with the currently used account: ${this.constructor.name}`
+      `getTransactions() is not yet supported with the currently used account: ${this.constructor.name}`
     );
     return { data: { transactions: [] } };
   }
diff --git a/src/extension/background-script/connectors/galoy.ts b/src/extension/background-script/connectors/galoy.ts
index b8c13a0a8e..340ef431e0 100644
--- a/src/extension/background-script/connectors/galoy.ts
+++ b/src/extension/background-script/connectors/galoy.ts
@@ -93,14 +93,14 @@ class Galoy implements Connector {
   // not yet implemented
   async getInvoices(): Promise<GetInvoicesResponse> {
     console.error(
-      `Not yet supported with the currently used account: ${this.constructor.name}`
+      `getInvoices() is not yet supported with the currently used account: ${this.constructor.name}`
     );
     return { data: { invoices: [] } };
   }
 
   async getTransactions(): Promise<GetTransactionsResponse> {
     console.error(
-      `Not yet supported with the currently used account: ${this.constructor.name}`
+      `getTransactions() is not yet supported with the currently used account: ${this.constructor.name}`
     );
     return { data: { transactions: [] } };
   }
diff --git a/src/extension/background-script/connectors/kollider.ts b/src/extension/background-script/connectors/kollider.ts
index 01f519ba83..85e9e2bf66 100644
--- a/src/extension/background-script/connectors/kollider.ts
+++ b/src/extension/background-script/connectors/kollider.ts
@@ -11,7 +11,7 @@ import { Account } from "~/types";
 import Connector, {
   CheckPaymentArgs,
   CheckPaymentResponse,
-  ConnectorInvoice,
+  ConnectorTransaction,
   ConnectPeerResponse,
   GetBalanceResponse,
   GetInfoResponse,
@@ -109,17 +109,18 @@ export default class Kollider implements Connector {
       }[]
     >("GET", "/getuserinvoices", undefined);
 
-    const invoices: ConnectorInvoice[] = data
+    const invoices: ConnectorTransaction[] = data
       .filter((i) => i.incoming)
       .filter((i) => i.account_id === this.currentAccountId)
       .map(
-        (invoice, index): ConnectorInvoice => ({
+        (invoice, index): ConnectorTransaction => ({
           id: `${invoice.payment_hash}-${index}`,
+          payment_hash: invoice.payment_hash,
           memo: invoice.reference,
           preimage: "", // kollider doesn't support preimage (yet)
           settled: invoice.settled,
           settleDate: invoice.settled_date,
-          totalAmount: `${invoice.value}`,
+          totalAmount: invoice.value,
           type: "received",
         })
       )
@@ -136,7 +137,7 @@ export default class Kollider implements Connector {
 
   async getTransactions(): Promise<GetTransactionsResponse> {
     console.error(
-      `Not yet supported with the currently used account: ${this.constructor.name}`
+      `getTransactions() is not yet supported with the currently used account: ${this.constructor.name}`
     );
     return { data: { transactions: [] } };
   }
diff --git a/src/extension/background-script/connectors/lnbits.ts b/src/extension/background-script/connectors/lnbits.ts
index cd6640ab23..e325389daa 100644
--- a/src/extension/background-script/connectors/lnbits.ts
+++ b/src/extension/background-script/connectors/lnbits.ts
@@ -9,7 +9,7 @@ import state from "../state";
 import Connector, {
   CheckPaymentArgs,
   CheckPaymentResponse,
-  ConnectorInvoice,
+  ConnectorTransaction,
   ConnectPeerResponse,
   GetBalanceResponse,
   GetInfoResponse,
@@ -124,16 +124,17 @@ class LnBits implements Connector {
           webhook_status: string;
         }[]
       ) => {
-        const invoices: ConnectorInvoice[] = data
+        const invoices: ConnectorTransaction[] = data
           .filter((invoice) => invoice.amount > 0)
-          .map((invoice, index): ConnectorInvoice => {
+          .map((invoice, index): ConnectorTransaction => {
             return {
               id: `${invoice.checking_id}-${index}`,
               memo: invoice.memo,
               preimage: invoice.preimage,
+              payment_hash: invoice.payment_hash,
               settled: !invoice.pending,
               settleDate: invoice.time * 1000,
-              totalAmount: `${Math.floor(invoice.amount / 1000)}`,
+              totalAmount: Math.floor(invoice.amount / 1000),
               type: "received",
             };
           });
@@ -170,15 +171,20 @@ class LnBits implements Connector {
           webhook_status: string;
         }[]
       ) => {
-        const transactions: ConnectorInvoice[] = data.map(
-          (transaction, index): ConnectorInvoice => {
+        const transactions: ConnectorTransaction[] = data.map(
+          (transaction, index): ConnectorTransaction => {
             return {
               id: `${transaction.checking_id}-${index}`,
               memo: transaction.memo,
-              preimage: transaction.preimage,
+              preimage:
+                transaction.preimage !=
+                "0000000000000000000000000000000000000000000000000000000000000000"
+                  ? transaction.preimage
+                  : "",
+              payment_hash: transaction.payment_hash,
               settled: !transaction.pending,
               settleDate: transaction.time * 1000,
-              totalAmount: `${Math.abs(Math.floor(transaction.amount / 1000))}`,
+              totalAmount: Math.abs(Math.floor(transaction.amount / 1000)),
               type: transaction.amount > 0 ? "received" : "sent",
             };
           }
diff --git a/src/extension/background-script/connectors/lnc.ts b/src/extension/background-script/connectors/lnc.ts
index 554768428e..77b6ea1d9b 100644
--- a/src/extension/background-script/connectors/lnc.ts
+++ b/src/extension/background-script/connectors/lnc.ts
@@ -14,7 +14,7 @@ import state from "../state";
 import Connector, {
   CheckPaymentArgs,
   CheckPaymentResponse,
-  ConnectorInvoice,
+  ConnectorTransaction,
   ConnectPeerResponse,
   flattenRequestMethods,
   GetBalanceResponse,
@@ -248,8 +248,8 @@ class Lnc implements Connector {
     this.checkConnection();
     const data = await this.lnc.lnd.lightning.ListInvoices({ reversed: true });
 
-    const invoices: ConnectorInvoice[] = data.invoices
-      .map((invoice: FixMe, index: number): ConnectorInvoice => {
+    const invoices: ConnectorTransaction[] = data.invoices
+      .map((invoice: FixMe, index: number): ConnectorTransaction => {
         const custom_records =
           invoice.htlcs[0] && invoice.htlcs[0].customRecords;
 
@@ -274,18 +274,33 @@ class Lnc implements Connector {
   }
 
   async getTransactions(): Promise<GetTransactionsResponse> {
-    let index = 100;
     const incomingInvoices = await this.getInvoices();
+    const outgoingInvoices = await this.getPayments();
 
+    const transactions: ConnectorTransaction[] = [
+      ...incomingInvoices.data.invoices,
+      ...outgoingInvoices,
+    ].sort((a, b) => {
+      return b.settleDate - a.settleDate;
+    });
+
+    return {
+      data: {
+        transactions,
+      },
+    };
+  }
+
+  private async getPayments() {
     const outgoingInvoicesResponse = await this.lnc.lnd.lightning.ListPayments({
       reversed: true,
       max_payments: 100,
       include_incomplete: false,
     });
 
-    const outgoingInvoices: ConnectorInvoice[] =
+    const outgoingInvoices: ConnectorTransaction[] =
       outgoingInvoicesResponse.payments.map(
-        (payment: FixMe, arrayIndex: number): ConnectorInvoice => {
+        (payment: FixMe, index: number): ConnectorTransaction => {
           let memo = "Sent";
           if (payment.payment_request) {
             memo = (
@@ -296,7 +311,7 @@ class Lnc implements Connector {
             ).toString();
           }
           return {
-            id: `${payment.payment_request}-${index++}`,
+            id: `${payment.payment_request}-${index}`,
             memo: memo,
             preimage: payment.payment_preimage,
             settled: true,
@@ -306,19 +321,7 @@ class Lnc implements Connector {
           };
         }
       );
-
-    const transactions: ConnectorInvoice[] = [
-      ...incomingInvoices.data.invoices,
-      ...outgoingInvoices,
-    ].sort((a, b) => {
-      return b.settleDate - a.settleDate;
-    });
-
-    return {
-      data: {
-        transactions,
-      },
-    };
+    return outgoingInvoices;
   }
 
   // not yet implemented
diff --git a/src/extension/background-script/connectors/lnd.ts b/src/extension/background-script/connectors/lnd.ts
index d0953b2291..d830001eac 100644
--- a/src/extension/background-script/connectors/lnd.ts
+++ b/src/extension/background-script/connectors/lnd.ts
@@ -10,7 +10,7 @@ import { Account } from "~/types";
 import Connector, {
   CheckPaymentArgs,
   CheckPaymentResponse,
-  ConnectorInvoice,
+  ConnectorTransaction,
   ConnectPeerArgs,
   ConnectPeerResponse,
   flattenRequestMethods,
@@ -415,7 +415,7 @@ class Lnd implements Connector {
           resolve_time: string;
           expiry_height: number;
           state: "SETTLED";
-          custom_records: ConnectorInvoice["custom_records"];
+          custom_records: ConnectorTransaction["custom_records"];
           mpp_total_amt_msat: string;
           amp?: unknown;
         }[];
@@ -438,20 +438,20 @@ class Lnd implements Connector {
       first_index_offset: string;
     }>("GET", "/v1/invoices", { reversed: true });
 
-    const invoices: ConnectorInvoice[] = data.invoices
-      .map((invoice, index): ConnectorInvoice => {
+    const invoices: ConnectorTransaction[] = data.invoices
+      .map((invoice, index): ConnectorTransaction => {
         const custom_records =
           invoice.htlcs[0] && invoice.htlcs[0].custom_records;
 
         return {
-          custom_records,
           id: `${invoice.payment_request}-${index}`,
           memo: invoice.memo,
           preimage: invoice.r_preimage,
           settled: invoice.settled,
           settleDate: parseInt(invoice.settle_date) * 1000,
-          totalAmount: invoice.value,
+          totalAmount: parseInt(invoice.value),
           type: "received",
+          custom_records,
         };
       })
       .sort((a, b) => {
@@ -466,16 +466,30 @@ class Lnd implements Connector {
   }
 
   async getTransactions(): Promise<GetTransactionsResponse> {
-    let index = 100;
-    // incoming invoices return 0-99 entries by default
-    const incomingInvoices = await this.getInvoices();
+    const invoices = await this.getInvoices();
+    const payments = await this.getPayments();
+
+    const transactions: ConnectorTransaction[] = [
+      ...invoices.data.invoices,
+      ...payments,
+    ].sort((a, b) => {
+      return b.settleDate - a.settleDate;
+    });
+
+    return {
+      data: {
+        transactions,
+      },
+    };
+  }
 
-    const outgoingInvoicesResponse = await this.request<{
+  private async getPayments() {
+    const lndPayments = await this.request<{
       payments: {
         payment_hash: string;
         payment_preimage: string;
-        value_sat: string;
-        value_msat: string;
+        value_sat: number;
+        value_msat: number;
         payment_request: string;
         status: string;
         fee_sat: string;
@@ -495,39 +509,30 @@ class Lnd implements Connector {
       include_incomplete: false,
     });
 
-    const outgoingInvoices: ConnectorInvoice[] =
-      outgoingInvoicesResponse.payments.map((payment, _): ConnectorInvoice => {
-        let memo = "Sent";
+    const payments: ConnectorTransaction[] = lndPayments.payments.map(
+      (payment, index): ConnectorTransaction => {
+        let description: string | undefined;
         if (payment.payment_request) {
-          memo = (
-            lightningPayReq
-              .decode(payment.payment_request)
-              .tags.find((tag) => tag.tagName === "description")?.data || "Sent"
-          ).toString();
+          description = lightningPayReq
+            .decode(payment.payment_request)
+            .tags.find((tag) => tag.tagName === "description")
+            ?.data.toString();
         }
+
         return {
           id: `${payment.payment_request}-${index++}`,
-          memo: memo,
+          memo: description,
           preimage: payment.payment_preimage,
+          payment_hash: payment.payment_hash,
           settled: true,
           settleDate: parseInt(payment.creation_date) * 1000,
           totalAmount: payment.value_sat,
           type: "sent",
         };
-      });
-
-    const transactions: ConnectorInvoice[] = [
-      ...incomingInvoices.data.invoices,
-      ...outgoingInvoices,
-    ].sort((a, b) => {
-      return b.settleDate - a.settleDate;
-    });
+      }
+    );
 
-    return {
-      data: {
-        transactions,
-      },
-    };
+    return payments;
   }
 
   protected async request<Type>(
diff --git a/src/extension/background-script/connectors/lndhub.ts b/src/extension/background-script/connectors/lndhub.ts
index 3affc830c6..18521d4583 100644
--- a/src/extension/background-script/connectors/lndhub.ts
+++ b/src/extension/background-script/connectors/lndhub.ts
@@ -14,7 +14,7 @@ import state from "../state";
 import Connector, {
   CheckPaymentArgs,
   CheckPaymentResponse,
-  ConnectorInvoice,
+  ConnectorTransaction,
   ConnectPeerResponse,
   GetBalanceResponse,
   GetInfoResponse,
@@ -94,7 +94,7 @@ export default class LndHub implements Connector {
           data: number[];
         };
         amt: number;
-        custom_records: ConnectorInvoice["custom_records"];
+        custom_records: ConnectorTransaction["custom_records"];
         description: string;
         expire_time: number;
         ispaid: boolean;
@@ -107,16 +107,17 @@ export default class LndHub implements Connector {
       }[]
     >("GET", "/getuserinvoices", undefined);
 
-    const invoices: ConnectorInvoice[] = data
+    const invoices: ConnectorTransaction[] = data
       .map(
-        (invoice, index): ConnectorInvoice => ({
+        (invoice, index): ConnectorTransaction => ({
           custom_records: invoice.custom_records,
           id: `${invoice.payment_request}-${index}`,
           memo: invoice.description,
           preimage: "", // lndhub doesn't support preimage (yet)
+          payment_hash: invoice.payment_hash,
           settled: invoice.ispaid,
           settleDate: invoice.timestamp * 1000,
-          totalAmount: `${invoice.amt}`,
+          totalAmount: invoice.amt,
           type: "received",
         })
       )
@@ -133,9 +134,26 @@ export default class LndHub implements Connector {
 
   async getTransactions(): Promise<GetTransactionsResponse> {
     const incomingInvoices = await this.getInvoices();
-    const outgoingInvoicesResponse = await this.request<
+    const outgoingInvoices = await this.getPayments();
+
+    const transactions: ConnectorTransaction[] = [
+      ...incomingInvoices.data.invoices,
+      ...outgoingInvoices,
+    ].sort((a, b) => {
+      return b.settleDate - a.settleDate;
+    });
+
+    return {
+      data: {
+        transactions,
+      },
+    };
+  }
+
+  private async getPayments(): Promise<ConnectorTransaction[]> {
+    const lndhubPayments = await this.request<
       {
-        custom_records: ConnectorInvoice["custom_records"];
+        custom_records: ConnectorTransaction["custom_records"];
         fee: string;
         keysend: boolean;
         memo: string;
@@ -151,31 +169,20 @@ export default class LndHub implements Connector {
       }[]
     >("GET", "/gettxs", { limit: 100 });
 
-    // /gettxs endpoint returns successfull outgoing  transactions bydefault
-    const outgoingInvoices: ConnectorInvoice[] = outgoingInvoicesResponse.map(
-      (transaction, index): ConnectorInvoice => ({
+    // gettxs endpoint returns successfull outgoing  transactions by default
+    const payments: ConnectorTransaction[] = lndhubPayments.map(
+      (transaction, index): ConnectorTransaction => ({
         id: `${index}`,
         memo: transaction.memo,
         preimage: transaction.payment_preimage,
+        payment_hash: transaction.payment_hash,
         settled: true,
         settleDate: transaction.timestamp * 1000,
-        totalAmount: `${transaction.value}`,
+        totalAmount: transaction.value,
         type: "sent",
       })
     );
-
-    const transactions: ConnectorInvoice[] = [
-      ...incomingInvoices.data.invoices,
-      ...outgoingInvoices,
-    ].sort((a, b) => {
-      return b.settleDate - a.settleDate;
-    });
-
-    return {
-      data: {
-        transactions,
-      },
-    };
+    return payments;
   }
 
   async getInfo(): Promise<GetInfoResponse> {
diff --git a/src/types.ts b/src/types.ts
index 06e30186cc..a97e8cc8f2 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -4,7 +4,7 @@ import { Runtime } from "webextension-polyfill";
 import { ACCOUNT_CURRENCIES, CURRENCIES, TIPS } from "~/common/constants";
 import connectors from "~/extension/background-script/connectors";
 import {
-  ConnectorInvoice,
+  ConnectorTransaction,
   SendPaymentResponse,
   WebLNNode,
 } from "~/extension/background-script/connectors/connector.interface";
@@ -890,14 +890,15 @@ export type SupportedExchanges = "alby" | "coindesk" | "yadio";
 
 export interface Invoice {
   id: string;
-  memo: string;
+  memo?: string;
   type: "received" | "sent";
   settled: boolean;
   settleDate: number;
-  totalAmount: string;
+  totalAmount: number;
   totalAmountFiat?: string;
   preimage: string;
-  custom_records?: ConnectorInvoice["custom_records"];
+  paymentHash?: string;
+  custom_records?: ConnectorTransaction["custom_records"];
   boostagram?: {
     app_name: string;
     name: string;

From 8d380d89d282b152ece7df43ab937434f1098410 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Tue, 31 Oct 2023 16:59:59 +0100
Subject: [PATCH 34/40] fix: reset showMore when transaction changes to avoid
 flicker

---
 src/app/components/TransactionsTable/TransactionModal.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app/components/TransactionsTable/TransactionModal.tsx b/src/app/components/TransactionsTable/TransactionModal.tsx
index 47f64ccf52..16ea21a26a 100644
--- a/src/app/components/TransactionsTable/TransactionModal.tsx
+++ b/src/app/components/TransactionsTable/TransactionModal.tsx
@@ -7,7 +7,7 @@ import {
   ArrowUpIcon,
 } from "@bitcoin-design/bitcoin-icons-react/outline";
 import dayjs from "dayjs";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Hyperlink from "~/app/components/Hyperlink";
 import Modal from "~/app/components/Modal";
@@ -37,6 +37,10 @@ export default function TransactionModal({
     setShowMoreFields(!showMoreFields);
   }
 
+  useEffect(() => {
+    setShowMoreFields(false);
+  }, [transaction]);
+
   function getTransactionType(tx: Transaction): "incoming" | "outgoing" {
     return [tx.type && "sent", "sending"].includes(tx.type)
       ? "outgoing"
@@ -48,7 +52,6 @@ export default function TransactionModal({
       isOpen={isOpen}
       close={() => {
         onClose();
-        setShowMoreFields(false);
       }}
       contentLabel={"Transactions"}
     >

From 6c784cc64f9edb45e3d1b0d941b1efd544736dd8 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Wed, 1 Nov 2023 11:43:15 +0530
Subject: [PATCH 35/40] chore: cleaning up

---
 .../components/TransactionsTable/TransactionModal.tsx  | 10 +---------
 src/app/components/TransactionsTable/index.tsx         |  4 +---
 src/app/hooks/useTransactions.ts                       |  1 -
 src/types.ts                                           |  2 +-
 4 files changed, 3 insertions(+), 14 deletions(-)

diff --git a/src/app/components/TransactionsTable/TransactionModal.tsx b/src/app/components/TransactionsTable/TransactionModal.tsx
index 16ea21a26a..af3c4d7fe0 100644
--- a/src/app/components/TransactionsTable/TransactionModal.tsx
+++ b/src/app/components/TransactionsTable/TransactionModal.tsx
@@ -42,9 +42,7 @@ export default function TransactionModal({
   }, [transaction]);
 
   function getTransactionType(tx: Transaction): "incoming" | "outgoing" {
-    return [tx.type && "sent", "sending"].includes(tx.type)
-      ? "outgoing"
-      : "incoming";
+    return [tx.type && "sent"].includes(tx.type) ? "outgoing" : "incoming";
   }
 
   return (
@@ -132,12 +130,6 @@ export default function TransactionModal({
               content={transaction.boostagram.episode}
             />
           )}
-          {transaction.description && (
-            <TransactionDetailRow
-              title={tCommon("description")}
-              content={transaction.description}
-            />
-          )}
           {(transaction.preimage || transaction.paymentHash) && (
             <>
               <div className="flex justify-center mt-4">
diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
index c3c522ed8c..53382dcbd7 100644
--- a/src/app/components/TransactionsTable/index.tsx
+++ b/src/app/components/TransactionsTable/index.tsx
@@ -36,9 +36,7 @@ export default function TransactionsTable({
   }
 
   function getTransactionType(tx: Transaction): "incoming" | "outgoing" {
-    return [tx.type && "sent", "sending"].includes(tx.type)
-      ? "outgoing"
-      : "incoming";
+    return [tx.type && "sent"].includes(tx.type) ? "outgoing" : "incoming";
   }
 
   return (
diff --git a/src/app/hooks/useTransactions.ts b/src/app/hooks/useTransactions.ts
index ac1ad7eb83..da90e595b3 100644
--- a/src/app/hooks/useTransactions.ts
+++ b/src/app/hooks/useTransactions.ts
@@ -22,7 +22,6 @@ export const useTransactions = () => {
           (transaction) => ({
             ...transaction,
             title: transaction.memo,
-            description: transaction.memo,
             date: dayjs(transaction.settleDate).fromNow(),
             timestamp: transaction.settleDate,
           })
diff --git a/src/types.ts b/src/types.ts
index a97e8cc8f2..4972c9c9b8 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -728,7 +728,7 @@ export type Transaction = {
   totalAmount: Allowance["payments"][number]["totalAmount"];
   totalAmountFiat?: string;
   totalFees?: Allowance["payments"][number]["totalFees"];
-  type?: "sent" | "sending" | "received";
+  type?: "sent" | "received";
   value?: string;
   publisherLink?: string; // either the invoice URL if on PublisherSingleView, or the internal link to Publisher
 };

From 7984fd56dc5f676ad7cbc0cae825b6c0fb2478f6 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Wed, 1 Nov 2023 18:57:42 +0530
Subject: [PATCH 36/40] feat: get rid of invoice type remove exposure of
 getInvoices via api fix broken show more button for lndhub signed-off-by:
 pavan joshi <pavanj914@gmail.com>

---
 src/common/lib/api.ts                         |  4 --
 src/common/lib/utils.ts                       | 10 ++---
 .../background-script/actions/ln/index.ts     |  3 +-
 .../background-script/actions/ln/invoices.ts  | 38 -------------------
 .../actions/ln/transactions.ts                |  5 ++-
 .../connectors/connector.interface.ts         |  1 -
 .../background-script/connectors/lndhub.ts    |  9 ++++-
 src/extension/background-script/router.ts     |  1 -
 src/types.ts                                  |  4 --
 9 files changed, 14 insertions(+), 61 deletions(-)
 delete mode 100644 src/extension/background-script/actions/ln/invoices.ts

diff --git a/src/common/lib/api.ts b/src/common/lib/api.ts
index d37ff43c68..2bd9bd300c 100644
--- a/src/common/lib/api.ts
+++ b/src/common/lib/api.ts
@@ -25,7 +25,6 @@ import type {
   LnurlAuthResponse,
   MessageAccountEdit,
   MessageAccountValidate,
-  MessageInvoices,
   MessageLnurlAuth,
   MessageSettingsSet,
   MessageTransactions,
@@ -171,8 +170,6 @@ export const unlock = (password: string) =>
   msg.request<UnlockRes>("unlock", { password });
 export const getBlocklist = (host: string) =>
   msg.request<BlocklistRes>("getBlocklist", { host });
-export const getInvoices = (options?: MessageInvoices["args"]) =>
-  msg.request<{ invoices: Invoice[] }>("getInvoices", options);
 export const getTransactions = (options?: MessageTransactions["args"]) =>
   msg.request<{ transactions: Invoice[] }>("getTransactions", options);
 export const lnurlAuth = (
@@ -298,7 +295,6 @@ export default {
   removeAccount,
   unlock,
   getBlocklist,
-  getInvoices,
   getTransactions,
   lnurlAuth,
   getCurrencyRate,
diff --git a/src/common/lib/utils.ts b/src/common/lib/utils.ts
index 53ef50922f..38ae048347 100644
--- a/src/common/lib/utils.ts
+++ b/src/common/lib/utils.ts
@@ -1,12 +1,8 @@
 import browser, { Runtime } from "webextension-polyfill";
 import { ABORT_PROMPT_ERROR } from "~/common/constants";
 import { getPosition as getWindowPosition } from "~/common/utils/window";
-import type {
-  DeferredPromise,
-  Invoice,
-  OriginData,
-  OriginDataInternal,
-} from "~/types";
+import { ConnectorTransaction } from "~/extension/background-script/connectors/connector.interface";
+import type { DeferredPromise, OriginData, OriginDataInternal } from "~/types";
 
 const utils = {
   base64ToHex: (str: string) => {
@@ -173,7 +169,7 @@ const utils = {
     });
   },
   getBoostagramFromInvoiceCustomRecords: (
-    custom_records: Invoice["custom_records"] | undefined
+    custom_records: ConnectorTransaction["custom_records"] | undefined
   ) => {
     try {
       let boostagramDecoded: string | undefined;
diff --git a/src/extension/background-script/actions/ln/index.ts b/src/extension/background-script/actions/ln/index.ts
index 60dd1d157e..072d835eb0 100644
--- a/src/extension/background-script/actions/ln/index.ts
+++ b/src/extension/background-script/actions/ln/index.ts
@@ -1,7 +1,7 @@
 import checkPayment from "./checkPayment";
 import connectPeer from "./connectPeer";
 import getInfo from "./getInfo";
-import invoices from "./invoices";
+
 import keysend from "./keysend";
 import makeInvoice from "./makeInvoice";
 import request from "./request";
@@ -14,7 +14,6 @@ export {
   checkPayment,
   connectPeer,
   getInfo,
-  invoices,
   keysend,
   makeInvoice,
   request,
diff --git a/src/extension/background-script/actions/ln/invoices.ts b/src/extension/background-script/actions/ln/invoices.ts
deleted file mode 100644
index 9f52557a28..0000000000
--- a/src/extension/background-script/actions/ln/invoices.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import utils from "~/common/lib/utils";
-import state from "~/extension/background-script/state";
-import type { Invoice, MessageInvoices } from "~/types";
-
-const invoices = async (message: MessageInvoices) => {
-  const isSettled = message.args.isSettled;
-  const limit = message.args.limit;
-
-  const connector = await state.getState().getConnector();
-  try {
-    const result = await connector.getInvoices();
-    let invoices: Invoice[] = result.data.invoices
-      .filter((invoice) => (isSettled ? invoice.settled : !invoice.settled))
-      .map((invoice) => {
-        const boostagram = utils.getBoostagramFromInvoiceCustomRecords(
-          invoice.custom_records
-        );
-        return { ...invoice, boostagram };
-      });
-
-    if (limit) {
-      invoices = invoices.slice(0, limit);
-    }
-
-    return {
-      data: {
-        invoices,
-      },
-    };
-  } catch (e) {
-    console.error(e);
-    if (e instanceof Error) {
-      return { error: e.message };
-    }
-  }
-};
-
-export default invoices;
diff --git a/src/extension/background-script/actions/ln/transactions.ts b/src/extension/background-script/actions/ln/transactions.ts
index 33dc9fc7cd..e54af91680 100644
--- a/src/extension/background-script/actions/ln/transactions.ts
+++ b/src/extension/background-script/actions/ln/transactions.ts
@@ -1,6 +1,7 @@
 import utils from "~/common/lib/utils";
+import { ConnectorTransaction } from "~/extension/background-script/connectors/connector.interface";
 import state from "~/extension/background-script/state";
-import type { Invoice, MessageTransactions } from "~/types";
+import type { MessageTransactions } from "~/types";
 
 const transactions = async (message: MessageTransactions) => {
   const isSettled = message.args.isSettled;
@@ -10,7 +11,7 @@ const transactions = async (message: MessageTransactions) => {
   try {
     const result = await connector.getTransactions();
 
-    let transactions: Invoice[] = result.data.transactions
+    let transactions: ConnectorTransaction[] = result.data.transactions
       .filter((transaction) =>
         isSettled ? transaction.settled : !transaction.settled
       )
diff --git a/src/extension/background-script/connectors/connector.interface.ts b/src/extension/background-script/connectors/connector.interface.ts
index 1b96f70630..75a256431b 100644
--- a/src/extension/background-script/connectors/connector.interface.ts
+++ b/src/extension/background-script/connectors/connector.interface.ts
@@ -137,7 +137,6 @@ export default interface Connector {
   unload(): Promise<void>;
   getInfo(): Promise<GetInfoResponse>;
   getBalance(): Promise<GetBalanceResponse>;
-  getInvoices(): Promise<GetInvoicesResponse>;
   getTransactions(): Promise<GetTransactionsResponse>;
   makeInvoice(args: MakeInvoiceArgs): Promise<MakeInvoiceResponse>;
   sendPayment(args: SendPaymentArgs): Promise<SendPaymentResponse>;
diff --git a/src/extension/background-script/connectors/lndhub.ts b/src/extension/background-script/connectors/lndhub.ts
index 18521d4583..ddeec17d71 100644
--- a/src/extension/background-script/connectors/lndhub.ts
+++ b/src/extension/background-script/connectors/lndhub.ts
@@ -157,7 +157,10 @@ export default class LndHub implements Connector {
         fee: string;
         keysend: boolean;
         memo: string;
-        payment_hash: string;
+        payment_hash: {
+          type: string;
+          data: ArrayBuffer;
+        };
         payment_preimage: string;
         r_hash: {
           type: "Buffer";
@@ -175,7 +178,9 @@ export default class LndHub implements Connector {
         id: `${index}`,
         memo: transaction.memo,
         preimage: transaction.payment_preimage,
-        payment_hash: transaction.payment_hash,
+        payment_hash: Buffer.from(transaction.payment_hash.data).toString(
+          "hex"
+        ),
         settled: true,
         settleDate: transaction.timestamp * 1000,
         totalAmount: transaction.value,
diff --git a/src/extension/background-script/router.ts b/src/extension/background-script/router.ts
index b64fa8522d..c9e5d177ab 100644
--- a/src/extension/background-script/router.ts
+++ b/src/extension/background-script/router.ts
@@ -30,7 +30,6 @@ const routes = {
   lock: accounts.lock,
   unlock: accounts.unlock,
   getInfo: ln.getInfo,
-  getInvoices: ln.invoices,
   getTransactions: ln.transactions,
   sendPayment: ln.sendPayment,
   sendPaymentAsync: ln.sendPaymentAsync,
diff --git a/src/types.ts b/src/types.ts
index 4972c9c9b8..db46e2b765 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -342,10 +342,6 @@ export interface MessageAllowanceList extends MessageDefault {
   action: "listAllowances";
 }
 
-export interface MessageInvoices extends Omit<MessageDefault, "args"> {
-  args: { limit?: number; isSettled?: boolean };
-  action: "getInvoices";
-}
 export interface MessageTransactions extends Omit<MessageDefault, "args"> {
   args: { limit?: number; isSettled?: boolean };
   action: "getTransactions";

From ab520d8efa6abf8dab5bedf26276fd8363d2b8d3 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Mon, 6 Nov 2023 18:48:32 +0530
Subject: [PATCH 37/40] feat: rename getTransactions action and message types

---
 src/common/lib/api.ts                                       | 4 ++--
 .../actions/ln/{transactions.ts => getTransactions.ts}      | 6 +++---
 src/extension/background-script/actions/ln/index.ts         | 4 ++--
 src/extension/background-script/router.ts                   | 2 +-
 src/types.ts                                                | 2 +-
 5 files changed, 9 insertions(+), 9 deletions(-)
 rename src/extension/background-script/actions/ln/{transactions.ts => getTransactions.ts} (88%)

diff --git a/src/common/lib/api.ts b/src/common/lib/api.ts
index 2bd9bd300c..19ddfd1bfe 100644
--- a/src/common/lib/api.ts
+++ b/src/common/lib/api.ts
@@ -25,9 +25,9 @@ import type {
   LnurlAuthResponse,
   MessageAccountEdit,
   MessageAccountValidate,
+  MessageGetTransactions,
   MessageLnurlAuth,
   MessageSettingsSet,
-  MessageTransactions,
   NodeInfo,
   OriginData,
   PsbtPreview,
@@ -170,7 +170,7 @@ export const unlock = (password: string) =>
   msg.request<UnlockRes>("unlock", { password });
 export const getBlocklist = (host: string) =>
   msg.request<BlocklistRes>("getBlocklist", { host });
-export const getTransactions = (options?: MessageTransactions["args"]) =>
+export const getTransactions = (options?: MessageGetTransactions["args"]) =>
   msg.request<{ transactions: Invoice[] }>("getTransactions", options);
 export const lnurlAuth = (
   options: MessageLnurlAuth["args"]
diff --git a/src/extension/background-script/actions/ln/transactions.ts b/src/extension/background-script/actions/ln/getTransactions.ts
similarity index 88%
rename from src/extension/background-script/actions/ln/transactions.ts
rename to src/extension/background-script/actions/ln/getTransactions.ts
index e54af91680..dac984be4e 100644
--- a/src/extension/background-script/actions/ln/transactions.ts
+++ b/src/extension/background-script/actions/ln/getTransactions.ts
@@ -1,9 +1,9 @@
 import utils from "~/common/lib/utils";
 import { ConnectorTransaction } from "~/extension/background-script/connectors/connector.interface";
 import state from "~/extension/background-script/state";
-import type { MessageTransactions } from "~/types";
+import { MessageGetTransactions } from "~/types";
 
-const transactions = async (message: MessageTransactions) => {
+const getTransactions = async (message: MessageGetTransactions) => {
   const isSettled = message.args.isSettled;
   const limit = message.args.limit;
 
@@ -43,4 +43,4 @@ const transactions = async (message: MessageTransactions) => {
   }
 };
 
-export default transactions;
+export default getTransactions;
diff --git a/src/extension/background-script/actions/ln/index.ts b/src/extension/background-script/actions/ln/index.ts
index 072d835eb0..39a9cee671 100644
--- a/src/extension/background-script/actions/ln/index.ts
+++ b/src/extension/background-script/actions/ln/index.ts
@@ -2,23 +2,23 @@ import checkPayment from "./checkPayment";
 import connectPeer from "./connectPeer";
 import getInfo from "./getInfo";
 
+import getTransactions from "./getTransactions";
 import keysend from "./keysend";
 import makeInvoice from "./makeInvoice";
 import request from "./request";
 import sendPayment from "./sendPayment";
 import sendPaymentAsync from "./sendPaymentAsync";
 import signMessage from "./signMessage";
-import transactions from "./transactions";
 
 export {
   checkPayment,
   connectPeer,
   getInfo,
+  getTransactions,
   keysend,
   makeInvoice,
   request,
   sendPayment,
   sendPaymentAsync,
   signMessage,
-  transactions,
 };
diff --git a/src/extension/background-script/router.ts b/src/extension/background-script/router.ts
index c9e5d177ab..688d017536 100644
--- a/src/extension/background-script/router.ts
+++ b/src/extension/background-script/router.ts
@@ -30,7 +30,7 @@ const routes = {
   lock: accounts.lock,
   unlock: accounts.unlock,
   getInfo: ln.getInfo,
-  getTransactions: ln.transactions,
+  getTransactions: ln.getTransactions,
   sendPayment: ln.sendPayment,
   sendPaymentAsync: ln.sendPaymentAsync,
   keysend: ln.keysend,
diff --git a/src/types.ts b/src/types.ts
index db46e2b765..aaf6f27563 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -342,7 +342,7 @@ export interface MessageAllowanceList extends MessageDefault {
   action: "listAllowances";
 }
 
-export interface MessageTransactions extends Omit<MessageDefault, "args"> {
+export interface MessageGetTransactions extends Omit<MessageDefault, "args"> {
   args: { limit?: number; isSettled?: boolean };
   action: "getTransactions";
 }

From 177acf25877015833fe6153efc3cc8081239cc11 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Mon, 6 Nov 2023 18:52:38 +0530
Subject: [PATCH 38/40] feat: filter transactions without isSettled

---
 src/app/hooks/useTransactions.ts                             | 1 -
 .../background-script/actions/ln/getTransactions.ts          | 5 +----
 src/types.ts                                                 | 2 +-
 3 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/app/hooks/useTransactions.ts b/src/app/hooks/useTransactions.ts
index da90e595b3..1d1f5cd001 100644
--- a/src/app/hooks/useTransactions.ts
+++ b/src/app/hooks/useTransactions.ts
@@ -14,7 +14,6 @@ export const useTransactions = () => {
     async (limit?: number) => {
       try {
         const getTransactionsResponse = await api.getTransactions({
-          isSettled: true,
           limit,
         });
 
diff --git a/src/extension/background-script/actions/ln/getTransactions.ts b/src/extension/background-script/actions/ln/getTransactions.ts
index dac984be4e..341014be6f 100644
--- a/src/extension/background-script/actions/ln/getTransactions.ts
+++ b/src/extension/background-script/actions/ln/getTransactions.ts
@@ -4,7 +4,6 @@ import state from "~/extension/background-script/state";
 import { MessageGetTransactions } from "~/types";
 
 const getTransactions = async (message: MessageGetTransactions) => {
-  const isSettled = message.args.isSettled;
   const limit = message.args.limit;
 
   const connector = await state.getState().getConnector();
@@ -12,9 +11,7 @@ const getTransactions = async (message: MessageGetTransactions) => {
     const result = await connector.getTransactions();
 
     let transactions: ConnectorTransaction[] = result.data.transactions
-      .filter((transaction) =>
-        isSettled ? transaction.settled : !transaction.settled
-      )
+      .filter((transaction) => transaction.settled)
       .map((transaction) => {
         const boostagram = utils.getBoostagramFromInvoiceCustomRecords(
           transaction.custom_records
diff --git a/src/types.ts b/src/types.ts
index aaf6f27563..3693e446d8 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -343,7 +343,7 @@ export interface MessageAllowanceList extends MessageDefault {
 }
 
 export interface MessageGetTransactions extends Omit<MessageDefault, "args"> {
-  args: { limit?: number; isSettled?: boolean };
+  args: { limit?: number };
   action: "getTransactions";
 }
 

From 9226f65d10300ac7be916c8d0bfff438ccbea9f0 Mon Sep 17 00:00:00 2001
From: pavanjoshi914 <pavanj914@gmail.com>
Date: Mon, 6 Nov 2023 21:56:55 +0530
Subject: [PATCH 39/40] feat: cleanup connector GetTransactions method remove
 unnecessary types at connectorlevel add proper types for internal methods
 cleanup connector getInvoices method which don't have getTransactions method

---
 src/common/utils/helpers.ts                   | 12 +++
 .../background-script/connectors/alby.ts      | 26 ------
 .../background-script/connectors/citadel.ts   | 11 ---
 .../background-script/connectors/commando.ts  | 83 ++++++++-----------
 .../connectors/connector.interface.ts         |  6 --
 .../background-script/connectors/eclair.ts    | 31 -------
 .../background-script/connectors/galoy.ts     |  9 --
 .../background-script/connectors/kollider.ts  | 51 ------------
 .../background-script/connectors/lnbits.ts    | 47 -----------
 .../background-script/connectors/lnc.ts       | 22 ++---
 .../background-script/connectors/lnd.ts       | 34 +++-----
 .../background-script/connectors/lndhub.ts    | 20 ++---
 12 files changed, 75 insertions(+), 277 deletions(-)

diff --git a/src/common/utils/helpers.ts b/src/common/utils/helpers.ts
index 732dfbc16a..f104465a2d 100644
--- a/src/common/utils/helpers.ts
+++ b/src/common/utils/helpers.ts
@@ -1,5 +1,6 @@
 import * as secp256k1 from "@noble/secp256k1";
 import { bech32 } from "bech32";
+import { ConnectorTransaction } from "~/extension/background-script/connectors/connector.interface";
 import { Sender } from "~/types";
 
 export function bech32Decode(str: string, encoding: BufferEncoding = "utf-8") {
@@ -61,3 +62,14 @@ export async function poll<T>({
 
   return new Promise(executePoll);
 }
+
+export function mergeTransactions(
+  invoices: ConnectorTransaction[],
+  payments: ConnectorTransaction[]
+): ConnectorTransaction[] {
+  const mergedTransactions = [...invoices, ...payments].sort((a, b) => {
+    return b.settleDate - a.settleDate;
+  });
+
+  return mergedTransactions;
+}
diff --git a/src/extension/background-script/connectors/alby.ts b/src/extension/background-script/connectors/alby.ts
index 64d6825018..85999bb5e9 100644
--- a/src/extension/background-script/connectors/alby.ts
+++ b/src/extension/background-script/connectors/alby.ts
@@ -19,7 +19,6 @@ import Connector, {
   ConnectPeerResponse,
   GetBalanceResponse,
   GetInfoResponse,
-  GetInvoicesResponse,
   GetTransactionsResponse,
   KeysendArgs,
   MakeInvoiceArgs,
@@ -89,31 +88,6 @@ export default class Alby implements Connector {
     throw new Error("Not yet supported with the currently used account.");
   }
 
-  async getInvoices(): Promise<GetInvoicesResponse> {
-    const incomingInvoices = (await this._request((client) =>
-      client.incomingInvoices({})
-    )) as Invoice[];
-
-    const invoices: ConnectorTransaction[] = incomingInvoices.map(
-      (invoice, index): ConnectorTransaction => ({
-        custom_records: invoice.custom_records,
-        id: `${invoice.payment_request}-${index}`,
-        payment_hash: invoice.payment_hash,
-        memo: invoice.comment || invoice.memo,
-        preimage: "", // alby wallet api doesn't support preimage (yet)
-        settled: invoice.settled,
-        settleDate: new Date(invoice.settled_at).getTime(),
-        totalAmount: invoice.amount,
-        type: "received",
-      })
-    );
-    return {
-      data: {
-        invoices,
-      },
-    };
-  }
-
   async getTransactions(): Promise<GetTransactionsResponse> {
     const invoicesResponse = (await this._request((client) =>
       client.invoices({})
diff --git a/src/extension/background-script/connectors/citadel.ts b/src/extension/background-script/connectors/citadel.ts
index e1a8ad0108..7261ef46dd 100644
--- a/src/extension/background-script/connectors/citadel.ts
+++ b/src/extension/background-script/connectors/citadel.ts
@@ -6,7 +6,6 @@ import Connector, {
   ConnectPeerResponse,
   GetBalanceResponse,
   GetInfoResponse,
-  GetInvoicesResponse,
   GetTransactionsResponse,
   KeysendArgs,
   MakeInvoiceArgs,
@@ -77,16 +76,6 @@ class CitadelConnector implements Connector {
     });
   }
 
-  // not yet implemented
-  async getInvoices(): Promise<GetInvoicesResponse> {
-    console.error(
-      `getInvoices() is not yet supported with the currently used account: ${this.constructor.name}`
-    );
-    throw new Error(
-      `${this.constructor.name}: "getInvoices" is not yet supported. Contact us if you need it.`
-    );
-  }
-
   async getTransactions(): Promise<GetTransactionsResponse> {
     console.error(
       `getTransactions() is not yet supported with the currently used account: ${this.constructor.name}`
diff --git a/src/extension/background-script/connectors/commando.ts b/src/extension/background-script/connectors/commando.ts
index a67db84b97..bb4cce861c 100644
--- a/src/extension/background-script/connectors/commando.ts
+++ b/src/extension/background-script/connectors/commando.ts
@@ -4,6 +4,7 @@ import LnMessage from "lnmessage";
 import { v4 as uuidv4 } from "uuid";
 import { Account } from "~/types";
 
+import { mergeTransactions } from "~/common/utils/helpers";
 import Connector, {
   CheckPaymentArgs,
   CheckPaymentResponse,
@@ -13,7 +14,6 @@ import Connector, {
   flattenRequestMethods,
   GetBalanceResponse,
   GetInfoResponse,
-  GetInvoicesResponse,
   GetTransactionsResponse,
   KeysendArgs,
   MakeInvoiceArgs,
@@ -214,7 +214,7 @@ export default class Commando implements Connector {
       });
   }
 
-  async getInvoices(): Promise<GetInvoicesResponse> {
+  private async getInvoices(): Promise<ConnectorTransaction[]> {
     return this.ln
       .commando({
         method: "listinvoices",
@@ -223,27 +223,20 @@ export default class Commando implements Connector {
       })
       .then((resp) => {
         const parsed = resp as CommandoListInvoicesResponse;
-        return {
-          data: {
-            invoices: parsed.invoices
-              .map(
-                (invoice, index): ConnectorTransaction => ({
-                  id: invoice.label,
-                  memo: invoice.description,
-                  settled: invoice.status === "paid",
-                  preimage: invoice.payment_preimage,
-                  payment_hash: invoice.payment_hash,
-                  settleDate: invoice.paid_at * 1000,
-                  type: "received",
-                  totalAmount: Math.floor(invoice.msatoshi / 1000),
-                })
-              )
-              .filter((invoice) => invoice.settled)
-              .sort((a, b) => {
-                return b.settleDate - a.settleDate;
-              }),
-          },
-        };
+        return parsed.invoices
+          .map(
+            (invoice, index): ConnectorTransaction => ({
+              id: invoice.label,
+              memo: invoice.description,
+              settled: invoice.status === "paid",
+              preimage: invoice.payment_preimage,
+              payment_hash: invoice.payment_hash,
+              settleDate: invoice.paid_at * 1000,
+              type: "received",
+              totalAmount: Math.floor(invoice.msatoshi / 1000),
+            })
+          )
+          .filter((invoice) => invoice.settled);
       });
   }
 
@@ -251,12 +244,10 @@ export default class Commando implements Connector {
     const incomingInvoicesResponse = await this.getInvoices();
     const outgoingInvoicesResponse = await this.getPayments();
 
-    const transactions: ConnectorTransaction[] = [
-      ...incomingInvoicesResponse.data.invoices,
-      ...outgoingInvoicesResponse.data.payments,
-    ].sort((a, b) => {
-      return b.settleDate - a.settleDate;
-    });
+    const transactions: ConnectorTransaction[] = mergeTransactions(
+      incomingInvoicesResponse,
+      outgoingInvoicesResponse
+    );
 
     return {
       data: {
@@ -265,7 +256,7 @@ export default class Commando implements Connector {
     };
   }
 
-  private async getPayments() {
+  private async getPayments(): Promise<ConnectorTransaction[]> {
     return await this.ln
       .commando({
         method: "listsendpays",
@@ -274,24 +265,20 @@ export default class Commando implements Connector {
       })
       .then((resp) => {
         const parsed = resp as CommandoListSendPaysResponse;
-        return {
-          data: {
-            payments: parsed.payments
-              .map(
-                (payment, index): ConnectorTransaction => ({
-                  id: `${payment.id}`,
-                  memo: payment.description ?? "",
-                  settled: payment.status === "complete",
-                  preimage: payment.payment_preimage,
-                  payment_hash: payment.payment_hash,
-                  settleDate: payment.created_at * 1000,
-                  type: "sent",
-                  totalAmount: payment.amount_sent_msat / 1000,
-                })
-              )
-              .filter((payment) => payment.settled),
-          },
-        };
+        return parsed.payments
+          .map(
+            (payment, index): ConnectorTransaction => ({
+              id: `${payment.id}`,
+              memo: payment.description ?? "",
+              settled: payment.status === "complete",
+              preimage: payment.payment_preimage,
+              payment_hash: payment.payment_hash,
+              settleDate: payment.created_at * 1000,
+              type: "sent",
+              totalAmount: payment.amount_sent_msat / 1000,
+            })
+          )
+          .filter((payment) => payment.settled);
       });
   }
 
diff --git a/src/extension/background-script/connectors/connector.interface.ts b/src/extension/background-script/connectors/connector.interface.ts
index 75a256431b..946ae6c5d2 100644
--- a/src/extension/background-script/connectors/connector.interface.ts
+++ b/src/extension/background-script/connectors/connector.interface.ts
@@ -56,12 +56,6 @@ export type GetBalanceResponse = {
   };
 };
 
-export type GetInvoicesResponse = {
-  data: {
-    invoices: ConnectorTransaction[];
-  };
-};
-
 export type GetTransactionsResponse = {
   data: {
     transactions: ConnectorTransaction[];
diff --git a/src/extension/background-script/connectors/eclair.ts b/src/extension/background-script/connectors/eclair.ts
index e3758a055f..a3a51c103a 100644
--- a/src/extension/background-script/connectors/eclair.ts
+++ b/src/extension/background-script/connectors/eclair.ts
@@ -5,11 +5,9 @@ import { Account } from "~/types";
 import Connector, {
   CheckPaymentArgs,
   CheckPaymentResponse,
-  ConnectorTransaction,
   ConnectPeerResponse,
   GetBalanceResponse,
   GetInfoResponse,
-  GetInvoicesResponse,
   GetTransactionsResponse,
   KeysendArgs,
   MakeInvoiceArgs,
@@ -74,35 +72,6 @@ class Eclair implements Connector {
     throw new Error("Not yet supported with the currently used account.");
   }
 
-  async getInvoices(): Promise<GetInvoicesResponse> {
-    const response = await this.request("/listinvoices");
-    const invoices: ConnectorTransaction[] = response
-      .map(
-        (invoice: {
-          paymentHash: string;
-          description: string;
-          timestamp: number;
-          amount: number;
-        }) => ({
-          id: invoice.paymentHash,
-          payment_hash: invoice.paymentHash,
-          memo: invoice.description,
-          settled: true,
-          settleDate: invoice.timestamp * 1000,
-          totalAmount: invoice.amount / 1000,
-          type: "received",
-        })
-      )
-      .sort((a: ConnectorTransaction, b: ConnectorTransaction) => {
-        return b.settleDate - a.settleDate;
-      });
-    return {
-      data: {
-        invoices: invoices,
-      },
-    };
-  }
-
   async getTransactions(): Promise<GetTransactionsResponse> {
     console.error(
       `getTransactions() is not yet supported with the currently used account: ${this.constructor.name}`
diff --git a/src/extension/background-script/connectors/galoy.ts b/src/extension/background-script/connectors/galoy.ts
index 340ef431e0..556c3a5533 100644
--- a/src/extension/background-script/connectors/galoy.ts
+++ b/src/extension/background-script/connectors/galoy.ts
@@ -9,7 +9,6 @@ import Connector, {
   ConnectPeerResponse,
   GetBalanceResponse,
   GetInfoResponse,
-  GetInvoicesResponse,
   GetTransactionsResponse,
   KeysendArgs,
   MakeInvoiceArgs,
@@ -90,14 +89,6 @@ class Galoy implements Connector {
     throw new Error("Not yet supported with the currently used account.");
   }
 
-  // not yet implemented
-  async getInvoices(): Promise<GetInvoicesResponse> {
-    console.error(
-      `getInvoices() is not yet supported with the currently used account: ${this.constructor.name}`
-    );
-    return { data: { invoices: [] } };
-  }
-
   async getTransactions(): Promise<GetTransactionsResponse> {
     console.error(
       `getTransactions() is not yet supported with the currently used account: ${this.constructor.name}`
diff --git a/src/extension/background-script/connectors/kollider.ts b/src/extension/background-script/connectors/kollider.ts
index 85e9e2bf66..4210854392 100644
--- a/src/extension/background-script/connectors/kollider.ts
+++ b/src/extension/background-script/connectors/kollider.ts
@@ -11,11 +11,9 @@ import { Account } from "~/types";
 import Connector, {
   CheckPaymentArgs,
   CheckPaymentResponse,
-  ConnectorTransaction,
   ConnectPeerResponse,
   GetBalanceResponse,
   GetInfoResponse,
-  GetInvoicesResponse,
   GetTransactionsResponse,
   KeysendArgs,
   MakeInvoiceArgs,
@@ -86,55 +84,6 @@ export default class Kollider implements Connector {
     throw new Error("Not yet supported with the currently used account.");
   }
 
-  async getInvoices(): Promise<GetInvoicesResponse> {
-    const data = await this.request<
-      {
-        account_id: string;
-        add_index: number;
-        created_at: number;
-        currency: KolliderCurrencies;
-        expiry: number;
-        fees: null; // FIXME! Why is this null?
-        incoming: boolean;
-        owner: number;
-        payment_hash: string;
-        payment_request: string;
-        reference: string;
-        settled: boolean;
-        settled_date: number;
-        target_account_currency: KolliderCurrencies;
-        uid: number;
-        value: number;
-        value_msat: number;
-      }[]
-    >("GET", "/getuserinvoices", undefined);
-
-    const invoices: ConnectorTransaction[] = data
-      .filter((i) => i.incoming)
-      .filter((i) => i.account_id === this.currentAccountId)
-      .map(
-        (invoice, index): ConnectorTransaction => ({
-          id: `${invoice.payment_hash}-${index}`,
-          payment_hash: invoice.payment_hash,
-          memo: invoice.reference,
-          preimage: "", // kollider doesn't support preimage (yet)
-          settled: invoice.settled,
-          settleDate: invoice.settled_date,
-          totalAmount: invoice.value,
-          type: "received",
-        })
-      )
-      .sort((a, b) => {
-        return b.settleDate - a.settleDate;
-      });
-
-    return {
-      data: {
-        invoices,
-      },
-    };
-  }
-
   async getTransactions(): Promise<GetTransactionsResponse> {
     console.error(
       `getTransactions() is not yet supported with the currently used account: ${this.constructor.name}`
diff --git a/src/extension/background-script/connectors/lnbits.ts b/src/extension/background-script/connectors/lnbits.ts
index e325389daa..8c41139abd 100644
--- a/src/extension/background-script/connectors/lnbits.ts
+++ b/src/extension/background-script/connectors/lnbits.ts
@@ -13,7 +13,6 @@ import Connector, {
   ConnectPeerResponse,
   GetBalanceResponse,
   GetInfoResponse,
-  GetInvoicesResponse,
   GetTransactionsResponse,
   KeysendArgs,
   MakeInvoiceArgs,
@@ -101,52 +100,6 @@ class LnBits implements Connector {
       }
     ]
   */
-  async getInvoices(): Promise<GetInvoicesResponse> {
-    return this.request(
-      "GET",
-      "/api/v1/payments",
-      this.config.adminkey,
-      undefined
-    ).then(
-      (
-        data: {
-          checking_id: string;
-          pending: boolean;
-          amount: number;
-          fee: number;
-          memo: string;
-          time: number;
-          bolt11: string;
-          preimage: string;
-          payment_hash: string;
-          wallet_id: string;
-          webhook: string;
-          webhook_status: string;
-        }[]
-      ) => {
-        const invoices: ConnectorTransaction[] = data
-          .filter((invoice) => invoice.amount > 0)
-          .map((invoice, index): ConnectorTransaction => {
-            return {
-              id: `${invoice.checking_id}-${index}`,
-              memo: invoice.memo,
-              preimage: invoice.preimage,
-              payment_hash: invoice.payment_hash,
-              settled: !invoice.pending,
-              settleDate: invoice.time * 1000,
-              totalAmount: Math.floor(invoice.amount / 1000),
-              type: "received",
-            };
-          });
-
-        return {
-          data: {
-            invoices,
-          },
-        };
-      }
-    );
-  }
 
   getTransactions(): Promise<GetTransactionsResponse> {
     return this.request(
diff --git a/src/extension/background-script/connectors/lnc.ts b/src/extension/background-script/connectors/lnc.ts
index 77b6ea1d9b..c859aba264 100644
--- a/src/extension/background-script/connectors/lnc.ts
+++ b/src/extension/background-script/connectors/lnc.ts
@@ -10,6 +10,7 @@ import { encryptData } from "~/common/lib/crypto";
 import utils from "~/common/lib/utils";
 import { Account } from "~/types";
 
+import { mergeTransactions } from "~/common/utils/helpers";
 import state from "../state";
 import Connector, {
   CheckPaymentArgs,
@@ -19,7 +20,6 @@ import Connector, {
   flattenRequestMethods,
   GetBalanceResponse,
   GetInfoResponse,
-  GetInvoicesResponse,
   GetTransactionsResponse,
   KeysendArgs,
   MakeInvoiceArgs,
@@ -244,7 +244,7 @@ class Lnc implements Connector {
     });
   }
 
-  async getInvoices(): Promise<GetInvoicesResponse> {
+  private async getInvoices(): Promise<ConnectorTransaction[]> {
     this.checkConnection();
     const data = await this.lnc.lnd.lightning.ListInvoices({ reversed: true });
 
@@ -266,23 +266,17 @@ class Lnc implements Connector {
       })
       .reverse();
 
-    return {
-      data: {
-        invoices,
-      },
-    };
+    return invoices;
   }
 
   async getTransactions(): Promise<GetTransactionsResponse> {
     const incomingInvoices = await this.getInvoices();
     const outgoingInvoices = await this.getPayments();
 
-    const transactions: ConnectorTransaction[] = [
-      ...incomingInvoices.data.invoices,
-      ...outgoingInvoices,
-    ].sort((a, b) => {
-      return b.settleDate - a.settleDate;
-    });
+    const transactions: ConnectorTransaction[] = mergeTransactions(
+      incomingInvoices,
+      outgoingInvoices
+    );
 
     return {
       data: {
@@ -291,7 +285,7 @@ class Lnc implements Connector {
     };
   }
 
-  private async getPayments() {
+  private async getPayments(): Promise<ConnectorTransaction[]> {
     const outgoingInvoicesResponse = await this.lnc.lnd.lightning.ListPayments({
       reversed: true,
       max_payments: 100,
diff --git a/src/extension/background-script/connectors/lnd.ts b/src/extension/background-script/connectors/lnd.ts
index d830001eac..56e695bb22 100644
--- a/src/extension/background-script/connectors/lnd.ts
+++ b/src/extension/background-script/connectors/lnd.ts
@@ -7,6 +7,7 @@ import SHA256 from "crypto-js/sha256";
 import utils from "~/common/lib/utils";
 import { Account } from "~/types";
 
+import { mergeTransactions } from "~/common/utils/helpers";
 import Connector, {
   CheckPaymentArgs,
   CheckPaymentResponse,
@@ -16,7 +17,6 @@ import Connector, {
   flattenRequestMethods,
   GetBalanceResponse,
   GetInfoResponse,
-  GetInvoicesResponse,
   GetTransactionsResponse,
   KeysendArgs,
   MakeInvoiceArgs,
@@ -393,8 +393,8 @@ class Lnd implements Connector {
     });
   };
 
-  async getInvoices(): Promise<GetInvoicesResponse> {
-    const data = await this.request<{
+  private async getInvoices(): Promise<ConnectorTransaction[]> {
+    const lndInvoices = await this.request<{
       invoices: {
         add_index: string;
         amt_paid_msat: string;
@@ -438,8 +438,8 @@ class Lnd implements Connector {
       first_index_offset: string;
     }>("GET", "/v1/invoices", { reversed: true });
 
-    const invoices: ConnectorTransaction[] = data.invoices
-      .map((invoice, index): ConnectorTransaction => {
+    const invoices: ConnectorTransaction[] = lndInvoices.invoices.map(
+      (invoice, index): ConnectorTransaction => {
         const custom_records =
           invoice.htlcs[0] && invoice.htlcs[0].custom_records;
 
@@ -453,28 +453,20 @@ class Lnd implements Connector {
           type: "received",
           custom_records,
         };
-      })
-      .sort((a, b) => {
-        return b.settleDate - a.settleDate;
-      });
+      }
+    );
 
-    return {
-      data: {
-        invoices,
-      },
-    };
+    return invoices;
   }
 
   async getTransactions(): Promise<GetTransactionsResponse> {
     const invoices = await this.getInvoices();
     const payments = await this.getPayments();
 
-    const transactions: ConnectorTransaction[] = [
-      ...invoices.data.invoices,
-      ...payments,
-    ].sort((a, b) => {
-      return b.settleDate - a.settleDate;
-    });
+    const transactions: ConnectorTransaction[] = mergeTransactions(
+      invoices,
+      payments
+    );
 
     return {
       data: {
@@ -483,7 +475,7 @@ class Lnd implements Connector {
     };
   }
 
-  private async getPayments() {
+  private async getPayments(): Promise<ConnectorTransaction[]> {
     const lndPayments = await this.request<{
       payments: {
         payment_hash: string;
diff --git a/src/extension/background-script/connectors/lndhub.ts b/src/extension/background-script/connectors/lndhub.ts
index ddeec17d71..9d2da17f9e 100644
--- a/src/extension/background-script/connectors/lndhub.ts
+++ b/src/extension/background-script/connectors/lndhub.ts
@@ -10,6 +10,7 @@ import utils from "~/common/lib/utils";
 import HashKeySigner from "~/common/utils/signer";
 import { Account } from "~/types";
 
+import { mergeTransactions } from "~/common/utils/helpers";
 import state from "../state";
 import Connector, {
   CheckPaymentArgs,
@@ -18,7 +19,6 @@ import Connector, {
   ConnectPeerResponse,
   GetBalanceResponse,
   GetInfoResponse,
-  GetInvoicesResponse,
   GetTransactionsResponse,
   KeysendArgs,
   MakeInvoiceArgs,
@@ -86,7 +86,7 @@ export default class LndHub implements Connector {
     throw new Error("Not yet supported with the currently used account.");
   }
 
-  async getInvoices(): Promise<GetInvoicesResponse> {
+  private async getInvoices(): Promise<ConnectorTransaction[]> {
     const data = await this.request<
       {
         r_hash: {
@@ -125,23 +125,17 @@ export default class LndHub implements Connector {
         return b.settleDate - a.settleDate;
       });
 
-    return {
-      data: {
-        invoices,
-      },
-    };
+    return invoices;
   }
 
   async getTransactions(): Promise<GetTransactionsResponse> {
     const incomingInvoices = await this.getInvoices();
     const outgoingInvoices = await this.getPayments();
 
-    const transactions: ConnectorTransaction[] = [
-      ...incomingInvoices.data.invoices,
-      ...outgoingInvoices,
-    ].sort((a, b) => {
-      return b.settleDate - a.settleDate;
-    });
+    const transactions: ConnectorTransaction[] = mergeTransactions(
+      incomingInvoices,
+      outgoingInvoices
+    );
 
     return {
       data: {

From 796fbbb9aa4af283054ae3f271150531da4d7ee0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Thu, 9 Nov 2023 19:13:54 +0100
Subject: [PATCH 40/40] fix: decode preimage & payment_hash

---
 src/extension/background-script/connectors/lnd.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/extension/background-script/connectors/lnd.ts b/src/extension/background-script/connectors/lnd.ts
index 56e695bb22..ba4cfe0ecb 100644
--- a/src/extension/background-script/connectors/lnd.ts
+++ b/src/extension/background-script/connectors/lnd.ts
@@ -446,7 +446,8 @@ class Lnd implements Connector {
         return {
           id: `${invoice.payment_request}-${index}`,
           memo: invoice.memo,
-          preimage: invoice.r_preimage,
+          preimage: utils.base64ToHex(invoice.r_preimage),
+          payment_hash: utils.base64ToHex(invoice.r_hash),
           settled: invoice.settled,
           settleDate: parseInt(invoice.settle_date) * 1000,
           totalAmount: parseInt(invoice.value),