Display search property alongside host in relay name (#452)

packages/app/src/Element/Relay.tsx

@@ -18,6 +18,7 @@ import { RootState } from "State/Store";
 import { RelaySettings } from "@snort/nostr";
 
 import messages from "./messages";
+import { getRelayName } from "Util";
 
 export interface RelayProps {
   addr: string;
@@ -30,7 +31,7 @@ export default function Relay(props: RelayProps) {
   const allRelaySettings = useSelector<RootState, Record<string, RelaySettings>>(s => s.login.relays);
   const relaySettings = allRelaySettings[props.addr];
   const state = useRelayState(props.addr);
-  const name = useMemo(() => new URL(props.addr).host, [props.addr]);
+  const name = useMemo(() => getRelayName(props.addr), [props.addr]);
 
   function configure(o: RelaySettings) {
     dispatch(

packages/app/src/Pages/Root.tsx

@@ -9,7 +9,7 @@ import { RootState } from "State/Store";
 import Timeline from "Element/Timeline";
 import { System } from "System";
 import { TimelineSubject } from "Feed/TimelineFeed";
-import { debounce, sha256, unwrap } from "Util";
+import { debounce, getRelayName, sha256, unwrap } from "Util";
 
 import messages from "./messages";
 
@@ -87,7 +87,7 @@ export default function RootPage() {
             <optgroup label="Paid Relays">
               {paidRelays.map(a => (
                 <option key={a.url} value={a.url}>
-                  {new URL(a.url).host}
+                  {getRelayName(a.url)}
                 </option>
               ))}
             </optgroup>
@@ -95,7 +95,7 @@ export default function RootPage() {
           <optgroup label="Public Relays">
             {publicRelays.map(a => (
               <option key={a.url} value={a.url}>
-                {new URL(a.url).host}
+                {getRelayName(a.url)}
               </option>
             ))}
           </optgroup>

packages/app/src/Util.test.ts

@@ -1,4 +1,4 @@
-import { splitByUrl, magnetURIDecode } from "./Util";
+import { splitByUrl, magnetURIDecode, getRelayName } from "./Util";
 
 describe("splitByUrl", () => {
   it("should split a string by URLs", () => {
@@ -56,3 +56,22 @@ describe("magnet", () => {
     ]);
   });
 });
+
+describe("getRelayName", () => {
+  it("should return relay name", () => {
+    const url = "wss://relay.snort.social/";
+    const output = getRelayName(url);
+    expect(output).toEqual("relay.snort.social");
+  });
+  it("should return relay name with search property", () => {
+    const url = "wss://relay.example1.com/?lang=en";
+    const output = getRelayName(url);
+    expect(output).toEqual("relay.example1.com?lang=en");
+  });
+  it("should return relay name without pathname", () => {
+    const url =
+      "wss://relay.example2.com/npub1sn0rtcjcf543gj4wsg7fa59s700d5ztys5ctj0g69g2x6802npjqhjjtws?broadcast=true";
+    const output = getRelayName(url);
+    expect(output).toEqual("relay.example2.com?broadcast=true");
+  });
+});

packages/app/src/Util.ts

@@ -462,3 +462,8 @@ export async function hmacSha256(key: Uint8Array, ...messages: Uint8Array[]) {
     return hmac(hash, key, secp.utils.concatBytes(...messages));
   }
 }
+
+export function getRelayName(url: string) {
+  const parsedUrl = new URL(url);
+  return parsedUrl.host + parsedUrl.search;
+}