More improvements to registration

src/Modal.svelte

@@ -41,20 +41,24 @@
     );
   }
   .modal-title {
-    font-size: 1.75rem;
+    font-size: 1.25rem;
+    font-weight: bold;
     line-height: 2.625rem;
-    margin-bottom: 2rem;
-    color: var(--color-secondary);
+    margin-bottom: 1rem;
     text-align: center;
     text-overflow: ellipsis;
     overflow: hidden;
   }
+  .modal-subtitle {
+    color: var(--color-secondary);
+  }
   .modal-body {
     overflow-x: hidden;
     text-overflow: ellipsis;
     margin: 3rem 0;
   }
   .modal-actions {
+    padding-top: 0.5rem;
     margin-top: 2rem;
     text-align: center;
   }

src/base/registrations/Submit.svelte

@@ -9,8 +9,7 @@
   import Modal from '@app/Modal.svelte';
   import Err from '@app/Error.svelte';
 
-  import { registerName } from './registrar';
-  import { State, state } from './state';
+  import { registerName, State, state } from './registrar';
 
   export let config: Config;
   export let subdomain: string;
@@ -20,7 +19,8 @@
   let error: Error | null = null;
   let registrationOwner = owner || session.address;
 
-  const done = () => navigate(`/registrations/${subdomain}`)
+  const view = () => navigate(`/registrations/${subdomain}`)
+  const done = () => navigate(`/registrations`)
 
   onMount(async () => {
     try {
@@ -28,7 +28,7 @@
     } catch (e) {
       console.error("Error", e);
 
-      state.set(State.Idle);
+      state.set(State.Failed);
       error = e;
     }
   });
@@ -45,31 +45,38 @@
 {:else}
   <Modal>
     <span slot="title">
+      {#if $state === State.Registered}
+        <div>🎉</div>
+      {/if}
       {subdomain}.{config.registrar.domain}
     </span>
 
-    <span slot="body">
-      {#if $state === State.Committing}
+    <span slot="subtitle">
+      {#if $state === State.Connecting}
+        Connecting...
+      {:else if $state === State.Committing}
         Committing...
       {:else if $state === State.WaitingToRegister}
         Waiting for commitment time...
       {:else if $state === State.Registering}
         Registering name...
-      {:else if $state === State.Registered}
-        The name <strong>{subdomain}</strong> has been successfully registered to
-        <strong>{registrationOwner}</strong>.
+      {/if}
+    </span>
+
+    <span slot="body">
+      {#if $state === State.Registered}
+        The name has been successfully registered to
+        <span class="highlight">{registrationOwner}</span>.
+      {:else}
+        <Loading small center />
       {/if}
     </span>
 
     <span slot="actions">
       {#if $state === State.Registered}
-        <button on:click={done} class="primary register">
-          Done
+        <button on:click={view} class="register">
+          View
         </button>
-      {:else}
-        <div class="modal-actions">
-          <Loading small center />
-        </div>
       {/if}
     </span>
   </Modal>

src/base/registrations/registrar.ts

@@ -1,10 +1,10 @@
 // TODO: Show "look at your wallet" / "confirm tx" before state change.
 // TODO: Two registration actions with same label
 import { ethers } from 'ethers';
+import { writable } from 'svelte/store';
 import type { BigNumber } from 'ethers';
 import type { EnsResolver } from '@ethersproject/providers';
 import type { TypedDataSigner } from '@ethersproject/abstract-signer';
-import { State, state } from './state';
 import * as session from '@app/session';
 import { Failure } from '@app/error';
 import type { Config } from '@app/config';
@@ -33,6 +33,23 @@ export interface Registration {
   resolver: EnsResolver
 }
 
+export enum State {
+  Failed = -1,
+  Connecting,
+  Committing,
+  WaitingToRegister,
+  Registering,
+  Registered,
+}
+
+export const state = writable(State.Connecting);
+
+window.registrarState = state;
+
+state.subscribe((s: State) => {
+  console.log("regiter.state", s);
+});
+
 export async function getRegistration(name: string, config: Config): Promise<Registration | null> {
   const resolver = await config.provider.getResolver(name);
   if (! resolver) {

src/base/registrations/state.ts

@@ -1,16 +0,0 @@
-import { derived, writable } from "svelte/store";
-
-export enum State {
-  Failed = -1,
-  Idle,
-  Committing,
-  WaitingToRegister,
-  Registering,
-  Registered,
-}
-
-export const state = writable(State.Idle);
-
-state.subscribe(s => {
-  console.log("regiter.state", s);
-});

src/config.ts

@@ -5,6 +5,7 @@ import config from "@app/config.json";
 declare global {
   interface Window {
     ethereum: any;
+    registrarState: any;
   }
 }