Add signer status, re-work bunker login

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+# 1.2.3
+
+* Add `created_at` to event info dialog
+* Add signer status to profile page
+* Re-work bunker login flow
+
 # 1.2.2
 
 * Fix phantom chat notifications

src/app/components/BunkerConnect.svelte

@@ -1,79 +1,25 @@
-<script module lang="ts">
-  import type {Nip46ResponseWithResult} from "@welshman/signer"
-  import {Nip46Broker, makeSecret} from "@welshman/signer"
-  import {NIP46_PERMS, PLATFORM_URL, PLATFORM_NAME, PLATFORM_LOGO, SIGNER_RELAYS} from "@app/state"
-
-  export class BunkerConnectController {
-    url = $state("")
-    bunker = $state("")
-    loading = $state(false)
-    clientSecret = makeSecret()
-    abortController = new AbortController()
-    broker = new Nip46Broker({clientSecret: this.clientSecret, relays: SIGNER_RELAYS})
-    onNostrConnect: (response: Nip46ResponseWithResult) => void
-
-    constructor({onNostrConnect}: {onNostrConnect: (response: Nip46ResponseWithResult) => void}) {
-      this.onNostrConnect = onNostrConnect
-    }
-
-    async start() {
-      this.url = await this.broker.makeNostrconnectUrl({
-        perms: NIP46_PERMS,
-        url: PLATFORM_URL,
-        name: PLATFORM_NAME,
-        image: PLATFORM_LOGO,
-      })
-
-      let response
-      try {
-        response = await this.broker.waitForNostrconnect(this.url, this.abortController.signal)
-      } catch (errorResponse: any) {
-        if (errorResponse?.error) {
-          pushToast({
-            theme: "error",
-            message: `Received error from signer: ${errorResponse.error}`,
-          })
-        } else if (errorResponse) {
-          console.error(errorResponse)
-        }
-      }
-
-      if (response) {
-        this.loading = true
-        this.onNostrConnect(response)
-      }
-    }
-
-    stop() {
-      this.broker.cleanup()
-      this.abortController.abort()
-    }
-  }
-</script>
-
 <script lang="ts">
-  import {onMount, onDestroy} from "svelte"
-  import {slideAndFade} from "@lib/transition"
+  import Spinner from "@lib/components/Spinner.svelte"
   import QRCode from "@app/components/QRCode.svelte"
-  import {pushToast} from "@app/toast"
+  import type {Nip46Controller} from "@app/nip46"
 
   type Props = {
-    controller: BunkerConnectController
+    controller: Nip46Controller
   }
 
   const {controller}: Props = $props()
-
-  onMount(() => {
-    controller.start()
-  })
-
-  onDestroy(() => {
-    controller.stop()
-  })
+  const {url, loading} = controller
 </script>
 
