4b1eef4 More improvements to registration — radicle-explorer

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

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

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

deleted 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);
 });

modified src/config.ts

@@ -5,6 +5,7 @@ import config from "@app/config.json";

 declare global {
   interface Window {
     ethereum: any;
     registrarState: any;
   }
 }