Use new avatar in User View

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

src/Address.svelte

@@ -6,6 +6,7 @@
   import Loading from '@app/Loading.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';
 
@@ -13,6 +14,7 @@
   export let config: Config;
   export let resolve = false;
   export let noBadge = false;
+  export let noAvatar = false;
   export let compact = false;
 
   let checksumAddress = compact
@@ -39,6 +41,7 @@
   .address {
     display: flex;
     align-items: center;
+    height: 100%;
   }
   .address.no-badge .badge {
     display: none;
@@ -59,6 +62,9 @@
   <Loading fadeIn/>
 {:else}
 <div class="address" title={address} class:no-badge={noBadge}>
+  {#if !noAvatar}
+    <Avatar source={registration?.avatar ?? address} />
+  {/if}
   {#if addressType === AddressType.Org}
     <a use:link href={`/orgs/${address}`}>{addressLabel}</a>
     <span class="badge">org</span>

src/base/users/View.svelte

@@ -7,6 +7,7 @@
   import Blockies from '@app/Blockies.svelte';
   import Loading from '@app/Loading.svelte';
   import Address from '@app/Address.svelte';
+  import Avatar from '@app/Avatar.svelte';
 
   export let address: string;
   export let config: Config;
@@ -48,9 +49,6 @@
     width: 64px;
     height: 64px;
   }
-  .avatar img {
-    border-radius: 50%; /* Allowing to maintain the circular design of the avatars */
-  }
   .links {
     display: flex;
     align-items: center;
@@ -68,11 +66,7 @@
   <main>
     <header>
       <div class="avatar">
-        {#if registration && registration.avatar}
-          <img class="avatar" src={registration.avatar} alt="avatar" />
-        {:else}
-          <Blockies {address} />
-        {/if}
+        <Avatar icon={false} source={state.registration?.avatar ?? address} />
       </div>
       <div class="info">
         <span class="title bold"><Address {address} {config} resolve/></span>