Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Improve error code
Alexis Sellier committed 5 years ago
commit fbce111e220f78453ef34938ecbfe5fd124609c9
parent 836bd4cbea601770fb4ec4ddb9b419b32d5fadf0
8 files changed +128 -97
modified public/index.css
@@ -195,11 +195,12 @@ input.wide {
}

.modal-title {

	font-size: 1.75rem;
+ 
	line-height: 1.75rem;

	margin-bottom: 2rem;

	color: var(--color-secondary);

	text-align: center;

	text-overflow: ellipsis;
- 
	overflow-x: hidden;
+ 
	overflow: hidden;

}

.modal-body {

	overflow-x: hidden;
added src/Error.svelte
@@ -0,0 +1,35 @@
+ 
<script lang="typescript">
+ 
  import { createEventDispatcher } from 'svelte';
+ 
  import Modal from '@app/Modal.svelte';
+ 
  import type { Err } from '@app/error';
+
+ 
  const dispatch = createEventDispatcher();
+
+ 
  export let error: Err | null = null;
+ 
  export let title = "Error";
+ 
  export let subtitle: string = "";
+ 
  export let message: string = "";
+ 
  export let floating = false;
+
+ 
  let body = message || (error && error.message) || "";
+ 
</script>
+
+ 
<Modal on:close error {floating}>
+ 
  <span slot="title">
+ 
    {title}
+ 
  </span>
+
+ 
  <span slot="subtitle">
+ 
    {subtitle}
+ 
  </span>
+
+ 
  <span slot="body">
+ 
    <strong>Error:</strong> {body}
+ 
  </span>
+
+ 
  <span slot="actions">
+ 
    <button on:click={() => dispatch('close')}>
+ 
      Back
+ 
    </button>
+ 
  </span>
+ 
</Modal>
modified src/Modal.svelte
@@ -2,7 +2,7 @@
  import { createEventDispatcher } from 'svelte';



  export let floating = false;
- 
  export let error: Error | null = null;
+ 
  export let error = false;

  export let subtle = false;



  let dispatch = createEventDispatcher();
@@ -40,36 +40,16 @@
<div class:modal-floating={floating}>

  <div class="modal" class:error class:modal-subtle={subtle}>

    <div class="modal-title">
- 
      {#if error}
- 
        Error
- 
      {:else}
- 
        <slot name="title"></slot>
- 
      {/if}
+ 
      <slot name="title"></slot>

    </div>

    <div class="modal-subtitle">
- 
      {#if !error}
- 
        <slot name="subtitle"></slot>
- 
      {/if}
+ 
      <slot name="subtitle"></slot>

    </div>

    <div class="modal-body">
- 
      {#if error}
- 
        {#if error === Object(error) && error.message}
- 
          <strong>Error:</strong> {error.message}
- 
        {:else}
- 
          {error}
- 
        {/if}
- 
      {:else}
- 
        <slot name="body"></slot>
- 
      {/if}
+ 
      <slot name="body"></slot>

    </div>

    <div class="modal-actions">
- 
      {#if error}
- 
        <button on:click={onClose}>
- 
          Dismiss
- 
        </button>
- 
      {:else}
- 
        <slot name="actions"></slot>
- 
      {/if}
+ 
      <slot name="actions"></slot>

    </div>

  </div>

</div>
modified src/base/orgs/CreateOrg.svelte
@@ -1,6 +1,8 @@
<script lang="typescript">

  import { createEventDispatcher } from 'svelte';

  import Modal from '@app/Modal.svelte';
+ 
  import Error from '@app/Error.svelte';
+ 
  import type { Err } from '@app/error';

  import { Org } from '@app/base/orgs/Org';

  import type { Config } from '@app/config';
@@ -15,7 +17,7 @@
  }



  let state = State.Idle;
- 
  let error: Error | null = null;
+ 
  let error: Err | null = null;

  let org: Org | null = null;



  const dispatch = createEventDispatcher();
@@ -38,56 +40,60 @@
  };

</script>
- 
<Modal floating {error} on:close>
- 
  <span slot="title">
- 
    {#if !org}
- 
      Create an Org
- 
    {:else}
- 
      🎉
- 
    {/if}
- 
  </span>
+ 
{#if error}
+ 
  <Error {error} floating on:close />
+ 
{:else}
+ 
  <Modal floating on:close>
+ 
    <span slot="title">
+ 
      {#if !org}
+ 
        Create an Org
+ 
      {:else}
+ 
        🎉
+ 
      {/if}
+ 
    </span>
- 
  <span slot="subtitle">
- 
    {#if org}
- 
      <strong>Your org was successfully created.</strong>
- 
    {/if}
- 
  </span>
+ 
    <span slot="subtitle">
+ 
      {#if org}
+ 
        <strong>Your org was successfully created.</strong>
+ 
      {/if}
+ 
    </span>
- 
  <span slot="body">
- 
    {#if org}
- 
      <table>
- 
        <tr><td class="label">Address</td><td>{org.address}</td></tr>
- 
        <tr><td class="label">Safe</td><td>{org.safe}</td></tr>
- 
      </table>
- 
    {:else}
- 
      <table>
- 
        <tr><td class="label">Member</td><td>{owner}</td></tr>
- 
      </table>
- 
    {/if}
- 
  </span>
+ 
    <span slot="body">
+ 
      {#if org}
+ 
        <table>
+ 
          <tr><td class="label">Address</td><td>{org.address}</td></tr>
+ 
          <tr><td class="label">Safe</td><td>{org.safe}</td></tr>
+ 
        </table>
+ 
      {:else}
+ 
        <table>
+ 
          <tr><td class="label">Member</td><td>{owner}</td></tr>
+ 
        </table>
+ 
      {/if}
+ 
    </span>
- 
  <span slot="actions">
- 
    {#if !org}
- 
      <button
- 
        on:click={createOrg}
- 
        class="primary"
- 
        data-waiting={[State.Signing, State.Pending].includes(state) || null}
- 
        disabled={state !== State.Idle}
- 
      >
- 
        {#if state === State.Pending}
- 
          Creating...
- 
        {:else}
- 
          Create
- 
        {/if}
- 
      </button>
+ 
    <span slot="actions">
+ 
      {#if !org}
+ 
        <button
+ 
          on:click={createOrg}
+ 
          class="primary"
+ 
          data-waiting={[State.Signing, State.Pending].includes(state) || null}
+ 
          disabled={state !== State.Idle}
+ 
        >
+ 
          {#if state === State.Pending}
+ 
            Creating...
+ 
          {:else}
+ 
            Create
+ 
          {/if}
+ 
        </button>
- 
      <button on:click={() => dispatch('close')} class="text">
- 
        Cancel
- 
      </button>
- 
    {:else}
- 
      <button on:click={() => dispatch('close')}>
- 
        Done
- 
      </button>
- 
    {/if}
- 
  </span>
- 
</Modal>
+ 
        <button on:click={() => dispatch('close')} class="text">
+ 
          Cancel
+ 
        </button>
+ 
      {:else}
+ 
        <button on:click={() => dispatch('close')}>
+ 
          Done
+ 
        </button>
+ 
      {/if}
+ 
    </span>
+ 
  </Modal>
+ 
{/if}
modified src/base/register/Routes.svelte
@@ -1,10 +1,12 @@
<script lang="typescript">
- 
  import { Route } from "svelte-routing";
+ 
  import { Route, navigate } from "svelte-routing";

  import Register from '@app/base/register/Register.svelte';

  import Begin from '@app/base/register/steps/Begin.svelte';

  import Submit from '@app/base/register/steps/Submit.svelte';
+ 
  import Error from '@app/Error.svelte';

  import type { Config } from '@app/config';

  import type { Session } from '@app/session';
+ 
  import { Failure } from '@app/error';



  export let session: Session | null;

  export let config: Config;
@@ -19,8 +21,13 @@
  <Begin {config} subdomain={params.name} {query} />

</Route>
- 
{#if session}
- 
  <Route path="register/:name/submit" let:params>
+ 
<Route path="register/:name/submit" let:params>
+ 
  {#if session}

    <Submit {config} subdomain={params.name} {query} {session} />
- 
  </Route>
- 
{/if}
+ 
  {:else}
+ 
    <Error
+ 
      message={"You must connect your wallet to register"}
+ 
      on:close={() => navigate("/register")}
+ 
    />
+ 
  {/if}
+ 
</Route>
modified src/base/register/state.ts
@@ -11,3 +11,7 @@ export enum State {
}



export const state = writable(State.Idle);
+
+ 
state.subscribe(s => {
+ 
  console.log("regiter.state", s);
+ 
});
modified src/base/register/steps/Submit.svelte
@@ -1,6 +1,5 @@
<script lang="typescript">

  import { onMount } from 'svelte';
- 
  import { get } from 'svelte/store';

  import { navigate } from 'svelte-routing';

  import { ethers } from 'ethers';

  import { registerName, registrationFee } from '../registrar';
@@ -22,14 +21,12 @@
  }



  onMount(async () => {
- 
    let oldState = get(state);
- 


    try {

      await registerName(subdomain, registrationOwner, config);

    } catch (e) {

      console.error("Error", e);
- 
      state.set(oldState);
+ 
      state.set(State.Idle);

      error = e;

    }

  });
@@ -52,7 +49,16 @@
    </div>

  {/if}
- 
  {#if $state === State.Approving}
+ 
  {#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)}

        ?
@@ -73,7 +79,7 @@
    </div>

  {:else if $state === State.WaitingToRegister}

    <div class="modal-body">
- 
      Waiting for wallet confirmation...
+ 
      <!-- TODO -->

    </div>

    <div class="modal-actions">

      <button disabled class="primary register">
@@ -88,21 +94,12 @@
    </div>

  {:else if $state === State.Registered}

    <div class="modal-body">
- 
      The name <span class="domain">{subdomain}</span> has been successfully registered to {session.address}.
+ 
      The name <span class="domain">{subdomain}</span> has been successfully registered to {registrationOwner}.

    </div>

    <div class="modal-actions">

      <button on:click={() => state.set(State.Idle)} class="primary register">

        Done

      </button>

    </div>
- 
  {:else 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>

  {/if}

</div>
modified src/error.ts
@@ -8,6 +8,7 @@ export interface Err {


export enum Failure {

  TransactionFailed = 1,
+ 
  NotAuthenticated = 2,

}



export const error = writable<Err | null>(null);