Create new Avatar component

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

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}