feat: show zaps info in history

src/element/mention.tsx

@@ -1,6 +1,7 @@
 import { Link } from "react-router-dom";
 import { useUserProfile } from "@snort/system-react";
 import { profileLink } from "@/utils";
+import { hexToBech32 } from "@snort/shared";
 
 interface MentionProps {
   pubkey: string;
@@ -11,7 +12,7 @@ export function Mention({ pubkey }: MentionProps) {
   const user = useUserProfile(pubkey);
   return (
     <Link to={profileLink(user, pubkey)} className="text-primary">
-      {user?.name || pubkey}
+      {user?.name || hexToBech32("npub", pubkey).slice(0, 12)}
     </Link>
   );
 }

src/element/provider/nostr/history.tsx

@@ -1,6 +1,7 @@
+import { Mention } from "@/element/mention";
 import { BalanceHistoryResult, NostrStreamProvider } from "@/providers/zsz";
 import { eventLink } from "@/utils";
-import { NostrEvent } from "@snort/system";
+import { EventKind, NostrEvent } from "@snort/system";
 import { useEffect, useState } from "react";
 import { FormattedMessage, FormattedNumber } from "react-intl";
 import { Link } from "react-router-dom";
@@ -14,41 +15,59 @@ export default function BalanceHistory({ provider }: { provider?: NostrStreamPro
     provider.history(page).then(setRows);
   }, []);
 
+  function eventDescription(ev: NostrEvent) {
+    if (ev.kind === EventKind.LiveEvent) {
+      return (
+        <Link to={`/${eventLink(ev)}`} className="text-primary">
+          <FormattedMessage defaultMessage="Past Stream" />
+        </Link>
+      );
+    } else if (ev.kind === EventKind.ZapRequest) {
+      return (
+        <div className="flex flex-col">
+          <div className="flex items-center gap-1">
+            <FormattedMessage defaultMessage="Zap from" />
+            <Mention pubkey={ev.pubkey} />
+          </div>
+          {ev.content ? <q className="text-sm block">{ev.content}</q> : ""}
+        </div>
+      );
+    }
+  }
+
   return (
-    <div className="grid auto-rows-auto grid-cols-3 gap-1">
-      <div>
-        <FormattedMessage defaultMessage="Time" />
-      </div>
-      <div>
-        <FormattedMessage defaultMessage="Description" />
-      </div>
-      <div>
-        <FormattedMessage defaultMessage="Amount" />
-      </div>
-      {rows?.items.map(a => {
-        let ev: NostrEvent | undefined;
-        if (a.desc && a.desc.startsWith("{")) {
-          ev = JSON.parse(a.desc) as NostrEvent;
-        }
-        return (
-          <>
-            <div>{new Date(a.created * 1000).toLocaleString()}</div>
-            <div>
-              {ev ? (
-                <Link to={`/${eventLink(ev)}`} className="text-primary">
-                  <FormattedMessage defaultMessage="Past Stream" />
-                </Link>
-              ) : (
-                a.desc
-              )}
-            </div>
-            <div className={a.type === 0 ? "text-green-400" : "text-red-400"}>
-              {a.type === 0 ? "+" : "-"}
-              <FormattedNumber value={a.amount} />
-            </div>
-          </>
-        );
-      })}
-    </div>
+    <table className="table-auto border-collapse">
+      <thead>
+        <tr>
+          <th>
+            <FormattedMessage defaultMessage="Time" />
+          </th>
+          <th>
+            <FormattedMessage defaultMessage="Description" />
+          </th>
+          <th>
+            <FormattedMessage defaultMessage="Amount" />
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows?.items.map(a => {
+          let ev: NostrEvent | undefined;
+          if (a.desc && a.desc.startsWith("{")) {
+            ev = JSON.parse(a.desc) as NostrEvent;
+          }
+          return (
+            <tr>
+              <td>{new Date(a.created * 1000).toLocaleString()}</td>
+              <td>{ev ? eventDescription(ev) : a.desc}</td>
+              <td className={a.type === 0 ? "text-green-400" : "text-red-400"}>
+                {a.type === 0 ? "+" : "-"}
+                <FormattedNumber value={a.amount} />
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
   );
 }

src/lang.json

@@ -119,6 +119,9 @@
   "5JcXdV": {
     "defaultMessage": "Create Account"
   },
+  "5L4ati": {
+    "defaultMessage": "Zap from"
+  },
   "5LXWMX": {
     "defaultMessage": "New Goal"
   },

src/pages/settings/index.tsx

@@ -20,7 +20,7 @@ export default function SettingsPage() {
   const naviage = useNavigate();
 
   return (
-    <div className="rounded-2xl p-3 md:w-[700px] mx-auto w-full">
+    <div className="rounded-2xl p-3 md:w-[800px] mx-auto w-full">
       <div className="flex flex-col gap-2">
         <h1>
           <FormattedMessage defaultMessage="Settings" />

src/translations/en.json

@@ -39,6 +39,7 @@
   "50+/JW": "Stream Key is required",
   "58DXVG": "To get started, grab your stream key from the platform you wish to forward to.",
   "5JcXdV": "Create Account",
+  "5L4ati": "Zap from",
   "5LXWMX": "New Goal",
   "5QYdPU": "Start Time",
   "5Wwopw": "Pricing",