186efa0 Add commitment progress bar — radicle-explorer

added 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>

modified 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>

modified 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 {