feat: show tlv records in transaction popup

api/models.go

@@ -200,15 +200,35 @@ type Transaction struct {
 	Type            string      `json:"type"`
 	Invoice         string      `json:"invoice"`
 	Description     string      `json:"description"`
-	DescriptionHash string      `json:"description_hash"`
+	DescriptionHash string      `json:"descriptionHash"`
 	Preimage        *string     `json:"preimage"`
-	PaymentHash     string      `json:"payment_hash"`
+	PaymentHash     string      `json:"paymentHash"`
 	Amount          uint64      `json:"amount"`
-	FeesPaid        uint64      `json:"fees_paid"`
-	CreatedAt       string      `json:"created_at"`
-	SettledAt       *string     `json:"settled_at"`
-	AppId           *uint       `json:"app_id"`
-	Metadata        interface{} `json:"metadata,omitempty"`
+	FeesPaid        uint64      `json:"feesPaid"`
+	CreatedAt       string      `json:"createdAt"`
+	SettledAt       *string     `json:"settledAt"`
+	AppId           *uint       `json:"appId"`
+	Metadata        Metadata    `json:"metadata,omitempty"`
+	Boostagram      *Boostagram `json:"boostagram,omitempty"`
+}
+
+type Metadata = map[string]interface{}
+
+type Boostagram struct {
+	AppName        string `json:"appName"`
+	Name           string `json:"name"`
+	Podcast        string `json:"podcast"`
+	URL            string `json:"url"`
+	Episode        string `json:"episode,omitempty"`
+	FeedId         string `json:"feedId,omitempty"`
+	ItemId         string `json:"itemId,omitempty"`
+	Timestamp      int64  `json:"ts,omitempty"`
+	Message        string `json:"message,omitempty"`
+	SenderId       string `json:"senderId"`
+	SenderName     string `json:"senderName"`
+	Time           string `json:"time"`
+	Action         string `json:"action"`
+	ValueMsatTotal int64  `json:"valueMsatTotal"`
 }
 
 // debug api

api/transactions.go

@@ -73,17 +73,30 @@ func toApiTransaction(transaction *transactions.Transaction) *Transaction {
 		preimage = transaction.Preimage
 	}
 
-	var metadata interface{}
-	if transaction.Metadata != "" {
-		jsonErr := json.Unmarshal([]byte(transaction.Metadata), &metadata)
+	var metadata Metadata
+	if transaction.Metadata != nil {
+		jsonErr := json.Unmarshal(transaction.Metadata, &metadata)
 		if jsonErr != nil {
 			logger.Logger.WithError(jsonErr).WithFields(logrus.Fields{
-				"id":       transaction.ID,
-				"metadata": transaction.Metadata,
+				"payment_hash": transaction.PaymentHash,
+				"metadata":     transaction.Metadata,
 			}).Error("Failed to deserialize transaction metadata")
 		}
 	}
 
+	var boostagram *Boostagram
+	if transaction.Boostagram != nil {
+		var txBoostagram transactions.Boostagram
+		jsonErr := json.Unmarshal(transaction.Boostagram, &txBoostagram)
+		if jsonErr != nil {
+			logger.Logger.WithError(jsonErr).WithFields(logrus.Fields{
+				"payment_hash": transaction.PaymentHash,
+				"boostagram":   transaction.Boostagram,
+			}).Error("Failed to deserialize transaction boostagram info")
+		}
+		boostagram = toApiBoostagram(&txBoostagram)
+	}
+
 	return &Transaction{
 		Type:            transaction.Type,
 		Invoice:         transaction.PaymentRequest,
@@ -97,5 +110,25 @@ func toApiTransaction(transaction *transactions.Transaction) *Transaction {
 		CreatedAt:       createdAt,
 		SettledAt:       settledAt,
 		Metadata:        metadata,
+		Boostagram:      boostagram,
+	}
+}
+
+func toApiBoostagram(boostagram *transactions.Boostagram) *Boostagram {
+	return &Boostagram{
+		AppName:        boostagram.AppName,
+		Name:           boostagram.Name,
+		Podcast:        boostagram.Podcast,
+		URL:            boostagram.URL,
+		Episode:        boostagram.Episode,
+		FeedId:         boostagram.FeedId,
+		ItemId:         boostagram.ItemId,
+		Timestamp:      boostagram.Timestamp,
+		Message:        boostagram.Message,
+		SenderId:       boostagram.SenderId,
+		SenderName:     boostagram.SenderName,
+		Time:           boostagram.Time,
+		Action:         boostagram.Action,
+		ValueMsatTotal: boostagram.ValueMsatTotal,
 	}
 }

db/migrations/202408061737_add_boostagrams_and_use_json.go

@@ -0,0 +1,29 @@
+package migrations
+
+import (
+	_ "embed"
+
+	"github.com/go-gormigrate/gormigrate/v2"
+	"gorm.io/gorm"
+)
+
+// This migration adds boostagram column to transactions
+var _202408061737_add_boostagrams_and_use_json = &gormigrate.Migration{
+	ID: "202408061737_add_boostagrams_and_use_json",
+	Migrate: func(db *gorm.DB) error {
+		err := db.Transaction(func(tx *gorm.DB) error {
+			return tx.Exec(`
+			ALTER TABLE transactions ADD COLUMN boostagram JSON;
+			ALTER TABLE transactions ADD COLUMN metadata_temp JSON;
+			UPDATE transactions SET metadata_temp = json(metadata) where metadata != "";
+			ALTER TABLE transactions DROP COLUMN metadata;
+			ALTER TABLE transactions RENAME COLUMN metadata_temp TO metadata;
+		`).Error
+		})
+
+		return err
+	},
+	Rollback: func(tx *gorm.DB) error {
+		return nil
+	},
+}

db/migrations/migrate.go

@@ -19,6 +19,7 @@ func Migrate(gormDB *gorm.DB) error {
 		_202407151352_autoincrement,
 		_202407201604_transactions_indexes,
 		_202407262257_remove_invalid_scopes,
+		_202408061737_add_boostagrams_and_use_json,
 	})
 
 	return m.Migrate()

