Improve address rendering

public/index.css

@@ -171,7 +171,7 @@ button.tiny {
 a {
 	color: #d0d0d0;
 	text-decoration: none;
-	border-bottom: 1px solid #444;
+	border-bottom: 1px dashed #444;
 }
 a:hover {
 	color: var(--color-foreground);

src/Address.svelte

@@ -0,0 +1,34 @@
+<script lang="typescript">
+  import { ethers } from 'ethers';
+  import { explorerLink } from '@app/utils';
+  import Blockies from '@app/Blockies.svelte';
+  import type { Config } from '@app/config';
+
+  export let address: string;
+  export let config: Config;
+
+  let checksumAddress = ethers.utils.getAddress(address);
+</script>
+
+<style>
+  .address {
+    display: flex;
+    align-items: center;
+  }
+  .icon {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+    min-width: 1rem;
+    min-height: 1rem;
+  }
+  .address a {
+    border-bottom: none;
+  }
+</style>
+
+<div class="address">
+  <span class="icon"><Blockies address={address} /></span>
+  <a href={explorerLink(address, config)} target="_blank">{checksumAddress}</a>
+</div>

src/Form.svelte

@@ -12,10 +12,13 @@
   import { createEventDispatcher } from 'svelte';
   import { link } from 'svelte-routing';
   import { capitalize, isUrl, isAddress } from '@app/utils';
+  import Address from '@app/Address.svelte';
+  import type { Config } from '@app/config';
 
   export let fields: Field[];
   export let editable = false;
   export let disabled = false;
+  export let config: Config;
 
   const dispatch = createEventDispatcher();
   const save = () => dispatch('save', fields);
@@ -93,7 +96,7 @@
             {#if isUrl(field.value)}
               <a href="{field.value}" target="_blank">{field.value}</a>
             {:else if isAddress(field.value)}
-              <a use:link href={`/resolver/query?q=${field.value}`} class="address">{field.value}</a>
+              <Address address={field.value} {config} />
             {:else}
               {field.value}
             {/if}

src/base/orgs/View.svelte

@@ -14,6 +14,7 @@
   import Blockies from '@app/Blockies.svelte';
   import SetName from '@app/ens/SetName.svelte';
   import Project from '@app/base/projects/Widget.svelte';
+  import Address from '@app/Address.svelte';
   import * as utils from '@app/utils';
 
   import { Org } from './Org';
@@ -136,9 +137,12 @@
 
       <div class="fields">
         <!-- Address -->
-        <div class="label">Address</div><div>{org.address}</div><div></div>
+        <div class="label">Address</div>
+        <div><Address {config} address={org.address} /></div>
+        <div></div>
         <!-- Owner -->
-        <div class="label">Owner</div><div>{org.safe}</div>
+        <div class="label">Owner</div>
+        <div><Address {config} address={org.safe} /></div>
         <div>
           {#if isOwner(org)}
             <button class="tiny secondary" on:click={transferOwnership}>

src/base/registrations/View.svelte

@@ -127,7 +127,7 @@
         Transfer
       </button>
     </header>
-    <Form {editable} {fields} on:save={onSave} on:cancel={() => editable = false} />
+    <Form {config} {editable} {fields} on:save={onSave} on:cancel={() => editable = false} />
   </main>
 
   {#if updateRecords}

src/utils.ts

@@ -62,6 +62,8 @@ export function getSearchParam(key: string, location: RouteLocation): string | n
 export function explorerLink(addr: string, config: Config): string {
   if (config.network.name == "ropsten") {
     return `https://ropsten.etherscan.io/address/${addr}`;
+  } else if (config.network.name == "rinkeby") {
+    return `https://rinkeby.etherscan.io/address/${addr}`;
   }
   return `https://etherscan.io/address/${addr}`;
 }