Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Improve address rendering
Alexis Sellier committed 4 years ago
commit b49699dfe0254f74578c71a01c671ee39438ee8b
parent e635556beec32fa7a82782d5887e38afb55ae322
6 files changed +48 -5
modified 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);
added 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>
modified 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}
modified 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}>
modified 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}
modified 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}`;

}