Merge pull request #49 from fiatjaf/readable-relays

readable relay domain names on relay browsing page

src/app/Routes.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {Route} from "svelte-routing"
   import {onReady} from "src/agent/db"
+  import {base64DecodeOrPlainWebSocketURL} from "src/util/misc"
   import EnsureData from "src/app/EnsureData.svelte"
   import Notifications from "src/app/views/Notifications.svelte"
   import Bech32Entity from "src/app/views/Bech32Entity.svelte"
@@ -71,9 +72,9 @@
     </Route>
     <Route path="/keys" component={UserKeys} />
     <Route path="/relays" component={RelayList} />
-    <Route path="/relays/:b64url" let:params>
+    <Route path="/relays/:b64OrUrl" let:params>
       {#key params.b64url}
-        <RelayDetail url={atob(params.b64url)} />
+        <RelayDetail url={base64DecodeOrPlainWebSocketURL(params.b64OrUrl)} />
       {/key}
     </Route>
     <Route path="/profile" component={UserProfile} />

src/app/shared/RelayCard.svelte

@@ -4,7 +4,7 @@
   import {between} from "hurdak/lib/hurdak"
   import {onMount} from "svelte"
   import {fly} from "svelte/transition"
-  import {poll, stringToHue, hsl} from "src/util/misc"
+  import {poll, stringToHue, hsl, webSocketURLToPlainOrBase64} from "src/util/misc"
   import Toggle from "src/partials/Toggle.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import pool from "src/agent/pool"
@@ -55,7 +55,7 @@
   <div class="flex items-center justify-between gap-2">
     <div class="flex items-center gap-2 text-xl">
       <i class={relay.url.startsWith("wss") ? "fa fa-lock" : "fa fa-unlock"} />
-      <Anchor type="unstyled" href={`/relays/${btoa(relay.url)}`}>
+      <Anchor type="unstyled" href={`/relays/${webSocketURLToPlainOrBase64(relay.url)}`}>
         {last(relay.url.split("://"))}
       </Anchor>
       {#if showStatus}

src/app/shared/RelayTitle.svelte

@@ -2,6 +2,7 @@
   import {onMount} from "svelte"
   import {between} from "hurdak/lib/hurdak"
   import {displayRelay} from "src/util/nostr"
+  import {webSocketURLToPlainOrBase64} from "src/util/misc"
   import {poll, stringToHue, hsl} from "src/util/misc"
   import Anchor from "src/partials/Anchor.svelte"
   import pool from "src/agent/pool"
@@ -23,7 +24,7 @@
   <i class={relay.url.startsWith("wss") ? "fa fa-lock" : "fa fa-unlock"} />
   <Anchor
     type="unstyled"
-    href={`/relays/${btoa(relay.url)}`}
+    href={`/relays/${webSocketURLToPlainOrBase64(relay.url)}`}
     class="border-b border-solid"
     style={`border-color: ${hsl(stringToHue(relay.url))}`}>
     {displayRelay(relay)}

src/util/misc.ts

@@ -394,3 +394,27 @@ export const shadeColor = (color, percent) => {
 
   return "#" + RR + GG + BB
 }
+
+export const base64DecodeOrPlainWebSocketURL = (data: string): string => {
+  try {
+    return atob(data)
+  } catch (err) {
+    if (data.startsWith("ws://") || data.startsWith("wss://")) {
+      return data
+    }
+    return "wss://" + data
+  }
+}
+
+export const webSocketURLToPlainOrBase64 = (url: string): string => {
+  if (url.startsWith("ws://")) {
+    return btoa(url)
+  }
+  if (url.startsWith("wss://")) {
+    url = url.slice(6)
+  }
+  if (url.includes("/")) {
+    return btoa(url)
+  }
+  return url
+}