2021-11-11 23:37:42 +01:00
|
|
|
<script lang="ts">
|
2021-11-30 23:18:39 +01:00
|
|
|
import { createEventDispatcher } from "svelte";
|
2021-12-01 19:59:37 +01:00
|
|
|
import { BLOB_TYPE_ADDR } from "upend/constants";
|
2021-11-11 23:37:42 +01:00
|
|
|
import HashBadge from "./HashBadge.svelte";
|
2021-12-21 20:02:47 +01:00
|
|
|
import Ellipsis from "../utils/Ellipsis.svelte";
|
2021-11-11 23:37:42 +01:00
|
|
|
import UpLink from "./UpLink.svelte";
|
2021-12-21 20:02:47 +01:00
|
|
|
import { useEntity } from "../../lib/entity";
|
2021-12-20 13:49:06 +01:00
|
|
|
import { readable } from "svelte/store";
|
2021-12-21 20:02:47 +01:00
|
|
|
import { notify, UpNotification } from "../../notifications";
|
2021-12-30 19:28:43 +01:00
|
|
|
import IconButton from "../utils/IconButton.svelte";
|
2021-11-30 23:18:39 +01:00
|
|
|
const dispatch = createEventDispatcher();
|
2021-11-11 23:37:42 +01:00
|
|
|
|
|
|
|
export let address: string;
|
2021-12-19 19:20:09 +01:00
|
|
|
export let labels: string[] = [];
|
2021-11-11 23:37:42 +01:00
|
|
|
export let link = false;
|
|
|
|
export let resolve = true;
|
2021-12-01 21:12:13 +01:00
|
|
|
export let banner = false;
|
2021-11-30 23:18:39 +01:00
|
|
|
|
2021-12-20 13:49:06 +01:00
|
|
|
let entity = readable(undefined);
|
|
|
|
$: if (resolve) ({ entity } = useEntity(address));
|
2021-12-01 19:59:37 +01:00
|
|
|
|
|
|
|
// isFile
|
2021-12-19 13:54:16 +01:00
|
|
|
$: isFile = $entity?.get("IS") === BLOB_TYPE_ADDR;
|
2021-12-01 19:59:37 +01:00
|
|
|
|
2021-11-11 23:37:42 +01:00
|
|
|
// Identification
|
2021-11-30 23:18:39 +01:00
|
|
|
let inferredIds: string[] = [];
|
2021-12-20 13:49:06 +01:00
|
|
|
$: inferredIds = $entity?.identify() || [];
|
2021-12-21 21:35:17 +01:00
|
|
|
$: resolving = inferredIds.concat(labels).length == 0 && !$entity;
|
2021-11-30 23:18:39 +01:00
|
|
|
|
2021-12-19 19:20:09 +01:00
|
|
|
$: displayLabel =
|
|
|
|
Array.from(new Set(inferredIds.concat(labels))).join(" | ") || address;
|
2021-12-01 13:37:23 +01:00
|
|
|
|
2021-11-30 23:18:39 +01:00
|
|
|
$: dispatch("resolved", inferredIds);
|
2021-12-19 22:38:41 +01:00
|
|
|
|
|
|
|
// Native open
|
|
|
|
function nativeOpen() {
|
2021-12-21 16:51:25 +01:00
|
|
|
notify.emit(
|
|
|
|
"notification",
|
|
|
|
new UpNotification(
|
|
|
|
`Opening ${
|
|
|
|
inferredIds[0] || address
|
|
|
|
} in a default native application...`
|
|
|
|
)
|
|
|
|
);
|
2021-12-21 16:46:19 +01:00
|
|
|
fetch(`/api/raw/${address}?native=1`)
|
|
|
|
.then((response) => {
|
|
|
|
if (!response.ok) {
|
|
|
|
throw new Error(response.statusText);
|
|
|
|
}
|
2021-12-22 11:56:06 +01:00
|
|
|
if (response.headers.has("warning")) {
|
|
|
|
const warningText = response.headers
|
|
|
|
.get("warning")
|
|
|
|
.split(" ")
|
|
|
|
.slice(2)
|
|
|
|
.join(" ");
|
|
|
|
notify.emit(
|
|
|
|
"notification",
|
|
|
|
new UpNotification(warningText, "warning")
|
|
|
|
);
|
|
|
|
}
|
2021-12-21 16:46:19 +01:00
|
|
|
})
|
|
|
|
.catch((err) => {
|
2021-12-21 16:51:25 +01:00
|
|
|
notify.emit(
|
|
|
|
"notification",
|
|
|
|
new UpNotification(
|
|
|
|
`Failed to open in native application! (${err})`,
|
|
|
|
"error"
|
|
|
|
)
|
|
|
|
);
|
2021-12-21 16:46:19 +01:00
|
|
|
});
|
2021-12-19 22:38:41 +01:00
|
|
|
}
|
2021-11-11 23:37:42 +01:00
|
|
|
</script>
|
|
|
|
|
2021-12-01 21:12:13 +01:00
|
|
|
<div class="address" class:identified={Boolean(inferredIds)} class:banner>
|
2021-11-11 23:37:42 +01:00
|
|
|
<HashBadge {address} />
|
2021-11-30 20:59:53 +01:00
|
|
|
<div class="separator" />
|
2021-12-19 19:20:09 +01:00
|
|
|
<div class="label" class:resolving title={displayLabel}>
|
2021-12-19 13:54:16 +01:00
|
|
|
{#if banner && isFile}
|
|
|
|
<a href="/api/raw/{address}" target="_blank">
|
2021-12-19 19:20:09 +01:00
|
|
|
<Ellipsis value={displayLabel} />
|
2021-12-19 13:54:16 +01:00
|
|
|
</a>
|
|
|
|
{:else if link}
|
|
|
|
<UpLink to={{ entity: address }}>
|
2021-12-19 19:20:09 +01:00
|
|
|
<Ellipsis value={displayLabel} />
|
2021-12-19 13:54:16 +01:00
|
|
|
</UpLink>
|
|
|
|
{:else}
|
2021-12-19 19:20:09 +01:00
|
|
|
<Ellipsis value={displayLabel} />
|
2021-12-19 13:54:16 +01:00
|
|
|
{/if}
|
|
|
|
</div>
|
2021-12-19 22:38:41 +01:00
|
|
|
{#if banner && isFile}
|
2021-12-30 19:28:43 +01:00
|
|
|
<IconButton
|
2021-12-20 13:44:03 +01:00
|
|
|
name="arrow-up-right-circle"
|
|
|
|
on:click={nativeOpen}
|
|
|
|
title="Open in default application..."
|
|
|
|
/>
|
2021-12-19 22:38:41 +01:00
|
|
|
{/if}
|
2021-11-11 23:37:42 +01:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.address {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
|
2021-11-30 20:59:53 +01:00
|
|
|
padding: 0.1em;
|
|
|
|
|
|
|
|
font-family: var(--monospace-font);
|
|
|
|
line-break: anywhere;
|
2021-11-11 23:37:42 +01:00
|
|
|
|
2021-12-30 23:24:38 +01:00
|
|
|
background: var(--background-lighter);
|
2021-12-01 21:12:13 +01:00
|
|
|
border: 0.1em solid var(--foreground-lighter);
|
|
|
|
border-radius: 0.2em;
|
|
|
|
|
|
|
|
&.banner {
|
|
|
|
border: 0.12em solid var(--foreground);
|
|
|
|
padding: 0.5em 0.25em;
|
|
|
|
}
|
|
|
|
|
2021-11-11 23:37:42 +01:00
|
|
|
&.identified {
|
|
|
|
font-family: var(--default-font);
|
|
|
|
font-size: 0.95em;
|
|
|
|
line-break: auto;
|
|
|
|
}
|
2021-11-30 20:59:53 +01:00
|
|
|
}
|
2021-11-11 23:37:42 +01:00
|
|
|
|
2021-12-11 21:26:55 +01:00
|
|
|
.label {
|
|
|
|
flex-grow: 1;
|
|
|
|
min-width: 0;
|
|
|
|
}
|
|
|
|
|
2021-11-30 20:59:53 +01:00
|
|
|
.separator {
|
|
|
|
width: 0.5em;
|
2021-11-11 23:37:42 +01:00
|
|
|
}
|
2021-11-30 21:18:47 +01:00
|
|
|
|
|
|
|
.resolving {
|
|
|
|
opacity: 0.7;
|
|
|
|
}
|
2021-11-11 23:37:42 +01:00
|
|
|
</style>
|