Add commitment progress bar

Signed-off-by: Sebastian Martinez <sebastinez@me.com>

src/BlockTimer.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { Config } from "@app/config";
+
+  export let config: Config;
+  export let startBlock: number;
+  export let duration: number;
+
+  let currentBlock: number = startBlock;
+
+  config.provider.on("block", (latestBlock: number) => {
+    if (startBlock + duration > currentBlock) currentBlock = latestBlock;
+  });
+</script>
+
+<style>
+  .parent {
+    text-align: center;
+    height: 20px;
+    width: 290px;
+    border-radius: 5px;
+    background-color: var(--color-secondary-background);
+  }
+  .loader {
+    color: #fff;
+    height: 20px;
+    width: 0px;
+    border-radius: 5px;
+    background-color: var(--color-secondary);
+  }
+</style>
+
+<div class="parent">
+  <div class="loader" style="width: {(currentBlock - startBlock) * 10}%" />
+</div>

src/base/registrations/Submit.svelte

@@ -8,6 +8,7 @@
   import Loading from '@app/Loading.svelte';
   import Modal from '@app/Modal.svelte';
   import Err from '@app/Error.svelte';
+  import BlockTimer from "@app/BlockTimer.svelte";
 
   import { registerName, State, state } from './registrar';
 
@@ -27,13 +28,19 @@
     } catch (e) {
       console.error("Error", e);
 
-      state.set(State.Failed);
+      state.set({ connection: State.Failed });
       error = e;
     }
   });
 </script>
 
-<style></style>
+<style>
+  .loader {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+</style>
 
 {#if error}
   <Err
@@ -44,35 +51,37 @@
 {:else}
   <Modal>
     <span slot="title">
-      {#if $state === State.Registered}
+      {#if $state.connection === State.Registered}
         <div>🎉</div>
       {/if}
       {subdomain}.{config.registrar.domain}
     </span>
 
     <span slot="subtitle">
-      {#if $state === State.Connecting}
+      {#if $state.connection === State.Connecting}
         Connecting...
-      {:else if $state === State.Committing}
+      {:else if $state.connection === State.Committing}
         Committing...
-      {:else if $state === State.WaitingToRegister}
+      {:else if $state.connection === State.WaitingToRegister && $state.commitmentBlock}
         Waiting for commitment time...
-      {:else if $state === State.Registering}
+      {:else if $state.connection === State.Registering}
         Registering name...
       {/if}
     </span>
 
-    <span slot="body">
-      {#if $state === State.Registered}
+    <span slot="body" class="loader">
+      {#if $state.connection === State.Registered}
         The name has been successfully registered to
-        <span class="highlight">{registrationOwner}</span>.
+        <span class="highlight">{registrationOwner}</span>
+      {:else if $state.connection === State.WaitingToRegister && $state.commitmentBlock}
+        <BlockTimer {config} startBlock={$state.commitmentBlock} duration={$state.minAge} />
       {:else}
         <Loading small center />
       {/if}
     </span>
 
     <span slot="actions">
-      {#if $state === State.Registered}
+      {#if $state.connection === State.Registered}
         <button on:click={view} class="register">
           View
         </button>

src/base/registrations/registrar.ts

@@ -30,12 +30,21 @@ export enum State {
   Registered,
 }
 
-export const state = writable(State.Connecting);
+export type Connection =
+    { connection: State.Failed }
+  | { connection: State.Connecting }
+  | { connection: State.Committing }
+  | { connection: State.WaitingToRegister; commitmentBlock: number; minAge: number }
+  | { connection: State.Registering }
+  | { connection: State.Registered };
+
+
+export const state = writable<Connection>({ connection: State.Connecting });
 
 window.registrarState = state;
 
-state.subscribe((s: State) => {
-  console.log("regiter.state", s);
+state.subscribe((s: Connection) => {
+  console.log("register.state", s);
 });
 
 export async function getRegistration(name: string, config: Config): Promise<Registration | null> {
@@ -121,7 +130,7 @@ async function commitAndRegister(name: string, owner: string, config: Config): P
 async function commit(commitment: string, fee: BigNumber, minAge: number, config: Config): Promise<void> {
   assert(config.signer);
 
-  state.set(State.Committing);
+  state.set({ connection: State.Committing });
 
   const owner = config.signer;
   const ownerAddr = await owner.getAddress();
@@ -144,8 +153,12 @@ async function commit(commitment: string, fee: BigNumber, minAge: number, config
 
   await tx.wait(1);
   session.state.updateBalance(fee.mul(-1));
-
-  state.set(State.WaitingToRegister);
+  const receipt = await config.provider.getTransactionReceipt(tx.hash);
+  state.set({
+    connection: State.WaitingToRegister,
+    commitmentBlock: receipt.blockNumber,
+    minAge
+  });
   await tx.wait(minAge + 1);
 }
 
@@ -190,7 +203,7 @@ async function permitSignature(
 
 async function register(name: string, owner: string, salt: Uint8Array, config: Config) {
   assert(config.signer);
-  state.set(State.Registering);
+  state.set({ connection: State.Registering });
 
   const tx = await registrar(config).connect(config.signer).register(
     name, owner, ethers.BigNumber.from(salt), { gasLimit: 150000 }
@@ -199,7 +212,7 @@ async function register(name: string, owner: string, salt: Uint8Array, config: C
 
   await tx.wait();
   window.localStorage.clear();
-  state.set(State.Registered);
+  state.set({ connection: State.Registered });
 }
 
 function makeCommitment(name: string, owner: string, salt: Uint8Array): string {