e12daa2 Improve registration flow — radicle-explorer

modified src/Loading.svelte

@@ -2,6 +2,7 @@

   export let small = false;
   export let color = "secondary";
   export let center = false;
   export let fadeIn = false;
 </script>
 <style>

@@ -76,7 +77,7 @@

   }
 </style>
 <div class="spinner fade-in" class:small class:center>
 <div class="spinner" class:fade-in={fadeIn} class:small class:center>
   <div class="bounce1" style="background-color: var(--color-{color})"></div>
   <div class="bounce2" style="background-color: var(--color-{color})"></div>
   <div class="bounce3" style="background-color: var(--color-{color})"></div>

modified src/base/orgs/View.svelte

@@ -86,7 +86,7 @@

 </style>
 {#await Org.get(address, config)}
   <Loading />
   <Loading fadeIn />
 {:then org}
   {#if org}
     <main>

modified src/base/registrations/Index.svelte

@@ -6,29 +6,12 @@

   import Modal from '@app/Modal.svelte';
   import DomainInput from '@app/ens/DomainInput.svelte';
   enum State {
     Idle,
     CheckingAvailability,
     NameAvailable,
     NameUnavailable,
   }
   export let config: Config;
   let state = State.Idle;
   let inputValue: string;
   function checkAvailability(name: string) {
     state = State.CheckingAvailability;
   let label: string;
     registrar(config).available(name).then((isAvailable: boolean) => {
       if (isAvailable) {
         state = State.NameAvailable;
         navigate(`/registrations/${name}/form`);
       } else {
         state = State.NameUnavailable;
       }
     });
   function register() {
     navigate(`/registrations/${label}/form`);
   }
 </script>

@@ -57,47 +40,21 @@

 </style>
 <main>
   {#if state === State.NameUnavailable}
     <Modal floating>
       <span slot="title">
         {inputValue}.{config.registrar.domain}
       </span>
       <span slot="body">
         The name <span class="highlight">{inputValue}</span> is not available for registration.
       </span>
       <span slot="actions">
         <button on:click={() => state = State.Idle} class="secondary">
           Back
         </button>
       </span>
     </Modal>
   {/if}
   <div class="input-caption">
     Register a <strong>{config.registrar.domain}</strong> name
   </div>
   <div class="input-main">
     <span class="name">
       <DomainInput
         bind:value={inputValue}
         bind:value={label}
         autofocus
         placeholder=""
         disabled={state === State.CheckingAvailability}
         root={config.registrar.domain}
       />
     </span>
     {#if !inputValue}
       <button disabled class="primary register">
         Check
       </button>
     {:else if state === State.CheckingAvailability}
       <button disabled class="primary register" data-waiting>
         Check
       </button>
     {:else}
       <button on:click={() => checkAvailability(inputValue)} class="primary register">
         Check
       </button>
     {/if}
     <button disabled={!label} class="primary register" on:click={register}>
       Check
     </button>
   </div>
 </main>

modified src/base/registrations/New.svelte

@@ -1,6 +1,7 @@

 <script lang="typescript">
   // TODO: Should check for availability here, before saying a name is available.
   // Perhaps the availability check should be moved out of the 'submit' step then.
   import { onMount } from 'svelte';
   import { navigate } from 'svelte-routing';
   import { formatAddress } from '@app/utils';
   import { session } from '@app/session';

@@ -8,12 +9,13 @@

   import Connect from '@app/Connect.svelte';
   import Modal from '@app/Modal.svelte';
   import Loading from '@app/Loading.svelte';
   import { registrar } from './registrar';
   enum State {
     Initial,
     CheckingAvailability,
     NameAvailable,
     NameUnavailable,
   }

@@ -21,32 +23,31 @@

   export let subdomain: string;
   export let owner: string | null;
   let state = State.Initial;
   let state = State.CheckingAvailability;
   $: registrationOwner = owner || ($session && $session.address);
   async function begin() {
     state = State.CheckingAvailability;
   function begin() {
     navigate(`/registrations/${subdomain}/submit?${
       registrationOwner ? new URLSearchParams({ owner: registrationOwner }) : ''
     }`);
   }
   onMount(async () => {
     if (await registrar(config).available(subdomain)) {
       navigate(`/registrations/${subdomain}/submit?${
         registrationOwner ? new URLSearchParams({ owner: registrationOwner }) : ''
       }`);
       state = State.NameAvailable;
     } else {
       state = State.NameUnavailable;
     }
   }
   });
 </script>
 <style>
 </style>
 <Modal>
   <span slot="title">
     {subdomain}.{config.registrar.domain}
   </span>
   <span slot="body">
     {#if state === State.Initial || state === State.CheckingAvailability}
     {#if state === State.NameAvailable}
       {#if registrationOwner}
         The name <span class="highlight">{subdomain}</span> is available for registration
         under account <span class="highlight">{formatAddress(registrationOwner)}</span>.

@@ -55,19 +56,13 @@

       {/if}
     {:else if state === State.NameUnavailable}
       The name <span class="highlight">{subdomain}</span> is not available for registration.
     {:else if state === State.CheckingAvailability}
       <Loading small center />
     {/if}
   </span>
   <span slot="actions">
     {#if state === State.CheckingAvailability}
       <button disabled class="primary register">
         Checking availability...
       </button>
     {:else if state === State.NameUnavailable}
       <button on:click={() => navigate("/registrations")} class="">
         Back
       </button>
     {:else}
     {#if state === State.NameAvailable}
       {#if $session}
         <button on:click={begin} class="primary register">
           Begin registration &rarr;

@@ -79,6 +74,10 @@

       <button on:click={() => navigate("/registrations")} class="text">
         Cancel
       </button>
     {:else if state === State.NameUnavailable}
       <button on:click={() => navigate("/registrations")} class="">
         Back
       </button>
     {/if}
   </span>
 </Modal>

modified src/base/registrations/View.svelte

@@ -92,7 +92,7 @@

 </style>
 {#await loadRegistration}
   <Loading />
   <Loading fadeIn />
 {:then registration}
   {#if registration}
     {#if state === State.Idle}