Improve error code

public/index.css

@@ -195,11 +195,12 @@ input.wide {
 }
 .modal-title {
 	font-size: 1.75rem;
+	line-height: 1.75rem;
 	margin-bottom: 2rem;
 	color: var(--color-secondary);
 	text-align: center;
 	text-overflow: ellipsis;
-	overflow-x: hidden;
+	overflow: hidden;
 }
 .modal-body {
 	overflow-x: hidden;

src/Error.svelte

@@ -0,0 +1,35 @@
+<script lang="typescript">
+  import { createEventDispatcher } from 'svelte';
+  import Modal from '@app/Modal.svelte';
+  import type { Err } from '@app/error';
+
+  const dispatch = createEventDispatcher();
+
+  export let error: Err | null = null;
+  export let title = "Error";
+  export let subtitle: string = "";
+  export let message: string = "";
+  export let floating = false;
+
+  let body = message || (error && error.message) || "";
+</script>
+
+<Modal on:close error {floating}>
+  <span slot="title">
+    {title}
+  </span>
+
+  <span slot="subtitle">
+    {subtitle}
+  </span>
+
+  <span slot="body">
+    <strong>Error:</strong> {body}
+  </span>
+
+  <span slot="actions">
+    <button on:click={() => dispatch('close')}>
+      Back
+    </button>
+  </span>
+</Modal>

src/Modal.svelte

@@ -2,7 +2,7 @@
   import { createEventDispatcher } from 'svelte';
 
   export let floating = false;
-  export let error: Error | null = null;
+  export let error = false;
   export let subtle = false;
 
   let dispatch = createEventDispatcher();
@@ -40,36 +40,16 @@
 <div class:modal-floating={floating}>
   <div class="modal" class:error class:modal-subtle={subtle}>
     <div class="modal-title">
-      {#if error}
-        Error
-      {:else}
-        <slot name="title"></slot>
-      {/if}
+      <slot name="title"></slot>
     </div>
     <div class="modal-subtitle">
-      {#if !error}
-        <slot name="subtitle"></slot>
-      {/if}
+      <slot name="subtitle"></slot>
     </div>
     <div class="modal-body">
-      {#if error}
-        {#if error === Object(error) && error.message}
-          <strong>Error:</strong> {error.message}
-        {:else}
-          {error}
-        {/if}
-      {:else}
-        <slot name="body"></slot>
-      {/if}
+      <slot name="body"></slot>
     </div>
     <div class="modal-actions">
-      {#if error}
-        <button on:click={onClose}>
-          Dismiss
-        </button>
-      {:else}
-        <slot name="actions"></slot>
-      {/if}
+      <slot name="actions"></slot>
     </div>
   </div>
 </div>

src/base/orgs/CreateOrg.svelte

@@ -1,6 +1,8 @@
 <script lang="typescript">
   import { createEventDispatcher } from 'svelte';
   import Modal from '@app/Modal.svelte';
+  import Error from '@app/Error.svelte';
+  import type { Err } from '@app/error';
   import { Org } from '@app/base/orgs/Org';
   import type { Config } from '@app/config';
 
@@ -15,7 +17,7 @@
   }
 
   let state = State.Idle;
-  let error: Error | null = null;
+  let error: Err | null = null;
   let org: Org | null = null;
 
   const dispatch = createEventDispatcher();
@@ -38,56 +40,60 @@
   };
 </script>
 
-<Modal floating {error} on:close>
-  <span slot="title">
-    {#if !org}
-      Create an Org
-    {:else}
-      🎉
-    {/if}
-  </span>
+{#if error}
+  <Error {error} floating on:close />
+{:else}
+  <Modal floating on:close>
+    <span slot="title">
+      {#if !org}
+        Create an Org
+      {:else}
+        🎉
+      {/if}
+    </span>
 
-  <span slot="subtitle">
-    {#if org}
-      <strong>Your org was successfully created.</strong>
-    {/if}
-  </span>
+    <span slot="subtitle">
+      {#if org}
+        <strong>Your org was successfully created.</strong>
+      {/if}
+    </span>
 
-  <span slot="body">
-    {#if org}
-      <table>
-        <tr><td class="label">Address</td><td>{org.address}</td></tr>
-        <tr><td class="label">Safe</td><td>{org.safe}</td></tr>
-      </table>
-    {:else}
-      <table>
-        <tr><td class="label">Member</td><td>{owner}</td></tr>
-      </table>
-    {/if}
-  </span>
+    <span slot="body">
+      {#if org}
+        <table>
+          <tr><td class="label">Address</td><td>{org.address}</td></tr>
+          <tr><td class="label">Safe</td><td>{org.safe}</td></tr>
+        </table>
+      {:else}
+        <table>
+          <tr><td class="label">Member</td><td>{owner}</td></tr>
+        </table>
+      {/if}
+    </span>
 
-  <span slot="actions">
-    {#if !org}
-      <button
-        on:click={createOrg}
-        class="primary"
-        data-waiting={[State.Signing, State.Pending].includes(state) || null}
-        disabled={state !== State.Idle}
-      >
-        {#if state === State.Pending}
-          Creating...
-        {:else}
-          Create
-        {/if}
-      </button>
+    <span slot="actions">
+      {#if !org}
+        <button
+          on:click={createOrg}
+          class="primary"
+          data-waiting={[State.Signing, State.Pending].includes(state) || null}
+          disabled={state !== State.Idle}
+        >
+          {#if state === State.Pending}
+            Creating...
+          {:else}
+            Create
+          {/if}
+        </button>
 
-      <button on:click={() => dispatch('close')} class="text">
-        Cancel
-      </button>
-    {:else}
-      <button on:click={() => dispatch('close')}>
-        Done
-      </button>
-    {/if}
-  </span>
-</Modal>
+        <button on:click={() => dispatch('close')} class="text">
+          Cancel
+        </button>
+      {:else}
+        <button on:click={() => dispatch('close')}>
+          Done
+        </button>
+      {/if}
+    </span>
+  </Modal>
+{/if}

src/base/register/Routes.svelte

@@ -1,10 +1,12 @@
 <script lang="typescript">
-  import { Route } from "svelte-routing";
+  import { Route, navigate } from "svelte-routing";
   import Register from '@app/base/register/Register.svelte';
   import Begin from '@app/base/register/steps/Begin.svelte';
   import Submit from '@app/base/register/steps/Submit.svelte';
+  import Error from '@app/Error.svelte';
   import type { Config } from '@app/config';
   import type { Session } from '@app/session';
+  import { Failure } from '@app/error';
 
   export let session: Session | null;
   export let config: Config;
@@ -19,8 +21,13 @@
   <Begin {config} subdomain={params.name} {query} />
 </Route>
 
-{#if session}
-  <Route path="register/:name/submit" let:params>
+<Route path="register/:name/submit" let:params>
+  {#if session}
     <Submit {config} subdomain={params.name} {query} {session} />
-  </Route>
-{/if}
+  {:else}
+    <Error
+      message={"You must connect your wallet to register"}
+      on:close={() => navigate("/register")}
+    />
+  {/if}
+</Route>

src/base/register/state.ts

@@ -11,3 +11,7 @@ export enum State {
 }
 
 export const state = writable(State.Idle);
+
+state.subscribe(s => {
+  console.log("regiter.state", s);
+});

src/base/register/steps/Submit.svelte

@@ -1,6 +1,5 @@
 <script lang="typescript">
   import { onMount } from 'svelte';
-  import { get } from 'svelte/store';
   import { navigate } from 'svelte-routing';
   import { ethers } from 'ethers';
   import { registerName, registrationFee } from '../registrar';
@@ -22,14 +21,12 @@
   }
 
   onMount(async () => {
-    let oldState = get(state);
-
     try {
       await registerName(subdomain, registrationOwner, config);
     } catch (e) {
       console.error("Error", e);
 
-      state.set(oldState);
+      state.set(State.Idle);
       error = e;
     }
   });
@@ -52,7 +49,16 @@
     </div>
   {/if}
 
-  {#if $state === State.Approving}
+  {#if error}
+    <div class="modal-body error">
+      <strong>Error:</strong> {error.message}
+    </div>
+    <div class="modal-actions">
+      <button on:click={() => navigate("/register")} class="error">
+        Back
+      </button>
+    </div>
+  {:else if $state === State.Approving}
     <div class="modal-body">
       Approving Registry for {#await getFee(config)}
         ?
@@ -73,7 +79,7 @@
     </div>
   {:else if $state === State.WaitingToRegister}
     <div class="modal-body">
-      Waiting for wallet confirmation...
+      <!-- TODO -->
     </div>
     <div class="modal-actions">
       <button disabled class="primary register">
@@ -88,21 +94,12 @@
     </div>
   {:else if $state === State.Registered}
     <div class="modal-body">
-      The name <span class="domain">{subdomain}</span> has been successfully registered to {session.address}.
+      The name <span class="domain">{subdomain}</span> has been successfully registered to {registrationOwner}.
     </div>
     <div class="modal-actions">
       <button on:click={() => state.set(State.Idle)} class="primary register">
         Done
       </button>
     </div>
-  {:else if error}
-    <div class="modal-body error">
-      <strong>Error:</strong> {error.message}
-    </div>
-    <div class="modal-actions">
-      <button on:click={() => navigate("/register")} class="error">
-        Back
-      </button>
-    </div>
   {/if}
 </div>

src/error.ts

@@ -8,6 +8,7 @@ export interface Err {
 
 export enum Failure {
   TransactionFailed = 1,
+  NotAuthenticated = 2,
 }
 
 export const error = writable<Err | null>(null);