forked from coracle/flotilla
Jon Staab
78 lines
3.4 KiB
Svelte
78 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import {spec, avg} from "@welshman/lib"
|
|
import {session, SessionMethod, signerLog} from "@welshman/app"
|
|
import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
|
|
import Danger from "@assets/icons/danger-triangle.svg?dataurl"
|
|
import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
|
|
import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
|
|
import Icon from "@lib/components/Icon.svelte"
|
|
import Button from "@lib/components/Button.svelte"
|
|
import LogOut from "@app/components/LogOut.svelte"
|
|
import {pushModal} from "@app/util/modal"
|
|
import PomadeSessions from "@app/components/PomadeSessions.svelte"
|
|
|
|
const finished = $derived($signerLog.filter(x => x.finished_at))
|
|
const pending = $derived($signerLog.filter(x => !x.finished_at))
|
|
const failure = $derived(finished.filter(spec({ok: false})))
|
|
const success = $derived(finished.filter(spec({ok: true})))
|
|
const cutoff = $derived(Date.now() - 10_000)
|
|
const recentCompleted = $derived($signerLog.filter(x => x.finished_at && x.finished_at > cutoff))
|
|
const recentAvg = $derived(avg(recentCompleted.map(x => x.finished_at! - x.started_at)))
|
|
const recentFailure = $derived(recentCompleted.filter(x => !x.ok))
|
|
const recentSuccess = $derived(recentCompleted.filter(x => x.ok))
|
|
const isDisconnected = $derived(
|
|
recentCompleted.length > 0 && recentFailure.length === recentCompleted.length,
|
|
)
|
|
|
|
const logout = () => pushModal(LogOut)
|
|
</script>
|
|
|
|
{#if $session && $session.method !== SessionMethod.Anonymous}
|
|
<div class="card2 bg-alt flex flex-col gap-4">
|
|
<div class="flex flex-col gap-2">
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-xl font-bold">Signer Status</span>
|
|
<span class="flex items-center gap-2">
|
|
{#if isDisconnected}
|
|
<Icon icon={CloseCircle} class="text-error" size={4} /> Disconnected
|
|
{:else if recentFailure.length > 3}
|
|
<Icon icon={Danger} class="text-warning" size={4} /> Partial Failure
|
|
{:else if recentAvg > 1000 || pending.length > 10}
|
|
<Icon icon={ClockCircle} class="text-warning" size={4} /> Slow connection
|
|
{:else if recentSuccess.length === 0 && recentFailure.length > 0}
|
|
<Icon icon={Danger} class="text-warning" size={4} /> Partial Failure
|
|
{:else}
|
|
<Icon icon={CheckCircle} class="text-success" size={4} /> Ok
|
|
{/if}
|
|
</span>
|
|
</div>
|
|
<div class="flex flex-col justify-between text-sm opacity-75 sm:flex-row">
|
|
<p>
|
|
Logged in with
|
|
{#if $session.method === SessionMethod.Nip01}
|
|
private key
|
|
{:else if $session.method === SessionMethod.Nip07}
|
|
browser extension
|
|
{:else if $session.method === SessionMethod.Nip46}
|
|
remote signer
|
|
{:else if $session.method === SessionMethod.Nip55}
|
|
{$session.signer}
|
|
{:else if $session.method === SessionMethod.Pubkey}
|
|
public key (readonly)
|
|
{:else if $session.method === SessionMethod.Pomade}
|
|
email and password
|
|
{/if}
|
|
</p>
|
|
<p>
|
|
{success.length} requests succeeded, {failure.length} failed, {pending.length} pending
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{#if isDisconnected}
|
|
<Button class="btn btn-outline btn-error" onclick={logout}>Logout to Reconnect</Button>
|
|
{:else}
|
|
<PomadeSessions />
|
|
{/if}
|
|
</div>
|
|
{/if}
|