feat: show tlv records in transaction popup

api/models.go

@@ -192,18 +192,36 @@ type ListTransactionsResponse = []Transaction
 
 // TODO: camelCase
 type Transaction struct {
-	Type            string      `json:"type"`
-	Invoice         string      `json:"invoice"`
-	Description     string      `json:"description"`
-	DescriptionHash string      `json:"description_hash"`
-	Preimage        *string     `json:"preimage"`
-	PaymentHash     string      `json:"payment_hash"`
-	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"`
+	Type            string             `json:"type"`
+	Invoice         string             `json:"invoice"`
+	Description     string             `json:"description"`
+	DescriptionHash string             `json:"description_hash"`
+	Preimage        *string            `json:"preimage"`
+	PaymentHash     string             `json:"payment_hash"`
+	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        *lnclient.Metadata `json:"metadata,omitempty"`
+	Boostagram      *Boostagram        `json:"boostagram,omitempty"`
+}
+
+type Boostagram struct {
+	AppName        string `json:"app_name"`
+	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      string `json:"ts,omitempty"`
+	Message        string `json:"message,omitempty"`
+	SenderID       string `json:"sender_id"`
+	SenderName     string `json:"sender_name"`
+	Time           string `json:"time"`
+	Action         string `json:"action"`
+	ValueMsatTotal int    `json:"value_msat_total"`
 }
 
 // debug api

api/transactions.go

@@ -6,6 +6,7 @@ import (
 	"errors"
 	"time"
 
+	"github.com/getAlby/hub/lnclient"
 	"github.com/getAlby/hub/logger"
 	"github.com/getAlby/hub/transactions"
 	"github.com/sirupsen/logrus"
@@ -73,9 +74,9 @@ func toApiTransaction(transaction *transactions.Transaction) *Transaction {
 		preimage = transaction.Preimage
 	}
 
-	var metadata interface{}
-	if transaction.Metadata != "" {
-		jsonErr := json.Unmarshal([]byte(transaction.Metadata), &metadata)
+	var metadata *lnclient.Metadata
+	if transaction.Metadata != nil {
+		jsonErr := json.Unmarshal(transaction.Metadata, &metadata)
 		if jsonErr != nil {
 			logger.Logger.WithError(jsonErr).WithFields(logrus.Fields{
 				"id":       transaction.ID,
@@ -84,6 +85,17 @@ func toApiTransaction(transaction *transactions.Transaction) *Transaction {
 		}
 	}
 
+	var boostagram *Boostagram
+	if transaction.Boostagram != nil {
+		jsonErr := json.Unmarshal(transaction.Boostagram, &boostagram)
+		if jsonErr != nil {
+			logger.Logger.WithError(jsonErr).WithFields(logrus.Fields{
+				"id":         transaction.ID,
+				"boostagram": transaction.Boostagram,
+			}).Error("Failed to deserialize transaction boostagram info")
+		}
+	}
+
 	return &Transaction{
 		Type:            transaction.Type,
 		Invoice:         transaction.PaymentRequest,
@@ -97,5 +109,6 @@ func toApiTransaction(transaction *transactions.Transaction) *Transaction {
 		CreatedAt:       createdAt,
 		SettledAt:       settledAt,
 		Metadata:        metadata,
+		Boostagram:      boostagram,
 	}
 }

db/migrations/202408061737_add_boostagrams_and_use_json.go

@@ -0,0 +1,32 @@
+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(tx *gorm.DB) error {
+		if err := tx.Exec("ALTER TABLE transactions ADD COLUMN boostagram JSONB").Error; err != nil {
+			return err
+		}
+
+		if err := tx.Exec(`
+			ALTER TABLE transactions ADD COLUMN metadata_temp JSONB;
+			UPDATE transactions SET metadata_temp = json(metadata);
+			ALTER TABLE transactions DROP COLUMN metadata;
+			ALTER TABLE transactions RENAME COLUMN metadata_temp TO metadata;
+		`).Error; err != nil {
+			return err
+		}
+
+		return nil
+	},
+	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.value_msat_total && (
+        <div className="mt-6">
+          <p>Total amount</p>
+          <p className="text-muted-foreground break-all">
+            {new Intl.NumberFormat(undefined, {}).format(
+              Math.floor(boost.value_msat_total / 1000)
+            )}{" "}
+            {Math.floor(boost.value_msat_total / 1000) == 1 ? "sat" : "sats"}
+          </p>
+        </div>
+      )}
+      {boost.sender_name && (
+        <div className="mt-6">
+          <p>Sender</p>
+          <p className="text-muted-foreground break-all">{boost.sender_name}</p>
+        </div>
+      )}
+      {boost.app_name && (
+        <div className="mt-6">
+          <p>App</p>
+          <p className="text-muted-foreground break-all">{boost.app_name}</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,
@@ -191,52 +192,68 @@ 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.metadata?.tlv_records.map((record) => {
+                    if (record.type === 34349334) {
+                      // Chat message
+                      return (
+                        <div className="mt-6" key={record.type}>
+                          <p>Whatsat Message</p>
+                          <p className="text-muted-foreground break-all">
+                            {record.value}
+                          </p>
+                        </div>
+                      );
+                    }
+                  })}
+                  {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.payment_hash}
+                      </p>
+                      <CopyIcon
+                        className="cursor-pointer text-muted-foreground w-6 h-6"
+                        onClick={() => {
+                          copy(tx.payment_hash);
+                        }}
+                      />
+                    </div>
                   </div>
-                </div>
-              </>
-            )}
+                </>
+              )}
+            </div>
           </CredenzaFooter>
         </CredenzaContent>
       </Credenza>

frontend/src/types.ts

@@ -378,7 +378,35 @@ export type Transaction = {
   fees_paid: number;
   created_at: string;
   settled_at: string | undefined;
-  metadata: unknown;
+  metadata?: {
+    tlv_records: TLVRecord[];
+  };
+  boostagram?: Boostagram;
+};
+
+export type TLVRecord = {
+  type: number;
+  /**
+   * hex-decoded value
+   */
+  value: string;
+};
+
+export type Boostagram = {
+  app_name: string;
+  name: string;
+  podcast: string;
+  url: string;
+  episode?: string;
+  feedID?: string;
+  itemID?: string;
+  ts?: string;
+  message?: string;
+  sender_id: string;
+  sender_name: string;
+  time: string;
+  action: "boost";
+  value_msat_total: number;
 };
 
 export type NewChannelOrderStatus = "pay" | "paid" | "success" | "opening";