db/models.go

@@ -1,6 +1,10 @@
 package db
 
-import "time"
+import (
+	"time"
+
+	"gorm.io/datatypes"
+)
 
 type UserConfig struct {
 	ID        uint
@@ -75,8 +79,9 @@ type Transaction struct {
 	ExpiresAt       *time.Time
 	UpdatedAt       time.Time
 	SettledAt       *time.Time
-	Metadata        string
+	Metadata        datatypes.JSON
 	SelfPayment     bool
+	Boostagram      datatypes.JSON
 }
 
 type DBService interface {

frontend/src/components/PodcastingInfo.tsx

@@ -0,0 +1,63 @@
+import { Boostagram } from "src/types";
+
+function PodcastingInfo({ boost }: { boost: Boostagram }) {
+  return (
+    <>
+      {boost.message && (
+        <div className="mt-6">
+          <p>Message</p>
+          <p className="text-muted-foreground break-all">{boost.message}</p>
+        </div>
+      )}
+      {boost.podcast && (
+        <div className="mt-6">
+          <p>Podcast</p>
+          <p className="text-muted-foreground break-all">{boost.podcast}</p>
+        </div>
+      )}
+      {boost.episode && (
+        <div className="mt-6">
+          <p>Episode</p>
+          <p className="text-muted-foreground break-all">{boost.episode}</p>
+        </div>
+      )}
+      {boost.action && (
+        <div className="mt-6">
+          <p>Action</p>
+          <p className="text-muted-foreground break-all">{boost.action}</p>
+        </div>
+      )}
+      {boost.ts && (
+        <div className="mt-6">
+          <p>Timestamp</p>
+          <p className="text-muted-foreground break-all">{boost.ts}</p>
+        </div>
+      )}
+      {boost.valueMsatTotal && (
+        <div className="mt-6">
+          <p>Total amount</p>
+          <p className="text-muted-foreground break-all">
+            {new Intl.NumberFormat(undefined, {}).format(
+              Math.floor(boost.valueMsatTotal / 1000)
+            )}{" "}
+            {Math.floor(boost.valueMsatTotal / 1000) == 1 ? "sat" : "sats"}
+          </p>
+        </div>
+      )}
+      {boost.senderName && (
+        <div className="mt-6">
+          <p>Sender</p>
+          <p className="text-muted-foreground break-all">{boost.senderName}</p>
+        </div>
+      )}
+      {boost.appName && (
+        <div className="mt-6">
+          <p>App</p>
+          <p className="text-muted-foreground break-all">{boost.appName}</p>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default PodcastingInfo;

frontend/src/components/TransactionItem.tsx

@@ -10,6 +10,7 @@ import {
 } from "lucide-react";
 import React from "react";
 import AppAvatar from "src/components/AppAvatar";
+import PodcastingInfo from "src/components/PodcastingInfo";
 import {
   Credenza,
   CredenzaBody,
@@ -38,7 +39,7 @@ function TransactionItem({ tx }: Props) {
   const [showDetails, setShowDetails] = React.useState(false);
   const type = tx.type;
   const Icon = tx.type == "outgoing" ? ArrowUpIcon : ArrowDownIcon;
-  const app = tx.app_id && apps?.find((app) => app.id === tx.app_id);
+  const app = tx.appId && apps?.find((app) => app.id === tx.appId);
 
   const copy = (text: string) => {
     copyToClipboard(text);
@@ -92,7 +93,7 @@ function TransactionItem({ tx }: Props) {
                   {app ? app.name : type == "incoming" ? "Received" : "Sent"}
                 </p>
                 <p className="text-sm md:text-base truncate text-muted-foreground">
-                  {dayjs(tx.settled_at).fromNow()}
+                  {dayjs(tx.settledAt).fromNow()}
                 </p>
               </div>
               <p className="text-sm md:text-base text-muted-foreground break-all">
@@ -166,7 +167,7 @@ function TransactionItem({ tx }: Props) {
             <div className="mt-8">
               <p>Date & Time</p>
               <p className="text-muted-foreground">
-                {dayjs(tx.settled_at)
+                {dayjs(tx.settledAt)
                   .tz(dayjs.tz.guess())
                   .format("D MMMM YYYY, HH:mm")}
               </p>
@@ -176,9 +177,9 @@ function TransactionItem({ tx }: Props) {
                 <p>Fee</p>
                 <p className="text-muted-foreground">
                   {new Intl.NumberFormat(undefined, {}).format(
-                    Math.floor(tx.fees_paid / 1000)
+                    Math.floor(tx.feesPaid / 1000)
                   )}{" "}
-                  {Math.floor(tx.fees_paid / 1000) == 1 ? "sat" : "sats"}
+                  {Math.floor(tx.feesPaid / 1000) == 1 ? "sat" : "sats"}
                 </p>
               </div>
             )}
@@ -191,52 +192,55 @@ function TransactionItem({ tx }: Props) {
               </div>
             )}
           </CredenzaBody>
-          <CredenzaFooter className="!justify-start mt-4 !flex-col">
-            <div
-              className="flex items-center gap-2 cursor-pointer"
-              onClick={() => setShowDetails(!showDetails)}
-            >
-              Details
-              {showDetails ? (
-                <ChevronUp className="w-4 h-4" />
-              ) : (
-                <ChevronDown className="w-4 h-4" />
-              )}
-            </div>
-            {showDetails && (
-              <>
-                <div className="mt-6 !ml-0">
-                  <p>Preimage</p>
-                  <div className="flex items-center gap-4">
-                    <p className="text-muted-foreground break-all">
-                      {tx.preimage}
-                    </p>
-                    <CopyIcon
-                      className="cursor-pointer text-muted-foreground w-6 h-6"
-                      onClick={() => {
-                        if (tx.preimage) {
-                          copy(tx.preimage);
-                        }
-                      }}
-                    />
+          <CredenzaFooter>
+            <div className="mt-4 w-full">
+              <div
+                className="flex items-center gap-2 cursor-pointer"
+                onClick={() => setShowDetails(!showDetails)}
+              >
+                Details
+                {showDetails ? (
+                  <ChevronUp className="w-4 h-4" />
+                ) : (
+                  <ChevronDown className="w-4 h-4" />
+                )}
+              </div>
+              {showDetails && (
+                <>
+                  {tx.boostagram && <PodcastingInfo boost={tx.boostagram} />}
+                  <div className="mt-6">
+                    <p>Preimage</p>
+                    <div className="flex items-center gap-4">
+                      <p className="text-muted-foreground break-all">
+                        {tx.preimage}
+                      </p>
+                      <CopyIcon
+                        className="cursor-pointer text-muted-foreground w-6 h-6"
+                        onClick={() => {
+                          if (tx.preimage) {
+                            copy(tx.preimage);
+                          }
+                        }}
+                      />
+                    </div>
                   </div>
-                </div>
-                <div className="mt-6 !ml-0">
-                  <p>Hash</p>
-                  <div className="flex items-center gap-4">
-                    <p className="text-muted-foreground break-all">
-                      {tx.payment_hash}
-                    </p>
-                    <CopyIcon
-                      className="cursor-pointer text-muted-foreground w-6 h-6"
-                      onClick={() => {
-                        copy(tx.payment_hash);
-                      }}
-                    />
+                  <div className="mt-6">
+                    <p>Hash</p>
+                    <div className="flex items-center gap-4">
+                      <p className="text-muted-foreground break-all">
+                        {tx.paymentHash}
+                      </p>
+                      <CopyIcon
+                        className="cursor-pointer text-muted-foreground w-6 h-6"
+                        onClick={() => {
+                          copy(tx.paymentHash);
+                        }}
+                      />
+                    </div>
                   </div>
-                </div>
-              </>
-            )}
+                </>
+              )}
+            </div>
           </CredenzaFooter>
         </CredenzaContent>
       </Credenza>

frontend/src/components/TransactionsList.tsx

@@ -24,7 +24,7 @@ function TransactionsList() {
       ) : (
         <>
           {transactions?.map((tx) => {
-            return <TransactionItem key={tx.payment_hash + tx.type} tx={tx} />;
+            return <TransactionItem key={tx.paymentHash + tx.type} tx={tx} />;
           })}
         </>
       )}