Add User View Route

Signed-off-by: Sebastian Martinez <sebastinez@me.com>

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}

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>

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>

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}