Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Refactor await in Userview and Address
Sebastian Martinez committed 4 years ago
commit b74943609d78a5b21fef02993e25b38d03b9b5ed
parent b040fad02c86ef159ff0b4288a544498cd23ad89
2 files changed +38 -82
modified src/Address.svelte
@@ -1,14 +1,15 @@
<script lang="typescript">

  import { onMount } from 'svelte';
+ 
  import { navigate } from 'svelte-routing';

  import { link } from 'svelte-routing';

  import { ethers } from 'ethers';
- 
  import { safeLink } from '@app/utils';
+ 
  import { safeLink, identifyAddress, formatAddress, AddressType } from '@app/utils';

  import Loading from '@app/Loading.svelte';
+ 
  import Avatar from "@app/Avatar.svelte";
+ 
  import Error from '@app/Error.svelte';

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

  import type { Registration } from '@app/base/registrations/registrar';
- 
  import Avatar from "@app/Avatar.svelte";

  import { getRegistration } from '@app/base/registrations/registrar';
- 
  import { identifyAddress, formatAddress, AddressType } from '@app/utils';



  export let address: string;

  export let config: Config;
@@ -20,21 +21,18 @@
  let checksumAddress = compact

    ? formatAddress(address)

    : ethers.utils.getAddress(address);
- 
  let loading: boolean = true;
- 
  let registration: Registration | null = null;

  let addressType: AddressType | null = null;

  let addressName: string | null = null;
+ 
  let getInfo: Promise<Registration | null>;



  onMount(async () => {
+ 
    identifyAddress(address, config).then((t: AddressType) => addressType = t);

    if (resolve) {

      addressName = await config.provider.lookupAddress(address);
- 
      if (addressName) registration = await getRegistration(addressName, config);
+ 
      getInfo = getRegistration(addressName, config);

    }
- 
    addressType = await identifyAddress(address, config);
- 
    loading = false;

  });
-
- 
  $: addressLabel = addressName || checksumAddress;
+ 
  $: addressLabel = addressName ?? checksumAddress;

</script>



<style>
@@ -58,12 +56,12 @@
  }

</style>
- 
{#if loading}
- 
  <Loading fadeIn/>
- 
{:else}
+ 
{#await getInfo}
+ 
  <Loading fadeIn />
+ 
{:then info}

<div class="address" title={address} class:no-badge={noBadge}>

  {#if !noAvatar}
- 
    <Avatar source={registration?.avatar ?? address} />
+ 
      <Avatar inline source={info?.avatar ?? address} />

  {/if}

  {#if addressType === AddressType.Org}

    <a use:link href={`/orgs/${address}`}>{addressLabel}</a>
@@ -80,6 +78,7 @@
    {:else if !noBadge}

      <div class="loading"><Loading small /></div>

    {/if}
- 
  {/if}

</div>
- 
{/if}
+ 
{:catch error}
+ 
  <Error {error} title="Address could not be loaded" on:close={() => navigate('/')} />
+ 
{/await}
modified src/base/users/View.svelte
@@ -5,45 +5,20 @@
  import type { Registration } from '@app/base/registrations/registrar';

  import { getRegistration } from '@app/base/registrations/registrar';

  import Icon from '@app/Icon.svelte';
- 
  import Modal from '@app/Modal.svelte';

  import Loading from '@app/Loading.svelte';

  import Address from '@app/Address.svelte';
- 
  import Link from '@app/Link.svelte';

  import Avatar from '@app/Avatar.svelte';

  import Error from '@app/Error.svelte';
- 
  enum Status {
- 
    Loading,
- 
    Found,
- 
    NotFound,
- 
    Failed,
- 
  }
-
- 
  type State =
- 
      { status: Status.Loading }
- 
    | { status: Status.NotFound }
- 
    | { status: Status.Found, registration: Registration }
- 
    | { status: Status.Failed, error: string };
- 


  export let address: string;

  export let config: Config;
-
- 
  let name: string | null = null;
- 
  let state: State = { status: Status.Loading };
+
+ 
  let addressName: string | null = null;
+ 
  let getInfo: Promise<Registration | null>;

  

  onMount(async () => {
- 
    name = await config.provider.lookupAddress(address);
- 
    getRegistration(name, config)
- 
      .then(r => {
- 
        if (r) {
- 
          state = { status: Status.Found, registration: r };
- 
        } else {
- 
          state = { status: Status.NotFound };
- 
        }
- 
        return r;
- 
      }).catch(err => {
- 
        state = { status: Status.Failed, error: err };
- 
    });
+ 
    addressName = await config.provider.lookupAddress(address);
+ 
    getInfo = getRegistration(addressName, config);

  });

</script>
@@ -84,52 +59,34 @@
  }

</style>
- 
{#if state.status === Status.Loading}
+ 
{#await getInfo}

  <Loading fadeIn />
- 
{:else if state.status === Status.Failed}
- 
  <Error title="User could not be loaded" on:close={() => navigate('/')}>
- 
    {state.error}
- 
  </Error>
- 
{:else if state.status === Status.NotFound}
- 
  <Modal subtle>
- 
    <span slot="title">
- 
      {address}
- 
    </span>
-
- 
    <span slot="body">
- 
      <p>The address <strong>{address}</strong> is not registered.</p>
- 
    </span>
-
- 
    <span slot="actions">
- 
      <Link to={`/`} primary>Back to home &rarr;</Link>
- 
    </span>
- 
  </Modal>
- 
{:else if state.status === Status.Found}
+ 
{:then info}

  <main>

    <header>

      <div class="avatar">
- 
        <Avatar icon={false} source={state.registration?.avatar ?? address} />
+ 
        <Avatar source={info?.avatar ?? address} />

      </div> 

      <div class="info">

        <span class="title bold"><Address noAvatar {address} {config} resolve/></span>

        <div class="links">
- 
          {#if state.registration}
- 
            {#if state.registration.url}
- 
              <a class="url" href={state.registration.url}>{state.registration.url}</a>
- 
            {/if}
- 
            {#if state.registration.twitter}
- 
              <a class="url" href={state.registration.twitter}>
- 
                <Icon name="twitter" />
- 
              </a>
- 
            {/if}
- 
            {#if state.registration.github}
- 
              <a class="url" href={state.registration.github}>
- 
                <Icon name="github" />
- 
              </a>
- 
            {/if}
+ 
          {#if info?.url}
+ 
            <a class="url" href={info.url}>{info.url}</a>
+ 
          {/if}
+ 
          {#if info?.twitter}
+ 
            <a class="url" href={info.twitter}>
+ 
              <Icon name="twitter" />
+ 
            </a>
+ 
          {/if}
+ 
          {#if info?.github}
+ 
            <a class="url" href={info.github}>
+ 
              <Icon name="github" />
+ 
            </a>

          {/if}

        </div>

      </div>

    </header> 

  </main>
- 
{/if}
 

\ No newline at end of file
+ 
{:catch error}
+ 
  <Error {error} title="User could not be loaded" on:close={() => navigate('/')} />
+ 
{/await}