From d5ed28c62c71e83ce196246782d6ad778f781ca5 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <sebastinez@me.com>
Date: Mon, 14 Jun 2021 01:03:48 -0300
Subject: [PATCH] Create new Avatar component

Signed-off-by: Sebastian Martinez <sebastinez@me.com>
---
 src/Avatar.svelte | 50 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 src/Avatar.svelte

diff --git a/src/Avatar.svelte b/src/Avatar.svelte
new file mode 100644
index 000000000..96027e3aa
--- /dev/null
+++ b/src/Avatar.svelte
@@ -0,0 +1,50 @@
+<script lang="typescript">
+  import { onMount } from 'svelte';
+  import { createIcon } from '@app/blockies';
+  import { isAddress } from './utils';
+  
+  export let source: string;
+  export let icon: boolean = true;
+  export let glowOnHover = false;
+
+  let container: HTMLElement;
+
+  onMount(() => {
+    if(isAddress(source)) {
+      const seed = source.toLowerCase();
+      const avatar = createIcon({
+        seed,
+        size: 8,
+        scale: 16,
+      });
+      container.style.backgroundImage = `url(${avatar.toDataURL()})`;
+    }
+  });
+</script>
+
+<style>
+  .avatar {
+    border-radius: 50%;
+    min-width: 1rem;
+    min-height: 1rem;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+  .avatar.glowOnHover:hover {
+    box-shadow: 0 0 3rem var(--color-secondary);
+  }
+  .icon {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+  }
+</style>
+
+{#if isAddress(source)}
+  <div class="avatar" class:icon bind:this={container} class:glowOnHover title={source}/>
+{:else}
+  <img class="avatar" class:icon src={source} class:glowOnHover alt="avatar"/>
+{/if}
\ No newline at end of file