Show blockies when avatar image is missing

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

src/Address.svelte

@@ -49,7 +49,7 @@
 
 <div class="address" title={address} class:no-badge={noBadge}>
   {#if !noAvatar}
-    <Avatar inline source={profile?.avatar ?? address} />
+    <Avatar inline source={profile?.avatar ?? address} {address}/>
   {/if}
   {#if addressType === AddressType.Org}
     <a use:link href={`/orgs/${address}`}>{addressLabel}</a>

src/Avatar.svelte

@@ -1,25 +1,29 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
   import { createIcon } from '@app/blockies';
   import { isAddress, isRadicleId } from '@app/utils';
 
+  export let address: string;
   export let source: string;
   export let inline = false;
   export let glowOnHover = false;
 
-  let container: HTMLElement;
+  function handleMissingFile() {
+    source = createContainer(address);
+  }
 
-  onMount(() => {
-    if (isAddress(source) || isRadicleId(source)) {
-      const seed = source.toLowerCase();
-      const avatar = createIcon({
-        seed,
-        size: 8,
-        scale: 16,
-      });
-      container.style.backgroundImage = `url(${avatar.toDataURL()})`;
-    }
-  });
+  function createContainer(source: string) {
+    const seed = source.toLowerCase();
+    const avatar = createIcon({
+      seed,
+      size: 8,
+      scale: 16,
+    });
+    return avatar.toDataURL();
+  }
+
+  $: if (isAddress(source) || isRadicleId(source)) {
+    source = createContainer(source);
+  }
 </script>
 
 <style>
@@ -44,9 +48,5 @@
   }
 </style>
 
-{#if isAddress(source) || isRadicleId(source)}
-  <div class="avatar" class:inline bind:this={container} class:glowOnHover title={source}/>
-{:else}
-  <!-- svelte-ignore a11y-missing-attribute -->
-  <img class="avatar" class:inline src={source} class:glowOnHover />
-{/if}
+<!-- svelte-ignore a11y-missing-attribute -->
+<img class="avatar" class:inline src={source} on:error={handleMissingFile} class:glowOnHover />

src/Header.svelte

@@ -175,7 +175,7 @@
           {#if sessionButtonHover}
             Disconnect
           {:else}
-            <Avatar source={profile.avatar ?? address} inline />{formatAddress(address)}
+            <Avatar source={profile.avatar ?? address} {address} inline />{formatAddress(address)}
           {/if}
         {/await}
       </button>

src/base/orgs/List.svelte

@@ -83,7 +83,7 @@
       <Link to={`/orgs/${profile.nameOrAddress}`}>
         <div class="org">
           <div class="org-avatar">
-            <Avatar source={profile.avatar ?? profile.address} />
+            <Avatar source={profile.avatar ?? profile.address} address={profile.address} />
           </div>
           <div class="org-label">
             {#if profile.name}

src/base/orgs/View.svelte

@@ -161,7 +161,7 @@
       {:then profile}
         <header>
           <div class="avatar">
-            <Avatar source={profile.avatar ?? org.address} />
+            <Avatar source={profile.avatar ?? org.address} address={org.address} />
           </div>
           <div class="info">
             <span class="title">
@@ -288,7 +288,7 @@
                 {#each members as profile}
                   <div class="member">
                     <div class="member-icon">
-                      <Avatar source={profile.avatar ?? profile.address} />
+                      <Avatar source={profile.avatar ?? profile.address} address={profile.address} />
                     </div>
                     <Address address={profile.address} compact
                       resolve noAvatar {profile} {config} />

src/base/projects/View.svelte

@@ -107,7 +107,7 @@
       <div class="title bold">
         {#if result.org}
           <a class="org-avatar" title={result.org.nameOrAddress} href={`/orgs/${result.org.nameOrAddress}`}>
-            <Avatar source={result.org.avatar || result.org.address}/>
+            <Avatar source={result.org.avatar || result.org.address} address={result.org.address}/>
           </a>
           <span class="divider">/</span>
         {/if}

src/base/users/View.svelte

@@ -78,7 +78,7 @@
   <main>
     <header>
       <div class="avatar">
-        <Avatar source={profile.avatar ?? address} />
+        <Avatar source={profile.avatar ?? address} {address} />
       </div>
       <div class="info">
         <span class="title bold">