Handle project not found

public/index.css

@@ -303,6 +303,7 @@ input.wide {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
+	align-items: center;
 }
 
 span.small, .text-small {

src/base/projects/View.svelte

@@ -4,6 +4,7 @@
   import type { Config } from '@app/config';
   import * as proj from '@app/project';
   import Loading from '@app/Loading.svelte';
+  import Modal from '@app/Modal.svelte';
 
   import Browser from './Browser.svelte';
 
@@ -28,10 +29,15 @@
       navigate(`/projects/${urn}/head/${path}`);
     }
   };
+  const back = () => window.history.back();
 
   onMount(async () => {
-    project = State.Loading;
-    project = await proj.getInfo(urn, config);
+    try {
+      project = State.Loading;
+      project = await proj.getInfo(urn, config);
+    } catch {
+      project = null;
+    }
   });
 </script>
 
@@ -72,6 +78,17 @@
     </header>
     <Browser {urn} commit={commit || project.head} {path} {onSelect} {config} />
   {:else}
-    <!-- Not found -->
+    <Modal subtle>
+      <span slot="title">🏜️</span>
+      <span slot="body">
+        <p class="highlight"><strong>{urn}</strong></p>
+        <p>This project was not found.</p>
+      </span>
+      <span slot="actions">
+        <button on:click={back}>
+          Back
+        </button>
+      </span>
+    </Modal>
   {/if}
 </main>

src/base/registrations/Index.svelte

@@ -34,21 +34,23 @@
 </style>
 
 <main class="centered">
-  <div class="input-caption">
-    Register a <strong>{config.registrar.domain}</strong> name
-  </div>
-  <div class="input-main">
-    <span class="name">
-      <DomainInput
-        bind:value={label}
-        autofocus
-        placeholder=""
-        root={config.registrar.domain}
-      />
-    </span>
+  <div>
+    <div class="input-caption">
+      Register a <strong>{config.registrar.domain}</strong> name
+    </div>
+    <div class="input-main">
+      <span class="name">
+        <DomainInput
+          bind:value={label}
+          autofocus
+          placeholder=""
+          root={config.registrar.domain}
+        />
+      </span>
 
-    <button disabled={!label} class="primary register" on:click={register}>
-      Check
-    </button>
+      <button disabled={!label} class="primary register" on:click={register}>
+        Check
+      </button>
+    </div>
   </div>
 </main>

src/base/vesting/Index.svelte

@@ -53,70 +53,72 @@
 </style>
 
 <main class="centered">
-  {#if info}
-    <Modal>
-      <span slot="title">
-        {contractAddress}
-      </span>
-      <span slot="body">
-        {#if $state === State.Withdrawn}
-          Tokens successfully withdrawn to {formatAddress(info.beneficiary)}.
-        {:else}
-          <table>
-            <tr><td class="label">Beneficiary</td><td>{info.beneficiary}</td></tr>
-            <tr><td class="label">Allocation</td><td>{info.totalVesting} <strong>{info.symbol}</strong></td></tr>
-            <tr><td class="label">Withdrawn</td><td>{info.withdrawn} <strong>{info.symbol}</strong></td></tr>
-            <tr><td class="label">Withdrawable</td><td>{info.withdrawableBalance} <strong>{info.symbol}</strong></td></tr>
-          </table>
-        {/if}
-      </span>
-      <span slot="actions">
-        {#if isBeneficiary}
-          {#if $state === State.WithdrawingSign}
-            <button disabled data-waiting class="primary small">
-              Waiting for signature...
-            </button>
-          {:else if $state === State.Withdrawing}
-            <button disabled data-waiting class="primary small">
-              Withdrawing...
-            </button>
-          {:else if $state === State.Idle}
-            <button on:click={() => withdrawVested(contractAddress, config)} class="primary small">
-              Withdraw
-            </button>
+  <div>
+    {#if info}
+      <Modal>
+        <span slot="title">
+          {contractAddress}
+        </span>
+        <span slot="body">
+          {#if $state === State.Withdrawn}
+            Tokens successfully withdrawn to {formatAddress(info.beneficiary)}.
+          {:else}
+            <table>
+              <tr><td class="label">Beneficiary</td><td>{info.beneficiary}</td></tr>
+              <tr><td class="label">Allocation</td><td>{info.totalVesting} <strong>{info.symbol}</strong></td></tr>
+              <tr><td class="label">Withdrawn</td><td>{info.withdrawn} <strong>{info.symbol}</strong></td></tr>
+              <tr><td class="label">Withdrawable</td><td>{info.withdrawableBalance} <strong>{info.symbol}</strong></td></tr>
+            </table>
           {/if}
-        {/if}
-        <button on:click={reset} class="small">
-          Back
+        </span>
+        <span slot="actions">
+          {#if isBeneficiary}
+            {#if $state === State.WithdrawingSign}
+              <button disabled data-waiting class="primary small">
+                Waiting for signature...
+              </button>
+            {:else if $state === State.Withdrawing}
+              <button disabled data-waiting class="primary small">
+                Withdrawing...
+              </button>
+            {:else if $state === State.Idle}
+              <button on:click={() => withdrawVested(contractAddress, config)} class="primary small">
+                Withdraw
+              </button>
+            {/if}
+          {/if}
+          <button on:click={reset} class="small">
+            Back
+          </button>
+        </span>
+      </Modal>
+    {:else}
+      <div class="input-caption">
+        Enter your Radicle <strong>vesting contract</strong> address
+      </div>
+      <div class="input-main">
+        <span class="name">
+          <div>
+            <input
+              size="40"
+              placeholder=""
+              class="subdomain"
+              disabled={$state === State.Loading}
+              type="text"
+              bind:this={input}
+              bind:value={contractAddress}
+            />
+          </div>
+        </span>
+        <button
+          on:click={() => loadContract(config)}
+          class="primary"
+          data-waiting={$state === State.Loading || null}
+          disabled={$state === State.Loading}
+        >
+          Load
         </button>
-      </span>
-    </Modal>
-  {:else}
-    <div class="input-caption">
-      Enter your Radicle <strong>vesting contract</strong> address
-    </div>
-    <div class="input-main">
-      <span class="name">
-        <div>
-          <input
-            size="40"
-            placeholder=""
-            class="subdomain"
-            disabled={$state === State.Loading}
-            type="text"
-            bind:this={input}
-            bind:value={contractAddress}
-          />
-        </div>
-      </span>
-      <button
-        on:click={() => loadContract(config)}
-        class="primary"
-        data-waiting={$state === State.Loading || null}
-        disabled={$state === State.Loading}
-      >
-        Load
-      </button>
-    </div>
-  {/if}
+      </div>
+    {/if}
+  </div>
 </main>