Add blockies for org profile

package-lock.json

@@ -6,6 +6,7 @@
     "": {
       "dependencies": {
         "@snowpack/plugin-typescript": "^1.2.1",
+        "ethereum-blockies": "^0.1.1",
         "ethers": "^5.0.31",
         "multibase": "^4.0.4",
         "svelte": "^3.32.3",
@@ -1396,6 +1397,11 @@
       "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
       "dev": true
     },
+    "node_modules/ethereum-blockies": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/ethereum-blockies/-/ethereum-blockies-0.1.1.tgz",
+      "integrity": "sha1-h5/pWd7vSSp6krQ9w0ro3C7lkfw="
+    },
     "node_modules/ethers": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/ethers/-/ethers-5.1.4.tgz",
@@ -4438,6 +4444,11 @@
       "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
       "dev": true
     },
+    "ethereum-blockies": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/ethereum-blockies/-/ethereum-blockies-0.1.1.tgz",
+      "integrity": "sha1-h5/pWd7vSSp6krQ9w0ro3C7lkfw="
+    },
     "ethers": {
       "version": "5.1.4",
       "resolved": "https://registry.npmjs.org/ethers/-/ethers-5.1.4.tgz",

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@snowpack/plugin-typescript": "^1.2.1",
+    "ethereum-blockies": "^0.1.1",
     "ethers": "^5.0.31",
     "multibase": "^4.0.4",
     "svelte": "^3.32.3",

src/App.svelte

@@ -39,7 +39,9 @@
 <div class="app">
   {#await getConfig()}
     <!-- Loading wallet -->
-    <Loading center />
+    <div class="wrapper">
+      <Loading center />
+    </div>
   {:then config}
     <Header session={$session} {config} />
     <div class="wrapper">

src/Blocky.svelte

@@ -0,0 +1,31 @@
+<script lang="typescript">
+  import { onMount } from 'svelte';
+  import blockies from 'ethereum-blockies';
+
+  export let address: string;
+
+  let container: HTMLElement;
+
+  onMount(() => {
+    const seed = address;
+    const avatar = blockies.create({
+      seed,
+      size: 8,
+      scale: 16
+    });
+    container.style.backgroundImage = `url(${avatar.toDataURL()})`;
+  });
+</script>
+
+<style>
+  .icon {
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    border-radius: 50%;
+  }
+</style>
+
+<div class="icon" bind:this={container}>
+</div>

src/base/orgs/View.svelte

@@ -12,6 +12,7 @@
   import Modal from '@app/Modal.svelte';
   import Error from '@app/Error.svelte';
   import Icon from '@app/Icon.svelte';
+  import Blocky from '@app/Blocky.svelte';
   import SetName from '@app/ens/SetName.svelte';
   import Project from '@app/base/projects/Widget.svelte';
   import * as utils from '@app/utils';
@@ -102,11 +103,13 @@
   {#if org}
     <main>
       <header>
-        {#if registration && registration.avatar}
-          <div class="avatar">
+        <div class="avatar">
+          {#if registration && registration.avatar}
             <img src={registration.avatar} alt="avatar" />
-          </div>
-        {/if}
+          {:else}
+            <Blocky address={org.address} />
+          {/if}
+        </div>
         <div class="info">
           <span class="title bold">{registration ? label : address}</span>
           <div class="links">

types/types.d.ts

@@ -0,0 +1 @@
+declare module 'ethereum-blockies';