socket improvements

4 files changed, 25 insertions, 22 deletions

diff --git a/src/lib/socket.ts b/src/lib/socket.ts
index c82810c9..26ab543c 100644
--- a/src/lib/socket.ts
+++ b/src/lib/socket.ts
@@ -1,17 +1,24 @@
 import { navigating } from "$app/stores";
 import { get } from "svelte/store";
 import { event, invoice, request, last } from "$lib/store";
-import { success, sat, sleep } from "$lib/utils";
+import { success, sat, sleep, wait } from "$lib/utils";
 import { PUBLIC_SOCKET } from "$env/static/public";
 import { invalidate } from "$app/navigation";
 
-let socket, token;
+let socket;
+let token;
 
 export const auth = () => token && send("login", token);
 
-export const send = (type, data) => {
-  socket?.readyState === 1 && socket.send(JSON.stringify({ type, data }));
-  return true;
+export const send = async (type, data) => {
+  try {
+    await wait(() => socket && socket.readyState === 1, 100, 10);
+  } catch (e: any) {
+    if (e.message === "timeout") reconnectToWebsocket();
+  }
+
+  await wait(() => socket.readyState === 1, 100, 10);
+  socket.send(JSON.stringify({ type, data }));
 };
 
 export const messages = (data) => ({
@@ -32,7 +39,6 @@ export const messages = (data) => ({
 
   async payment() {
     let { amount, confirmed } = data;
-
     invalidate("app:user");
     invalidate("app:invoice");
     invalidate("app:payments");
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 {