Add home page

src/App.svelte

@@ -4,16 +4,13 @@
   import { getConfig } from '@app/config';
   import { session } from '@app/session';
 
+  import Home from '@app/base/home/Home.svelte';
   import Vesting from '@app/base/vesting/Vesting.svelte';
   import Register from '@app/base/register/Routes.svelte';
   import Orgs from '@app/base/orgs/Routes.svelte';
+  import Resolve from '@app/base/resolve/Routes.svelte';
   import Header from '@app/Header.svelte';
 
-  const defaultPath = "register";
-  const path = window.location.pathname;
-  const query = new URLSearchParams(window.location.search);
-  export let url = path === "/" ? defaultPath : path;
-
   function handleKeydown(event: KeyboardEvent) {
     if (event.key === 'Enter') {
       (document.querySelector('button.primary') as HTMLElement).click();
@@ -39,12 +36,16 @@
   <div class="app">
     <Header session={$session} {config} />
     <div class="wrapper">
-      <Router url="{url}">
+      <Router>
+        <Route path="/">
+          <Home />
+        </Route>
         <Route path="vesting">
           <Vesting {config} session={$session} />
         </Route>
-        <Register {config} {query} session={$session} />
+        <Register {config} session={$session} />
         <Orgs {config} />
+        <Resolve {config} />
       </Router>
     </div>
   </div>

src/Header.svelte

@@ -41,6 +41,8 @@
     margin-right: 1.5rem;
     font-weight: 500;
     color: var(--color-foreground-6);
+  }
+  header a {
     border: none;
   }
   header .nav a:hover {
@@ -84,7 +86,7 @@
 
 <header>
   <div class="left">
-    <Logo />
+    <a use:link href="/"><Logo /></a>
     <div class="nav">
       <a use:link href="/register/">Register</a>
       <a use:link href="/vesting/">Vesting</a>

src/base/home/Home.svelte

@@ -0,0 +1,17 @@
+<script lang="typescript">
+  import { navigate } from 'svelte-routing';
+
+  let input: string = "";
+  const search = () => {
+    navigate(`/resolve?${
+      new URLSearchParams({ q: input })
+    }`);
+  };
+</script>
+
+<main>
+  <input size="40" type="text" bind:value={input} placeholder="Enter a name, address or domain..." />
+  <button class="primary" on:click={search} disabled={!input}>
+    Search
+  </button>
+</main>

src/base/register/Routes.svelte

@@ -7,23 +7,23 @@
   import Error from '@app/Error.svelte';
   import type { Config } from '@app/config';
   import type { Session } from '@app/session';
+  import { getSearchParam } from '@app/utils';
 
   export let session: Session | null;
   export let config: Config;
-  export let query: Record<string, any>;
 </script>
 
 <Route path="register">
   <Register {config} />
 </Route>
 
-<Route path="register/:name" let:params>
-  <Begin {config} subdomain={params.name} {query} />
+<Route path="register/:name" let:params let:location>
+  <Begin {config} subdomain={params.name} owner={getSearchParam("owner", location)} />
 </Route>
 
-<Route path="register/:name/submit" let:params>
+<Route path="register/:name/submit" let:params let:location>
   {#if session}
-    <Submit {config} subdomain={params.name} {query} {session} />
+    <Submit {config} subdomain={params.name} owner={getSearchParam("owner", location)} {session} />
   {:else}
     <Error
       message={"You must connect your wallet to register"}

src/base/register/steps/Begin.svelte

@@ -18,10 +18,10 @@
 
   export let config: Config;
   export let subdomain: string;
-  export let query: Record<string, any>;
+  export let owner: string | null;
 
   let state = State.Initial;
-  $: registrationOwner = query.get("owner") || ($session && $session.address);
+  $: registrationOwner = owner || ($session && $session.address);
 
   async function begin() {
     state = State.CheckingAvailability;

src/base/register/steps/Submit.svelte

@@ -3,8 +3,7 @@
   // TODO: When transfering name, warn about transfering to org.
   import { onMount } from 'svelte';
   import { navigate } from 'svelte-routing';
-  import { ethers } from 'ethers';
-  import { registerName, registrationFee } from '../registrar';
+  import { registerName } from '../registrar';
   import { State, state } from '../state';
   import type { Session } from '@app/session';
   import type { Config } from '@app/config';
@@ -14,16 +13,11 @@
 
   export let config: Config;
   export let subdomain: string;
-  export let query: Record<string, any>;
+  export let owner: string | null;
   export let session: Session;
 
   let error: Error | null = null;
-  let registrationOwner = query.get("owner") || session.address;
-
-  async function getFee(cfg: Config) {
-    let fee = await registrationFee(cfg);
-    return ethers.utils.formatUnits(fee);
-  }
+  let registrationOwner = owner || session.address;
 
   const done = () => navigate(`/registrations/${subdomain}`)
 

src/base/resolve/Resolve.svelte

@@ -0,0 +1,27 @@
+<script lang="typescript">
+  import { onMount } from 'svelte';
+  import { ethers } from 'ethers';
+  import { navigate } from 'svelte-routing';
+  import type { Config } from '@app/config';
+  import * as utils from '@app/utils';
+
+  export let config: Config;
+  export let query: string | null;
+
+  onMount(() => {
+    if (query) {
+      if (ethers.utils.isAddress(query)) {
+        // Go to org.
+        navigate(`/orgs/${query}`, { replace: true });
+      } else if (utils.isRadicleId(query)) {
+        // Go to Radicle entity.
+        alert("Radicle IDs are not yet supported");
+      } else {
+        let label = utils.parseEnsLabel(query, config);
+        navigate(`/registrations/${label}`, { replace: true });
+      }
+    } else {
+      navigate('/');
+    }
+  });
+</script>

src/base/resolve/Routes.svelte

@@ -0,0 +1,12 @@
+<script lang="typescript">
+  import { Route } from "svelte-routing";
+  import Resolve from '@app/base/resolve/Resolve.svelte';
+  import type { Config } from '@app/config';
+  import * as utils from '@app/utils';
+
+  export let config: Config;
+</script>
+
+<Route path="/resolve" let:location>
+  <Resolve {config} query={utils.getSearchParam("q", location)} />
+</Route>

src/index.ts

@@ -1,5 +1,17 @@
 import App from "./App.svelte";
 
+declare global {
+  // Taken from svelte-routing, since it's not exported.
+  interface RouteLocation {
+    pathname: string;
+    search: string;
+    hash?: string;
+    state: {
+      [k in string | number]: unknown;
+    };
+  }
+}
+
 let app = new App({
   target: document.body,
 });

src/utils.ts

@@ -18,13 +18,25 @@ export function capitalize(s: string) {
 }
 
 // Takes a domain name, eg. 'cloudhead.radicle.eth' and
-// returns the label, eg. 'cloudhead'.
-export function parseEnsLabel(name: string, config: Config) {
+// returns the label, eg. 'cloudhead', otherwise `null`.
+export function parseEnsLabel(name: string, config: Config): string | null {
   let domain = config.registrar.domain.replace(".", "\\.");
-  return name.replace(new RegExp(`\\.${domain}$`), "");
+  let label = name.replace(new RegExp(`\\.${domain}$`), "");
+
+  return label;
 }
 
 // Return the current unix time.
 export function unixTime(): number {
   return Math.floor(Date.now() / 1000);
 }
+
+// Check whether the input is a Radicle ID.
+export function isRadicleId(input: string): boolean {
+  return /^rad:[a-z]+:[a-zA-Z0-9]+$/.test(input);
+}
+
+export function getSearchParam(key: string, location: RouteLocation): string | null {
+  let params = new URLSearchParams(location.search);
+  return params.get(key);
+};