Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Add User View Route
Sebastian Martinez committed 4 years ago
commit baa77d4269721ffaa8edbbb13d230096fdd34d81
parent e9775ee71563d41ba78e0ce6d1565226184f8195
4 files changed +124 -16
modified src/Address.svelte
@@ -2,8 +2,7 @@
  import { onMount } from 'svelte';

  import { link } from 'svelte-routing';

  import { ethers } from 'ethers';
- 
  import { explorerLink, safeLink } from '@app/utils';
- 
  import Blockies from '@app/Blockies.svelte';
+ 
  import { safeLink } from '@app/utils';

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

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

  import { identifyAddress, formatAddress, AddressType } from '@app/utils';
@@ -17,14 +16,16 @@
  let checksumAddress = compact

    ? formatAddress(address)

    : ethers.utils.getAddress(address);
+ 
  let loading: boolean = true;

  let addressType: AddressType | null = null;

  let addressName: string | null = null;
- 
  onMount(() => {
- 
    identifyAddress(address, config).then(typ => addressType = typ);
+ 
  onMount(async () => {

    if (resolve) {
- 
      config.provider.lookupAddress(address).then(name => addressName = name);
+ 
      addressName = await config.provider.lookupAddress(address);

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

  });



  $: addressLabel = addressName || checksumAddress;
@@ -38,14 +39,6 @@
  .address.no-badge .badge {

    display: none;

  }
- 
  .icon {
- 
    display: inline-block;
- 
    width: 1rem;
- 
    height: 1rem;
- 
    margin-right: 0.5rem;
- 
    min-width: 1rem;
- 
    min-height: 1rem;
- 
  }

  .address a {

    color: var(--color-foreground-90);

  }
@@ -58,8 +51,10 @@
  }

</style>
- 
<div class="address" class:no-badge={noBadge}>
- 
  <span class="icon"><Blockies address={address} /></span>
+ 
{#if loading}
+ 
  <Loading fadeIn/>
+ 
{:else}
+ 
<div class="address" title={address} class:no-badge={noBadge}>

  {#if addressType === AddressType.Org}

    <a use:link href={`/orgs/${address}`}>{addressLabel}</a>

    <span class="badge">org</span>
@@ -67,7 +62,7 @@
    <a href={safeLink(address, config)} target="_blank">{addressLabel}</a>

    <span class="badge safe">safe</span>

  {:else}
- 
    <a href={explorerLink(address, config)} target="_blank">{addressLabel}</a>
+ 
    <a href={`/users/${address}`} target="_blank">{addressLabel}</a>

    {#if addressType === AddressType.Contract}

      <span class="badge">contract</span>

    {:else if addressType === AddressType.EOA}
@@ -77,3 +72,4 @@
    {/if}

  {/if}

</div>
+ 
{/if}
modified src/App.svelte
@@ -7,6 +7,7 @@
  import Vesting from '@app/base/vesting/Index.svelte';

  import Registrations from '@app/base/registrations/Routes.svelte';

  import Orgs from '@app/base/orgs/Routes.svelte';
+ 
  import Users from '@app/base/users/Routes.svelte';

  import Projects from '@app/base/projects/Routes.svelte';

  import Resolver from '@app/base/resolver/Routes.svelte';

  import Header from '@app/Header.svelte';
@@ -61,6 +62,7 @@
        </Route>

        <Registrations {config} session={$session} />

        <Orgs {config} />
+ 
        <Users {config} />

        <Projects {config} />

        <Resolver {config} />

      </Router>
added src/base/users/Routes.svelte
@@ -0,0 +1,11 @@
+ 
<script lang="typescript">
+ 
  import { Route } from "svelte-routing";
+ 
  import View from '@app/base/users/View.svelte';
+ 
  import type { Config } from '@app/config';
+
+ 
  export let config: Config;
+ 
</script>
+
+ 
<Route path="/users/:address" let:params>
+ 
  <View {config} address={params.address}/>
+ 
</Route>
added src/base/users/View.svelte
@@ -0,0 +1,99 @@
+ 
<script lang="typescript">
+ 
  import { onMount } from 'svelte';
+ 
  import type { Config } from '@app/config';
+ 
  import type { Registration } from '@app/base/registrations/registrar';
+ 
  import { getRegistration } from '@app/base/registrations/registrar';
+ 
  import Icon from '@app/Icon.svelte';
+ 
  import Blockies from '@app/Blockies.svelte';
+ 
  import Loading from '@app/Loading.svelte';
+ 
  import Address from '@app/Address.svelte';
+
+ 
  export let address: string;
+ 
  export let config: Config;
+
+ 
  let loading: boolean = true;
+ 
  let registration: Registration | null = null;
+ 
  let name: string | null = null;
+
+ 
  onMount(async () => {
+ 
    name = await config.provider.lookupAddress(address);
+ 
    if (name) registration = await getRegistration(name, config);
+ 
    loading = false;
+ 
  });
+ 
</script>
+
+ 
<style>
+ 
  main {
+ 
    padding: 5rem 0;
+ 
  }
+ 
  main > header {
+ 
    display: flex;
+ 
    align-items: center;
+ 
    justify-content: left;
+ 
    margin-bottom: 2rem;
+ 
  }
+ 
  main > header > * {
+ 
    margin: 0 1rem 0 0;
+ 
  }
+ 
  .info {
+ 
    display: flex;
+ 
    flex-direction: column;
+ 
    justify-content: center;
+ 
    align-items: left;
+ 
  }
+ 
  .info a {
+ 
    border: none;
+ 
  }
+ 
  .avatar {
+ 
    width: 64px;
+ 
    height: 64px;
+ 
  }
+ 
  .avatar img {
+ 
    border-radius: 50%; /* Allowing to maintain the circular design of the avatars */
+ 
  }
+ 
  .links {
+ 
    display: flex;
+ 
    align-items: center;
+ 
    justify-content: left;
+ 
  }
+ 
  .url {
+ 
    display: flex; /* Ensures correct vertical positioning of icons */
+ 
    margin-right: 1rem;
+ 
  }
+ 
</style>
+
+ 
{#if loading}
+ 
  <Loading fadeIn />
+ 
{:else}
+ 
  <main>
+ 
    <header>
+ 
      <div class="avatar">
+ 
        {#if registration && registration.avatar}
+ 
          <img class="avatar" src={registration.avatar} alt="avatar" />
+ 
        {:else}
+ 
          <Blockies {address} />
+ 
        {/if}
+ 
      </div>
+ 
      <div class="info">
+ 
        <span class="title bold"><Address {address} {config} resolve/></span>
+ 
        <div class="links">
+ 
          {#if registration}
+ 
            {#if registration.url}
+ 
              <a class="url" href={registration.url}>{registration.url}</a>
+ 
            {/if}
+ 
            {#if registration.twitter}
+ 
              <a class="url" href={registration.twitter}>
+ 
                <Icon name="twitter" />
+ 
              </a>
+ 
            {/if}
+ 
            {#if registration.github}
+ 
              <a class="url" href={registration.github}>
+ 
                <Icon name="github" />
+ 
              </a>
+ 
            {/if}
+ 
          {/if}
+ 
        </div>
+ 
      </div>
+ 
    </header>
+ 
  </main>
+ 
{/if}
 

\ No newline at end of file