ark notifications

5 files changed, 37 insertions, 20 deletions

diff --git a/src/components/Payments.svelte b/src/components/Payments.svelte
index 7bfc8588..db0dba60 100644
--- a/src/components/Payments.svelte
+++ b/src/components/Payments.svelte
@@ -23,8 +23,8 @@
       tabindex="0"
     >
       <div class="whitespace-nowrap my-auto col-span-3">
-        <div class="font-bold flex items-center">
-          <div class="flex items-center gap-1">
+        <button class="font-bold flex items-center" onclick={(e) => { e.stopPropagation(); $fiat = !$fiat; }}>
+          <div class="flex items-center">
             {#if $fiat}
               <div>{f(Math.abs(amount) * (p.rate / sats), p.currency, locale)}</div>
             {:else}
@@ -33,7 +33,7 @@
               <div>{s(Math.abs(amount), locale)}</div>
             {/if}
           </div>
-        </div>
+        </button>
 
         {#if p.tip}
           <div class="text-secondary flex items-center text-sm">
@@ -106,12 +106,12 @@
 
       <div class="text-secondary text-right text-sm my-auto col-span-3">
         <div>
-          {format(new Date(p.created), "h:mm aaa", {
+          {format(new Date(p.created), "MMM d, yy", {
             locale: locales[language],
           })}
         </div>
         <div>
-          {format(new Date(p.created), "MMM d, yy", {
+          {format(new Date(p.created), "h:mm aaa", {
             locale: locales[language],
           })}
         </div>
diff --git a/src/lib/socket.ts b/src/lib/socket.ts
index 1ca244d9..077fb856 100644
--- a/src/lib/socket.ts
+++ b/src/lib/socket.ts
@@ -1,7 +1,7 @@
 import { goto, invalidate } from "$app/navigation";
 import { navigating, page } from "$app/stores";
 import { PUBLIC_SOCKET } from "$env/static/public";
-import { event, importing, invoice, last, request } from "$lib/store";
+import { event, importing, invoice, last, paymentSignal, request } from "$lib/store";
 import { s, sleep, success, wait } from "$lib/utils";
 import cookies from "js-cookie";
 import { get } from "svelte/store";
@@ -44,6 +44,7 @@ export const messages = (data) => ({
     invalidate("app:user");
     invalidate("app:invoice");
     invalidate("app:payments");
+    paymentSignal.update((n) => n + 1);
 
     if (type === "import" && aid) {
       importing.update((s) => {
diff --git a/src/lib/store.ts b/src/lib/store.ts
index d7e44167..57bb9735 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -97,3 +97,4 @@ export const ndef = writable();
 export const showQr = persistLocal("showQr", true);
 export const save = writable();
 export const importing = writable(new Set<string>());
+export const paymentSignal = writable(0);
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 8cd580e2..0c88ff19 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -11,6 +11,7 @@
     passwordPrompt,
     selectSigner,
     password,
+    paymentSignal,
     pin,
     theme as themeStore,
     fiat,
@@ -48,20 +49,25 @@
       preloadData(`/${user.username}/receive`);
       preloadData("/payments");
       preloadData("/send");
-      if ($arkkey) arkSync();
+      if ($arkkey) arkSync("afterNavigate");
     }
   });
 
   let arkSyncing = false;
   let arkForwarding = false;
 
-  let arkSync = async () => {
-    if (arkSyncing || arkSending) return;
+  let arkSync = async (source = "unknown") => {
+    if (arkSyncing || arkSending) {
+      console.log(`[arkSync] SKIPPED (source: ${source}, syncing: ${arkSyncing}, sending: ${arkSending})`);
+      return;
+    }
+    console.log(`[arkSync] START (source: ${source})`);
     arkSyncing = true;
 
     try {
       const aid = $arkaid || getCookie("aid") || user.id;
       const result = await syncTransactions(aid);
+      console.log(`[arkSync] DONE (source: ${source}, received: ${result?.received || 0})`);
 
       if (result?.forward && !arkForwarding) {
         arkForwarding = true;
@@ -96,7 +102,6 @@
 
   let arkInitializedKey: string | undefined;
   let arkRefreshTimer: ReturnType<typeof setInterval> | undefined;
-  let arkSyncTimer: ReturnType<typeof setInterval> | undefined;
 
   const initArk = async () => {
     const key = $arkkey;
@@ -106,15 +111,11 @@
     const wallet = await getWallet();
     if (wallet) {
       localStorage.setItem("arkkey:uid", user.id);
-      wallet.notifyIncomingFunds(arkSync);
-      arkSync();
+      wallet.notifyIncomingFunds(() => arkSync("notifyIncomingFunds"));
+      arkSync("initArk");
       refresh().catch((e) => console.error("Ark refresh failed:", e));
       settle().catch((e) => console.error("Ark settle failed:", e));
 
-      // Poll for incoming ark transactions (fallback for SSE)
-      if (arkSyncTimer) clearInterval(arkSyncTimer);
-      arkSyncTimer = setInterval(() => arkSync(), 15_000);
-
       // Periodically recover expired VTXOs
       if (arkRefreshTimer) clearInterval(arkRefreshTimer);
       arkRefreshTimer = setInterval(() => {
@@ -127,6 +128,10 @@
     if (browser && user && $arkkey) initArk();
   });
 
+  $effect(() => {
+    if ($paymentSignal && $arkkey) arkSync("paymentSignal");
+  });
+
 
   onMount(async () => {
     if (browser) {
@@ -194,7 +199,6 @@
     if (browser) {
       close();
       clearTimeout(checkTimer);
-      if (arkSyncTimer) clearInterval(arkSyncTimer);
       if (arkRefreshTimer) clearInterval(arkRefreshTimer);
     }
   });
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index 657f0c95..c435f844 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -81,9 +81,9 @@
       aria-label="Toggle currency display"
     >
       {#if $fiat}
-        <div class="flex items-center gap-1">{f(toFiat(amount, rate), currency, userLocale)}</div>
+        <div class="flex items-center">{f(toFiat(amount, rate), currency, userLocale)}</div>
       {:else}
-        <div class="flex items-center gap-1">
+        <div class="flex items-center">
           <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"></iconify-icon>
           {s(amount, userLocale)}
         </div>
@@ -144,7 +144,7 @@
   <div>
     <span class="text-lg text-secondary">{$t("payments.date")}</span>
     <div>
-      {format(new Date(created), "h:mmaaa", { locale })}{format(new Date(created), "MMM d, yyyy", { locale })}
+      {format(new Date(created), "MMM d, yyyy", { locale })} {format(new Date(created), "h:mmaaa", { locale })}
     </div>
   </div>
 
@@ -189,6 +189,17 @@
     </div>
   {/if}
 
+  {#if type === types.ark && hash}
+    <div>
+      <span class="text-lg text-secondary">Txid</span>
+      <div class="flex">
+        <div>{hash}</div>
+        <button class="flex font-bold hover:opacity-80 mb-auto my-auto" onclick={() => copy(hash)} aria-label="Copy transaction ID"
+        ></button>
+      </div>
+    </div>
+  {/if}
+
   {#if type === "bitcoin" || type === "liquid"}
     <div>
       <span class="text-lg text-secondary">Txid</span>