Correctly detect custom HTTP API ports

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>

src/Address.svelte

@@ -100,7 +100,7 @@
         <Badge variant="foreground">org</Badge>
       {/if}
     {:else if addressType === AddressType.Contract}
-      <a href={explorerLink(address, wallet)} target="_blank" rel="noreferrer">
+      <a use:link href={`/${address}`}>
         {addressLabel}
       </a>
       {#if !noBadge}

src/SeedAddress.spec.ts

@@ -17,7 +17,7 @@ describe("SeedAddress", () => {
     });
     cy.get("span.seed-icon").should("have.text", "🌱");
     cy.contains("seed.cloudhead.io")
-      .should("have.attr", "href", "/seeds/seed.cloudhead.io")
+      .should("have.attr", "href", "/seeds/seed.cloudhead.io:8777")
       .should("be.visible");
   });
 

src/SeedAddress.svelte

@@ -6,6 +6,10 @@
   export let seed: Seed;
   export let port: number;
   export let full = false;
+
+  const linkToSeed = seed.api.port
+    ? `/seeds/${seed.api.host}:${seed.api.port}`
+    : `/seeds/${formatSeedHost(seed.api.host)}`;
 </script>
 
 <style>
@@ -35,14 +39,14 @@
     <span class="seed-icon">{seed.emoji}</span>
     {#if full}
       <span>
-        <a href="/seeds/{formatSeedHost(seed.host)}" class="txt-link">
+        <a href={linkToSeed} class="txt-link">
           {formatSeedId(seed.id)}@{seed.host}
         </a>
       </span>
       <span class="txt-faded">:{port}</span>
     {:else}
       <span>
-        <a href="/seeds/{formatSeedHost(seed.host)}" class="txt-link">
+        <a href={linkToSeed} class="txt-link">
           {formatSeedHost(seed.host)}
         </a>
       </span>

src/base/projects/Header.svelte

@@ -36,6 +36,14 @@
   const updateRevision = (revision: string) => {
     project.navigateTo({ revision });
   };
+
+  function goToSeed() {
+    if (seed.api.port) {
+      navigate(`/seeds/${seed.api.host}:${seed.api.port}`);
+    } else {
+      navigate(`/seeds/${seed.api.host}`);
+    }
+  }
 </script>
 
 <style>
@@ -110,7 +118,7 @@
       <div
         class="stat seed clickable widget"
         title="Project data is fetched from this seed"
-        on:click={() => navigate(`/seeds/${seed.api.host}`)}>
+        on:click={goToSeed}>
         <span>{seed.api.host}</span>
       </div>
     {/if}

src/base/seeds/Routes.svelte

@@ -9,9 +9,9 @@
 </script>
 
 <Route path="/seeds/radicle.local">
-  <View {wallet} {session} host={"0.0.0.0"} />
+  <View {wallet} {session} hostAndPort={"0.0.0.0"} />
 </Route>
 
 <Route path="/seeds/:seed" let:params>
-  <View {wallet} {session} host={params.seed} />
+  <View {wallet} {session} hostAndPort={params.seed} />
 </Route>

src/base/seeds/Seed.ts

@@ -54,7 +54,17 @@ export class Seed {
       try {
         const url = new URL(seed.api);
         api = url.hostname;
-        apiPort = url.port ? Number(url.port) : null;
+
+        if (url.port) {
+          apiPort = Number(url.port);
+        } else if (url.protocol === "http:" && url.port === "") {
+          apiPort = 80;
+        }
+        if (url.protocol === "https:" && url.port === "") {
+          apiPort = 443;
+        } else {
+          apiPort = null;
+        }
       } catch {
         api = seed.api;
       }
@@ -130,8 +140,11 @@ export class Seed {
     return new Request("/", host).get();
   }
 
-  static async lookup(hostname: string): Promise<Seed> {
-    const host = { host: hostname, port: defaultHttpApiPort };
+  static async lookup(
+    hostname: string,
+    port: number = defaultHttpApiPort,
+  ): Promise<Seed> {
+    const host = { host: hostname, port };
     const [info, peer] = await Promise.all([
       Seed.getInfo(host),
       Seed.getPeer(host),
@@ -141,6 +154,7 @@ export class Seed {
       host: hostname,
       id: peer.id,
       version: info.version,
+      api: `https://${host.host}:${host.port}`,
     });
   }
 

src/base/seeds/View.svelte

@@ -19,10 +19,14 @@
 
   export let wallet: Wallet;
   export let session: Session | null;
-  export let host: string;
+  export let hostAndPort: string;
+
+  const [host, port] = hostAndPort.includes(":")
+    ? hostAndPort.split(":")
+    : [hostAndPort, 8777];
 
   const hostName = formatSeedHost(host);
-  const seedHost: Host = { host, port: null };
+  const seedHost: Host = { host, port: Number(port) };
   let siweSession: SeedSession | null = null;
 
   const getProjectsAndStats = async (
@@ -108,7 +112,7 @@
   <title>{hostName}</title>
 </svelte:head>
 
-{#await Seed.lookup(host)}
+{#await Seed.lookup(host, Number(port))}
   <main class="layout-centered">
     <Loading center />
   </main>
@@ -160,7 +164,7 @@
       <div class="layout-desktop" />
       <!-- API Port -->
       <div class="txt-highlight">API Port</div>
-      <div>{seed.api.port}</div>
+      <div>{port}</div>
       <div class="layout-desktop" />
       <!-- API Version -->
       <div class="txt-highlight">Version</div>

src/base/seeds/View/Projects.svelte

@@ -38,7 +38,9 @@
     navigate(
       proj.path({
         urn: project.urn,
-        seed: seed?.host,
+        seed: seed.api.port
+          ? `${seed.api.host}:${seed.api.port}`
+          : seed.api.host,
         profile: profile?.name ?? profile?.address,
         revision: project.head,
       }),

src/project.ts

@@ -430,7 +430,11 @@ export class Project implements ProjectInfo {
     if (this.profile) {
       options.profile = this.profile?.nameOrAddress;
     } else {
-      options.seed = this.seed.host;
+      if (this.seed.api.port) {
+        options.seed = `${this.seed.api.host}:${this.seed.api.port}`;
+      } else {
+        options.seed = this.seed.host;
+      }
     }
 
     return path(options);
@@ -446,10 +450,15 @@ export class Project implements ProjectInfo {
     const profile = profileName
       ? await Profile.get(profileName, ProfileType.Project, wallet)
       : null;
+
+    const [host, port] = seedHost?.includes(":")
+      ? seedHost.split(":")
+      : [seedHost, "8777"];
+
     const seed = profile
       ? profile.seed
-      : seedHost
-      ? await Seed.lookup(seedHost)
+      : host
+      ? await Seed.lookup(host, Number(port))
       : null;
 
     if (!profile && !seed) {