From fe54bcacdc677b525b733949f315533843e546e1 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <sebastinez@me.com>
Date: Tue, 5 Oct 2021 14:24:27 +0200
Subject: [PATCH] Show blockies when avatar image is missing

Signed-off-by: Sebastian Martinez <sebastinez@me.com>
---
 src/Address.svelte            |  2 +-
 src/Avatar.svelte             | 38 +++++++++++++++++------------------
 src/Header.svelte             |  2 +-
 src/base/orgs/List.svelte     |  2 +-
 src/base/orgs/View.svelte     |  4 ++--
 src/base/projects/View.svelte |  2 +-
 src/base/users/View.svelte    |  2 +-
 7 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/Address.svelte b/src/Address.svelte
index 3d82894c8..9f26805e0 100644
--- a/src/Address.svelte
+++ b/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>
diff --git a/src/Avatar.svelte b/src/Avatar.svelte
index 3860c2923..ef84703e7 100644
--- a/src/Avatar.svelte
+++ b/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 />
diff --git a/src/Header.svelte b/src/Header.svelte
index 52217f5dd..caf703c33 100644
--- a/src/Header.svelte
+++ b/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>
diff --git a/src/base/orgs/List.svelte b/src/base/orgs/List.svelte
index 621bb87f6..a6b28ab8e 100644
--- a/src/base/orgs/List.svelte
+++ b/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}
diff --git a/src/base/orgs/View.svelte b/src/base/orgs/View.svelte
index 9f15ba5dd..7b5464a47 100644
--- a/src/base/orgs/View.svelte
+++ b/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} />
diff --git a/src/base/projects/View.svelte b/src/base/projects/View.svelte
index ec67c438a..66da99d65 100644
--- a/src/base/projects/View.svelte
+++ b/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}
diff --git a/src/base/users/View.svelte b/src/base/users/View.svelte
index a4c00b790..370e1dbd0 100644
--- a/src/base/users/View.svelte
+++ b/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">