auth broken on refresh page

packages/svelte/src/lib/components/gun/relay/GunRelay.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+    import { useRelay } from '$lib/gun/relay';
+    import { useRelays } from '$lib/gun/relays';
+    import UiLayer from '../ui/UiLayer.svelte';
+    import GunRelayList from './GunRelayList.svelte';
+  
+    export let text = '';
+  
+    const { relay, setPeer, resetPeer } = useRelay();
+    let open = false;
+
+    console.log($relay)
+  
+    const { relays, loadRelays } = useRelays();
+  
+    function toggleOpen() {
+      open = !open;
+    }
+  </script>
+
+  <div class="relative text-left bg-ableton-purple p-10">
+    <button class="flex" on:click={toggleOpen}>
+      <div class="btn btn-primary text-xl -mt-1 text-base-content">Open Relays</div>
+      {#if text}
+        <div class="ml-2 font-bold">{text}</div>
+      {/if}
+      <div
+        class="p-1 bottom-0 left-2 rounded-full transition duration-300ms ease-in-out opacity-50 absolute"
+        style="background-color: {$relay.blink ? 'white' : 'black'}"
+      ></div>
+    </button>
+
+    <!-- Aggiungi questa sezione per mostrare il relay connesso -->
+    {#if $relay.peer}
+      <div class="mt-2 text-sm text-gray-600 dark:text-gray-400">
+        Relay connesso: {$relay.peer}
+      </div>
+    {/if}
+
+    <UiLayer {open} on:close={() => (open = false)}>
+      <div class="p-4 min-w-60vw max-w-full">
+        <div
+          class="h-2 w-full mb-2 rounded-full transition-all duration-300 ease-in-out opacity-40"
+          style="background-color: {$relay.blink ? 'white' : 'black'}"
+        ></div>
+        <div class="flex flex-col items-start">
+          <div class="p-0 flex items-center flex-wrap w-full">
+            Host:
+            <input
+              class="mx-1 p-2 rounded-lg flex-auto dark:bg-gray-800"
+              bind:value={$relay.peer}
+            />
+            <button class="button m-1" on:click={() => setPeer($relay.peer)}>Set</button>
+            <button class="button m-1" on:click={resetPeer}>Reset</button>
+          </div>
+
+          {#if $relay.status !== 'offline'}
+            <div class="info">
+              <div class="p-0">Relay server is {$relay.status} for {$relay.age}</div>
+              <div class="num p-0">Delay: {$relay.delay} ms</div>
+              <div class="num p-0">Pulse drift: {$relay.lag} ms</div>
+              <div class="num p-0">Active wires: {$relay.activeWires} / {$relay.totalConnections}</div>
+              <div class="p-0">Data storage is {$relay.store ? 'enabled' : 'disabled'}</div>
+            </div>
+          {/if}
+        </div>
+        <GunRelayList />
+      </div>
+    </UiLayer>
+  </div>
+
+  <style lang="postcss">
+    .num {
+      font-variant-numeric: tabular-nums;
+    }
+  
+    .active {
+      @apply text-lg bg-gray-900 font-bold;
+    }
+  </style>

packages/svelte/src/lib/components/gun/relay/GunRelayList.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { useRelay } from '$lib/gun/relay';
+    import { useRelays } from '$lib/gun/relays';
+  
+    const { relay, setPeer, resetPeer } = useRelay();
+    const { relays, loadRelays } = useRelays();
+  
+    onMount(() => {
+      loadRelays();
+    });
+  </script>
+
+  <div class="flex flex-col">
+    <div class="flex items-center">
+      <div class="text-lg text-left">Volunteer relay peers:</div>
+      <div class="flex-auto"></div>
+      <button class="button m-1" on:click={loadRelays}>
+        <div class="i-la-redo-alt"></div>
+      </button>
+    </div>
+    <ul class="flex flex-col font-normal items-start">
+      {#each Object.entries($relays) as [host, link] (host)}
+        <li 
+          class="flex w-full text-left p-1 hover:bg-light-500 cursor-pointer hover:dark:bg-gray-600"
+          class:active={link.url === $relay.peer}
+          style="order: {link.ping}"
+          on:click={() => setPeer(link.url)}
+        >
+          <div class="flex-1 underline">{link.host}</div>
+          <div class="font-bold">{link.ping} ms</div>
+        </li>
+      {/each}
+    </ul>
+  </div>
+
+  <style lang="postcss">
+    .active {
+      @apply text-lg bg-gray-900 font-bold dark:bg-gray-700;
+    }
+  </style>

packages/svelte/src/lib/components/gun/ui/UiLayer.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    export let open = false;
+    export let offset = '';
+    export let closeButton = true;
+    export let back = true;
+  
+    import { createEventDispatcher } from 'svelte';
+    import { fade } from 'svelte/transition';
+    const dispatch = createEventDispatcher();
+  
+    function close() {
+      dispatch('close');
+    }
+  </script>
+
+  {#if open}
+    <div class="fixed w-full h-full top-0 left-0 z-50 flex flex-col items-center text-white rounded-none" transition:fade>
+      {#if back}
+      <div 
+      class="bg-gray-800 bg-opacity-30 w-full h-full absolute z-10 cursor-pointer backdrop-filter backdrop-blur-sm" 
+      on:click={close} 
+      on:keydown={(e) => e.key === 'Enter' && close()}
+      tabindex="0"
+      role="button"
+      aria-label="Chiudi"
+      transition:fade
+    ></div>
+      {/if}
+      <div 
+        class="layer" 
+        style="top: {offset || '10vh'}" 
+        transition:fade
+      >
+        {#if closeButton}
+          <button 
+            class="absolute top-4 right-4 p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200"
+            on:click={close}
+            aria-label="Close"
+          >
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        {/if}
+        <slot></slot>
+      </div>
+    </div>
+  {/if}
+
+  <style lang="postcss">
+    .layer {
+      @apply bg-white dark:bg-gray-800 rounded-3xl z-50 shadow-2xl overflow-y-scroll overscroll-contain max-h-[88vh] max-w-[98vw] relative;
+      overscroll-behavior-y: none;
+    }
+  </style>

packages/svelte/src/lib/components/gun/user/UserGraph.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+    import { onMount, onDestroy } from 'svelte';
+    import { useGun } from '$lib/gun/gun';
+    import AccountAvatar from '../account/AccountAvatar.svelte';
+    import { useColor } from '$lib/gun/colors';
+  import { fade } from 'svelte/transition';
+  
+
+    let colorDeep = useColor("deep");
+    let graph = {};
+    let gun = useGun();
+  
+    function updateGraph() {
+      graph = { ...gun._.graph };
+    }
+  
+    let timer;
+  
+    onMount(() => {
+      updateGraph();
+      timer = setInterval(updateGraph, 1000);
+    });
+  
+    onDestroy(() => {
+      if (timer) clearInterval(timer);
+    });
+  
+    function toggleShow(node) {
+      node.show = !node.show;
+      graph = graph;
+    }
+  
+    function formatValue(value) {
+      if (typeof value === 'object' && value !== null) {
+        return JSON.stringify(value, null, 2);
+      }
+      return value;
+    }
+  </script>
+
+  <article class="overflow-hidden bg-ableton-beige m-4 p-10 rounded-none  break-all text-white">
+    <h2 class="card-title font-medium text-2xl mb-4 text-black">User Graph</h2>
+
+    {#each Object.entries(graph) as [id, node]}
+      <div 
+        class="p-2 text-sm w-full text-white " 
+        style="background-color: {colorDeep.hex(id)};"
+      >
+        <div class="flex cursor-pointer" on:click={() => toggleShow(node)}>
+          {#if id[0] === '~'}
+            <AccountAvatar pub={id.slice(1, 88)} size={20} />
+          {/if}
+          <div class="item font-bold">{id[0] === '~' ? id.slice(88) : id}</div>
+        </div>
+        {#if node.show}
+          <section transition:fade>
+            {#each Object.entries(node) as [key, value]}
+              {#if key !== '_' && key !== 'show'}
+                <div class="p-2 border-t border-gray-700">
+                  <div class="font-semibold text-blue-400">{key}</div>
+                  <pre class="whitespace-pre-wrap break-words text-xs">{formatValue(value)}</pre>
+                </div>
+              {/if}
+            {/each}
+          </section>
+        {/if}
+      </div>
+    {/each}
+  </article>
+
+  <style>
+    pre {
+      max-height: 200px;
+      overflow-y: auto;
+    }
+  </style>

packages/svelte/src/lib/gun/auth.ts

@@ -7,6 +7,7 @@ import type { IGunUserInstance } from "gun/types";
 import { auth, leave, useUser, isPair } from "./user";
 import { useGun } from "./gun";
 import SEA from "gun/sea";
+import { browser } from "$app/environment";
 const MESSAGE_TO_SIGN = "Accesso a GunDB con Ethereum";
 
 export function initializeAuth() {
@@ -229,8 +230,11 @@ pass.update(p => ({
 }));
 
 function genLink(text = "", auth_url = "#/auth/") {
-  let base = encodeURIComponent(text);
-  return window.location.origin + window.location.pathname + auth_url + base;
+  if (browser) {
+    let base = encodeURIComponent(text);
+
+    return window.location.origin + window.location.pathname + auth_url + base;
+}
 }
 
 export function parseLink(link: string, auth_url = "#/auth/") {

packages/svelte/src/lib/gun/gun.ts

@@ -12,6 +12,7 @@ import "gun/lib/store";
 import "gun/lib/rindexed";
 import "gun/lib/webrtc";
 import "gun-eth";
+import "gun/lib/yson.js";
 
 import { peers, validToken } from "../../../gun.config";