socket improvements

3 files changed, 13 insertions, 16 deletions

diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 94ef439a..c95bb64c 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -93,11 +93,11 @@
         class="contents"
       >
         <button
-          class="rounded-2xl py-5 px-6 font-bold hover:bg-neutral-700 flex bg-black text-white mx-auto"
+          class="rounded-2xl py-5 px-6 min-w-[200px] font-bold hover:bg-neutral-700 flex bg-black text-white mx-auto"
         >
           <div class="mx-auto flex gap-2">
-            <div class="text-xl my-auto">⚡️</div>
-            <div class="my-auto text-2xl">{$t("user.pay")}</div>
+            <div class="text-4xl my-auto">⚡️</div>
+            <div class="my-auto text-2xl">{$t("user.pay")} {subject.username}</div>
           </div>
         </button>
       </a>
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index b59b3f77..5495e118 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -1,17 +1,7 @@
 <script>
   import { enhance } from "$app/forms";
   import { send } from "$lib/socket";
-  import {
-    btc,
-    post,
-    copy,
-    f,
-    get,
-    types,
-    sat,
-    s,
-    sats,
-  } from "$lib/utils";
+  import { btc, post, copy, f, get, types, sat, s, sats } from "$lib/utils";
   import { tick, onMount, onDestroy } from "svelte";
   import { browser } from "$app/environment";
   import { last, showQr, amountPrompt } from "$lib/store";
@@ -62,13 +52,21 @@
       user: { username, currency },
     } = invoice);
 
+      if (browser && !subbed[id])
+      send("subscribe", invoice)
+        .then(() => (subbed[id] = true))
+        .catch((e) => {
+          console.log("failed to subscribe to invoice notifications", invoice);
+          console.log(e);
+        });
+
     tipPercent = (tip / amount) * 100;
   };
 
   $: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
   $: tipAmount = ((tip * rate) / sats).toFixed(2);
 
-  let subbed;
+  let subbed = {};
 
   onMount(async () => {
     if (browser) {
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index a4d259a7..da2d041e 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -56,7 +56,6 @@
   let submit;
 
   export let data;
-  console.log("DATA", data)
   $: refresh(data);
   let { invoice, id, user, rates } = data;
   let {