upend/ui/src/components/Address.svelte

<script lang="ts">
  import { createEventDispatcher } from "svelte";
  import { BLOB_TYPE_ADDR } from "upend/constants";
  import HashBadge from "./HashBadge.svelte";
  import Ellipsis from "./Ellipsis.svelte";
  import UpLink from "./UpLink.svelte";
  import { useEntity } from "../lib/entity";
  import type { UpObject } from "upend";
  const dispatch = createEventDispatcher();

  export let address: string;
  export let labels: string[] = [];
  export let link = false;
  export let resolve = true;
  export let banner = false;

  let resolving = resolve;

  $: ({ entity } = useEntity(address));

  // isFile
  $: isFile = $entity?.get("IS") === BLOB_TYPE_ADDR;

  // Identification
  let inferredIds: string[] = [];
  $: {
    if (resolve) {
      resolving = true;
      inferredIds = $entity?.identify() || [];
      resolving = false;
    }
  }

  $: displayLabel =
    Array.from(new Set(inferredIds.concat(labels))).join(" | ") || address;

  $: dispatch("resolved", inferredIds);

  // Native open
  function nativeOpen() {
    fetch(`/api/raw/${address}?native=1`);
  }
</script>

<div class="address" class:identified={Boolean(inferredIds)} class:banner>
  <HashBadge {address} />
  <div class="separator" />
  <div class="label" class:resolving title={displayLabel}>
    {#if banner && isFile}
      <a href="/api/raw/{address}" target="_blank">
        <Ellipsis value={displayLabel} />
      </a>
    {:else if link}
      <UpLink to={{ entity: address }}>
        <Ellipsis value={displayLabel} />
      </UpLink>
    {:else}
      <Ellipsis value={displayLabel} />
    {/if}
  </div>
  {#if banner && isFile}
    <sl-icon-button
      name="arrow-up-right-circle"
      on:click={nativeOpen}
      title="Open in default application..."
    />
  {/if}
</div>

<style scoped lang="scss">
  .address {
    display: flex;
    align-items: center;

    padding: 0.1em;

    font-family: var(--monospace-font);
    line-break: anywhere;

    background: var(--background-emph);
    border: 0.1em solid var(--foreground-lighter);
    border-radius: 0.2em;

    &.banner {
      border: 0.12em solid var(--foreground);
      padding: 0.5em 0.25em;
    }

    &.identified {
      font-family: var(--default-font);
      font-size: 0.95em;
      line-break: auto;
    }
  }

  .label {
    flex-grow: 1;
    min-width: 0;
  }

  .separator {
    width: 0.5em;
  }

  .resolving {
    opacity: 0.7;
  }

  sl-icon-button {
    &::part(base) {
      padding: 0 .25em;
    }
  }
</style>