-{#if controller.url}
-  <div class="flex justify-center" out:slideAndFade>
-    <QRCode code={controller.url} />
+{#if $url}
+  {#if $loading}
+    <div class="flex justify-center">
+      <Spinner loading>Establishing connection...</Spinner>
     </div>
+  {:else}
+    <div class="flex flex-col items-center gap-2">
+      <QRCode code={$url} />
+      <p class="text-sm opacity-75">Scan with your signer to log in, or click to copy.</p>
+    </div>
+  {/if}
 {/if}

src/app/components/BunkerUrl.svelte

@@ -1,16 +1,30 @@
 <script lang="ts">
-  import {pushModal} from "@app/modal"
-  import InfoBunker from "@app/components/InfoBunker.svelte"
+  import {debounce} from "throttle-debounce"
+  import Scanner from "@lib/components/Scanner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
   import Icon from "@lib/components/Icon.svelte"
+  import InfoBunker from "@app/components/InfoBunker.svelte"
+  import type {Nip46Controller} from "@app/nip46"
+  import {pushModal} from "@app/modal"
 
   type Props = {
-    bunker: string
-    loading: boolean
+    controller: Nip46Controller
   }
 
-  let {loading, bunker = $bindable("")}: Props = $props()
+  const {controller}: Props = $props()
+  const {loading, bunker} = controller
+
+  const toggleScanner = () => {
+    showScanner = !showScanner
+  }
+
+  const onScan = debounce(1000, async (data: string) => {
+    showScanner = false
+    $bunker = data
+  })
+
+  let showScanner = $state(false)
 </script>
 
 <Field>
@@ -20,7 +34,10 @@
   {#snippet input()}
     <label class="input input-bordered flex w-full items-center gap-2">
       <Icon icon="cpu" />
-      <input disabled={loading} bind:value={bunker} class="grow" placeholder="bunker://" />
+      <input disabled={$loading} bind:value={$bunker} class="grow" placeholder="bunker://" />
+      <Button onclick={toggleScanner}>
+        <Icon icon="qr-code" />
+      </Button>
     </label>
   {/snippet}
   {#snippet info()}
@@ -30,3 +47,6 @@
     </p>
   {/snippet}
 </Field>
+{#if showScanner}
+  <Scanner onscan={onScan} />
+{/if}

src/app/components/LogInBunker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import {onMount, onDestroy} from "svelte"
   import type {Nip46ResponseWithResult} from "@welshman/signer"
   import {Nip46Broker, makeSecret} from "@welshman/signer"
   import {loginWithNip01, loginWithNip46} from "@welshman/app"
@@ -8,17 +9,24 @@
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
-  import BunkerConnect, {BunkerConnectController} from "@app/components/BunkerConnect.svelte"
+  import BunkerConnect from "@app/components/BunkerConnect.svelte"
   import BunkerUrl from "@app/components/BunkerUrl.svelte"
+  import {Nip46Controller} from "@app/nip46"
   import {loadUserData} from "@app/requests"
   import {clearModals} from "@app/modal"
   import {setChecked} from "@app/notifications"
   import {pushToast} from "@app/toast"
   import {SIGNER_RELAYS, NIP46_PERMS} from "@app/state"
 
-  const back = () => history.back()
+  const back = () => {
+    if (mode === "connect") {
+      selectBunker()
+    } else {
+      history.back()
+    }
+  }
 
-  const controller = new BunkerConnectController({
+  const controller = new Nip46Controller({
     onNostrConnect: async (response: Nip46ResponseWithResult) => {
       const pubkey = await controller.broker.getPublicKey()
 
@@ -30,13 +38,13 @@
     },
   })
 
+  const {loading, bunker} = controller
+
   const onSubmit = async () => {
-    if (controller.loading) return
+    if ($loading) return
 
     try {
-      const {signerPubkey, connectSecret, relays} = Nip46Broker.parseBunkerUrl(controller.bunker)
-
-      console.log({signerPubkey, connectSecret, relays})
+      const {signerPubkey, connectSecret, relays} = Nip46Broker.parseBunkerUrl($bunker)
 
       if (!signerPubkey || relays.length === 0) {
         return pushToast({
@@ -45,7 +53,7 @@
         })
       }
 
-      controller.loading = true
+      controller.loading.set(true)
 
       const {clientSecret} = controller
       const broker = new Nip46Broker({relays, clientSecret, signerPubkey})
@@ -74,42 +82,65 @@
         message: "Something went wrong, please try again!",
       })
     } finally {
-      controller.loading = false
+      controller.loading.set(false)
     }
 
     clearModals()
   }
 
+  const selectConnect = () => {
+    mode = "connect"
+  }
+
+  const selectBunker = () => {
+    mode = "bunker"
+  }
+
+  let mode: string = $state("bunker")
+
   $effect(() => {
     // For testing and for play store reviewers
-    if (controller.bunker === "reviewkey") {
+    if ($bunker === "reviewkey") {
       loginWithNip01(makeSecret())
     }
   })
+
+  onMount(() => {
+    controller.start()
+  })
+
+  onDestroy(() => {
+    controller.stop()
+  })
 </script>
 
 <form class="column gap-4" onsubmit={preventDefault(onSubmit)}>
   <ModalHeader>
     {#snippet title()}
-      <div>Log In</div>
+      <div>Log In with a Signer</div>
     {/snippet}
     {#snippet info()}
-      <div>Connect your signer by scanning the QR code below or pasting a bunker link.</div>
+      <div>Using a remote signer app helps you keep your keys safe.</div>
     {/snippet}
   </ModalHeader>
+  <div class:hidden={mode !== "bunker"}></div>
+  {#if mode === "connect"}
     <BunkerConnect {controller} />
-  <BunkerUrl loading={controller.loading} bind:bunker={controller.bunker} />
+  {:else}
+    <BunkerUrl {controller} />
+    <Button class="btn {$bunker ? 'btn-neutral' : 'btn-primary'}" onclick={selectConnect}
+      >Log in with a QR code instead</Button>
+  {/if}
   <ModalFooter>
-    <Button class="btn btn-link" onclick={back} disabled={controller.loading}>
+    <Button class="btn btn-link" onclick={back} disabled={$loading}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>
-    <Button
-      type="submit"
-      class="btn btn-primary"
-      disabled={controller.loading || !controller.bunker}>
-      <Spinner loading={controller.loading}>Next</Spinner>
+    {#if mode === "bunker"}
+      <Button type="submit" class="btn btn-primary" disabled={$loading || !$bunker}>
+        <Spinner loading={$loading}>Next</Spinner>
         <Icon icon="alt-arrow-right" />
       </Button>
+    {/if}
   </ModalFooter>
 </form>

src/app/components/PrimaryNav.svelte

@@ -77,7 +77,7 @@
           </PrimaryNavItem>
         {/if}
         <PrimaryNavItem title="Add Space" onclick={addSpace} class="tooltip-right">
-          <Avatar icon="settings-minimalistic" class="!h-10 !w-10" />
+          <Avatar icon="add-square" class="!h-10 !w-10" />
         </PrimaryNavItem>
       {/each}
     </div>

src/app/components/SignerStatus.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import {spec, prop, avg} from "@welshman/lib"
+  import {signerLog, SignerLogEntryStatus} from "@welshman/app"
+  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/modal"
+
+  const {Pending, Success, Failure} = SignerLogEntryStatus
+  const pending = $derived($signerLog.filter(spec({status: Pending})).length)
+  const success = $derived($signerLog.filter(spec({status: Success})).length)
+  const failure = $derived($signerLog.filter(spec({status: Failure})).length)
+  const recent = $derived($signerLog.slice(-10))
+  const recentAvg = $derived(avg(recent.map(prop("duration"))))
+  const recentPending = $derived(recent.filter(spec({status: Pending})).length)
+  const recentSuccess = $derived(recent.filter(spec({status: Success})).length)
+  const recentFailure = $derived(recent.filter(spec({status: Failure})).length)
+  const isDisconnected = $derived(
+    recent.length > 0 && recentFailure + recentPending === recent.length,
+  )
+
+  const logout = () => pushModal(LogOut)
+</script>
+
+<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="close-circle" class="text-error" size={4} /> Disconnected
+        {:else if recentFailure > 3}
+          <Icon icon="danger" class="text-warning" size={4} /> Partial Failure
+        {:else if recentAvg > 1000 || recentPending > 3}
+          <Icon icon="clock-circle" class="text-warning" size={4} /> Slow connection
+        {:else if recentSuccess === 0 && recentFailure > 0}{:else}
+          <Icon icon="check-circle" class="text-success" size={4} /> Ok
+        {/if}
+      </span>
+    </div>
+    <p class="text-sm opacity-75">
+      {success} requests succeeded, {failure} failed, {pending} pending
+    </p>
+  </div>
+  {#if isDisconnected}
+    <Button class="btn btn-outline btn-error" onclick={logout}>Logout to Reconnect</Button>
+  {/if}
+</div>

src/app/nip46.ts

@@ -0,0 +1,54 @@
+import {writable} from "svelte/store"
+import type {Nip46ResponseWithResult} from "@welshman/signer"
+import {Nip46Broker, makeSecret} from "@welshman/signer"
+import {NIP46_PERMS, PLATFORM_URL, PLATFORM_NAME, PLATFORM_LOGO, SIGNER_RELAYS} from "@app/state"
+import {pushToast} from "@app/toast"
+
+export class Nip46Controller {
+  url = writable("")
+  bunker = writable("")
+  loading = writable(false)
+  clientSecret = makeSecret()
+  abortController = new AbortController()
+  broker = new Nip46Broker({clientSecret: this.clientSecret, relays: SIGNER_RELAYS})
+  onNostrConnect: (response: Nip46ResponseWithResult) => void
+
+  constructor({onNostrConnect}: {onNostrConnect: (response: Nip46ResponseWithResult) => void}) {
+    this.onNostrConnect = onNostrConnect
+  }
+
+  async start() {
+    const url = await this.broker.makeNostrconnectUrl({
+      perms: NIP46_PERMS,
+      url: PLATFORM_URL,
+      name: PLATFORM_NAME,
+      image: PLATFORM_LOGO,
+    })
+
+    this.url.set(url)
+
+    let response
+    try {
+      response = await this.broker.waitForNostrconnect(url, this.abortController.signal)
+    } catch (errorResponse: any) {
+      if (errorResponse?.error) {
+        pushToast({
+          theme: "error",
+          message: `Received error from signer: ${errorResponse.error}`,
+        })
+      } else if (errorResponse) {
+        console.error(errorResponse)
+      }
+    }
+
+    if (response) {
+      this.loading.set(true)
+      this.onNostrConnect(response)
+    }
+  }
+
+  stop() {
+    this.broker.cleanup()
+    this.abortController.abort()
+  }
+}

src/routes/settings/profile/+page.svelte

@@ -11,6 +11,7 @@
   import Content from "@app/components/Content.svelte"
   import ProfileEdit from "@app/components/ProfileEdit.svelte"
   import ProfileDelete from "@app/components/ProfileDelete.svelte"
+  import SignerStatus from "@app/components/SignerStatus.svelte"
   import InfoKeys from "@app/components/InfoKeys.svelte"
   import Alerts from "@app/components/Alerts.svelte"
   import {PLATFORM_NAME} from "@app/state"
@@ -129,6 +130,7 @@
         {/snippet}
       </FieldInline>
     {/if}
+    <SignerStatus />
   </div>
   <Alerts />
   <div class="card2 bg-alt shadow-xl">

svelte.config.js

@@ -16,7 +16,7 @@ export default {
     },
     csp: {
       directives: {
-        "script-src": ["self", "plausible.coracle.social"],
+        "script-src": ["self", "wasm-unsafe-eval", "plausible.coracle.social", "sha256-NpqGpeZTuPniNAucgyfqzWy9iIHwOswFzPzpigwvp/c="],
         "worker-src": ["self", "blob:"],
         "style-src": ["self", "unsafe-inline"],
         "frame-src": ["none"],