62ccf6e Use 'Modal' component — radicle-explorer

Radicle web interface

Use 'Modal' component

Alexis Sellier committed 5 years ago

commit 62ccf6e7821bc50dfec5e7e7cad903648a71cd57
parent dd8036723bc7d5845b0dccf21040caadc5b937f1

2 files changed +54 -71

modified src/base/register/steps/Begin.svelte

@@ -8,6 +8,7 @@

   import type { Config } from '@app/config';
   import Connect from '@app/Connect.svelte';
   import Modal from '@app/Modal.svelte';
   enum State {
     Initial,

@@ -38,12 +39,12 @@

 <style>
 </style>
 <div class="modal">
   <div class="modal-title">
 <Modal>
   <span slot="title">
     {subdomain}.{config.registrar.domain}
   </div>
   </span>
   <div class="modal-body">
   <span slot="body">
     {#if state === State.Initial || state === State.CheckingAvailability}
       {#if registrationOwner}
         The name <span class="highlight">{subdomain}</span> is available for registration

@@ -54,9 +55,9 @@

     {:else if state === State.NameUnavailable}
       The name <span class="highlight">{subdomain}</span> is not available for registration.
     {/if}
   </div>
   </span>
   <div class="modal-actions">
   <span slot="actions">
     {#if state === State.CheckingAvailability}
       <button disabled class="primary register">
         Checking availability...

@@ -78,5 +79,5 @@

         Cancel
       </button>
     {/if}
   </div>
 </div>
   </span>
 </Modal>

modified src/base/register/steps/Submit.svelte

@@ -9,6 +9,8 @@

   import type { Session } from '@app/session';
   import type { Config } from '@app/config';
   import Loading from '@app/Loading.svelte';
   import Modal from '@app/Modal.svelte';
   import Err from '@app/Error.svelte';
   export let config: Config;
   export let subdomain: string;

@@ -37,67 +39,47 @@

 <style></style>
 <div class="modal" class:error={error}>
   {#if error}
     <div class="modal-title error">
       Transaction failed
     </div>
   {:else}
     <div class="modal-title">
       {subdomain}.radicle.eth
     </div>
   {/if}
 {#if error}
   <Err
     title="Transaction failed"
     message={error.message}
     on:close={() => navigate('/register')}
   />
 {:else}
   <Modal>
     <span slot="title">
       {subdomain}.{config.registrar.domain}
     </span>
   {#if error}
     <div class="modal-body error">
       <strong>Error:</strong> {error.message}
     </div>
     <div class="modal-actions">
       <button on:click={() => navigate("/register")} class="error">
         Back
       </button>
     </div>
   {:else if $state === State.Approving}
     <div class="modal-body">
       Approving Registry for {#await getFee(config)}
         ?
       {:then fee}
         {fee}
       {/await} <strong>RAD</strong>...
     </div>
     <div class="modal-actions">
       <Loading small center />
     </div>
   {:else if $state === State.Committing}
     <div class="modal-body">
       Committing...
     </div>
     <div class="modal-actions">
       <Loading small center />
     </div>
   {:else if $state === State.WaitingToRegister}
     <div class="modal-body">
       Waiting for commitment time...
     </div>
     <div class="modal-actions">
       <Loading small center />
     </div>
   {:else if $state === State.Registering}
     <div class="modal-body">
       Registering name...
     </div>
     <div class="modal-actions">
       <Loading small center />
     </div>
   {:else if $state === State.Registered}
     <div class="modal-body">
       The name <strong>{subdomain}</strong> has been successfully registered to
       <strong>{registrationOwner}</strong>.
     </div>
     <div class="modal-actions">
       <button on:click={() => state.set(State.Idle)} class="primary register">
         Done
       </button>
     </div>
   {/if}
 </div>
     <span slot="body">
       {#if $state === State.Approving}
         Approving Registry for {#await getFee(config)}
           ?
         {:then fee}
           {fee}
         {/await} <strong>RAD</strong>...
       {: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="actions">
       {#if $state === State.Registered}
         <button on:click={() => state.set(State.Idle)} class="primary register">
           Done
         </button>
       {:else}
         <div class="modal-actions">
           <Loading small center />
         </div>
       {/if}
     </span>
   </Modal>
 {/if}