remove nip05 login, use nostrconnect instead

package.json

@@ -33,6 +33,8 @@
   },
   "type": "module",
   "dependencies": {
+    "@capacitor/cli": "^6.1.2",
+    "@capacitor/core": "^6.1.2",
     "@noble/curves": "^1.5.0",
     "@noble/hashes": "^1.4.0",
     "@poppanator/sveltekit-svg": "^4.2.1",
@@ -52,13 +54,13 @@
     "@types/throttle-debounce": "^5.0.2",
     "@vite-pwa/assets-generator": "^0.2.6",
     "@vite-pwa/sveltekit": "^0.6.6",
-    "@welshman/app": "~0.0.23",
+    "@welshman/app": "~0.0.25",
     "@welshman/content": "~0.0.12",
     "@welshman/dvm": "~0.0.10",
-    "@welshman/feeds": "~0.0.23",
+    "@welshman/feeds": "~0.0.25",
     "@welshman/lib": "~0.0.24",
-    "@welshman/net": "~0.0.33",
-    "@welshman/signer": "~0.0.11",
+    "@welshman/net": "~0.0.35",
+    "@welshman/signer": "~0.0.13",
     "@welshman/store": "~0.0.12",
     "@welshman/util": "~0.0.45",
     "daisyui": "^4.12.10",
@@ -70,6 +72,7 @@
     "nostr-editor": "^0.0.3",
     "nostr-tools": "^2.7.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
+    "qrcode": "^1.5.4",
     "svelte-tiptap": "^1.1.3",
     "throttle-debounce": "^5.0.2"
   }

src/app/components/ChatMessage.svelte

@@ -82,7 +82,7 @@
   </Tippy>
   <div class="flex flex-col">
     <LongPress
-      class="chat-bubble mx-1 flex max-w-sm flex-col gap-1 text-left bg-alt cursor-auto"
+      class="bg-alt chat-bubble mx-1 flex max-w-sm cursor-auto flex-col gap-1 text-left"
       onLongPress={showMobileMenu}>
       {#if showPubkey && event.pubkey !== $pubkey}
         <div class="flex items-center gap-2">

src/app/components/InfoBunker.svelte

@@ -27,7 +27,8 @@
   <p>
     If you don't have a signer yet, <Link external class="link" href="https://nsec.app/"
       >nsec.app</Link>
-    is a great way to get started.
+    is a great way to get started. You can find more signers on <Link external class="link" href="https://nostrapps.com#signers"
+      >nostrapps.com</Link>.
   </p>
   <Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
 </div>

src/app/components/Landing.svelte

@@ -20,7 +20,7 @@
       <p class="text-center">The chat app built for self-hosted communities.</p>
     </div>
     <Button on:click={logIn}>
-      <CardButton>
+      <CardButton class="!btn-primary">
         <div slot="icon"><Icon icon="login-2" size={7} /></div>
         <div slot="title">Log in</div>
         <div slot="info">If you've been here before, you know the drill.</div>

src/app/components/LogIn.svelte

@@ -1,15 +1,13 @@
 <script lang="ts">
   import {onMount} from "svelte"
-  import {makeSecret, getNip07, Nip46Broker, getNip55, Nip55Signer} from "@welshman/signer"
-  import {addSession, loadHandle, nip46Perms, type Session} from "@welshman/app"
+  import {Capacitor} from '@capacitor/core'
+  import {getNip07, getNip55, Nip55Signer} from "@welshman/signer"
+  import {addSession, type Session} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
-  import Tippy from "@lib/components/Tippy.svelte"
+  import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
-  import Divider from "@lib/components/Divider.svelte"
-  import Spinner from "@lib/components/Spinner.svelte"
   import SignUp from "@app/components/SignUp.svelte"
   import InfoNostr from "@app/components/InfoNostr.svelte"
-  import LogInInfoRemoteSigner from "@app/components/LogInInfoRemoteSigner.svelte"
   import LogInBunker from "@app/components/LogInBunker.svelte"
   import {pushModal, clearModals} from "@app/modal"
   import {PLATFORM_NAME} from "@app/state"
@@ -37,45 +35,6 @@
     clearModals()
   }
 
-  const loginWithNip46 = withLoading(async () => {
-    const rootHandle = await loadHandle(`_@${domain}`)
-
-    if (!rootHandle?.pubkey) {
-      return pushToast({
-        theme: "error",
-        message: "Sorry, we couldn't find that remote signer.",
-      })
-    }
-
-    const secret = makeSecret()
-    const {pubkey, nip46, relays = []} = (await loadHandle(`${username}@${domain}`)) || {}
-
-    if (!pubkey) {
-      return pushToast({
-        theme: "error",
-        message: "Sorry, it looks like you don't have an account yet. Try signing up instead.",
-      })
-    }
-
-    const handler = {
-      domain,
-      pubkey: rootHandle.pubkey,
-      relays: rootHandle.nip46 || rootHandle.relays || nip46 || relays,
-    }
-
-    // Gotta use user pubkey as the handler pubkey for historical reasons
-    const broker = Nip46Broker.get({secret, handler: {...handler, pubkey}})
-
-    if (await broker.connect("", nip46Perms)) {
-      await onSuccess({method: "nip46", pubkey, secret, handler: {...handler, pubkey}}, relays)
-    } else {
-      pushToast({
-        theme: "error",
-        message: "Something went wrong! Please try again.",
-      })
-    }
-  })
-
   const loginWithNip07 = withLoading(async () => {
     const pubkey = await getNip07()?.getPublicKey()
 
@@ -105,55 +64,30 @@
 
   const loginWithBunker = () => pushModal(LogInBunker)
 
-  let username = ""
-  let domain = "nsec.app"
   let loading = false
   let signers: any[] = []
+  let hasNativeSigner = Boolean(getNip07())
 
   onMount(async () => {
-    signers = await getNip55()
+    if (Capacitor.isNativePlatform()) {
+      signers = await getNip55()
+
+      if (signers.length > 0) {
+        hasNativeSigner = true
+      }
+    }
   })
 </script>
 
-<form class="column gap-4" on:submit|preventDefault={loginWithNip46}>
+<div class="column gap-4">
   <h1 class="heading">Log in with Nostr</h1>
   <p class="m-auto max-w-sm text-center">
     {PLATFORM_NAME} is built using the
     <Button class="link" on:click={() => pushModal(InfoNostr)}>nostr protocol</Button>, which allows
     you to own your social identity.
   </p>
-  <div class="grid grid-cols-3 items-center gap-3">
-    <p class="font-bold">Username</p>
-    <label class="input input-bordered col-span-2 flex w-full items-center gap-2">
-      <Icon icon="user-circle" />
-      <input
-        bind:value={username}
-        disabled={loading}
-        class="grow"
-        type="text"
-        placeholder="username" />
-    </label>
-    <Tippy component={LogInInfoRemoteSigner} params={{interactive: true}}>
-      <p class="flex cursor-pointer items-center gap-2 font-bold">
-        Remote Signer
-        <Icon icon="info-circle" class="opacity-50" />
-      </p>
-    </Tippy>
-    <label class="input input-bordered col-span-2 flex w-full items-center gap-2">
-      <Icon icon="key-minimalistic-square-3" />
-      <input bind:value={domain} disabled={loading} class="grow" type="text" />
-    </label>
-  </div>
-  <Button type="submit" class="btn btn-primary flex-grow" disabled={!username || loading}>
-    <Spinner {loading}>Log In</Spinner>
-    <Icon icon="alt-arrow-right" />
-  </Button>
-  <Divider>Or</Divider>
   {#if getNip07()}
-    <Button
-      disabled={loading}
-      on:click={loginWithNip07}
-      class="btn {username ? 'btn-neutral' : 'btn-primary'}">
+    <Button disabled={loading} on:click={loginWithNip07} class="btn btn-primary">
       <Icon icon="widget" />
       Log in with Extension
     </Button>
@@ -164,12 +98,22 @@
       Log in with {app.name}
     </Button>
   {/each}
-  <Button disabled={loading} on:click={loginWithBunker} class="btn btn-neutral">
+  <Button
+    disabled={loading}
+    on:click={loginWithBunker}
+    class="btn {hasNativeSigner ? 'btn-neutral' : 'btn-primary'}">
     <Icon icon="cpu" />
-    Log in with Bunker Link
+    Log in with Remote Signer
   </Button>
+  <Link
+    external
+    href="https://nostrapps.com#signers"
+    class="btn {hasNativeSigner ? '' : 'btn-neutral'}">
+    <Icon icon="compass" />
+    Browse Signer Apps
+  </Link>
   <div class="text-sm">
     Need an account?
     <Button class="link" on:click={signUp}>Register instead</Button>
   </div>
-</form>
+</div>

src/app/components/LogInBunker.svelte

@@ -1,22 +1,40 @@
 <script lang="ts">
   import {Nip46Broker} from "@welshman/signer"
+  import {nip46Perms, addSession} from "@welshman/app"
+  import {slideAndFade} from '@lib/transition'
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
   import Field from "@lib/components/Field.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import QRCode from "@app/components/QRCode.svelte"
   import InfoBunker from "@app/components/InfoBunker.svelte"
   import {loginWithNip46, loadUserData} from "@app/commands"
   import {pushModal, clearModals} from "@app/modal"
   import {pushToast} from "@app/toast"
-  import {PLATFORM_NAME} from "@app/state"
+  import {PLATFORM_URL, PLATFORM_NAME, PLATFORM_LOGO, SIGNER_RELAYS} from "@app/state"
 
   const back = () => history.back()
 
+  const abortController = new AbortController()
+
+  const init = Nip46Broker.initiate({
+    perms: nip46Perms,
+    url: PLATFORM_URL,
+    name: PLATFORM_NAME,
+    relays: SIGNER_RELAYS,
+    image: PLATFORM_LOGO,
+    abortController,
+  })
+
   const onSubmit = async () => {
     const {pubkey, token, relays} = Nip46Broker.parseBunkerLink(bunker)
 
+    if (loading) {
+      return
+     }
+
     if (!pubkey || relays.length === 0) {
       return pushToast({
         theme: "error",
@@ -34,6 +52,8 @@
         })
       }
 
+      abortController.abort()
+
       await loadUserData(pubkey)
     } finally {
       loading = false
@@ -44,18 +64,42 @@
 
   let bunker = ""
   let loading = false
+
+  init.result.then(async pubkey => {
+    if (pubkey) {
+      loading = true
+
+      addSession({
+        pubkey,
+        method: "nip46",
+        secret: init.clientSecret,
+        handler: {pubkey, relays: SIGNER_RELAYS},
+      })
+
+      await loadUserData(pubkey)
+
+      clearModals()
+    }
+  })
 </script>
 
 <form class="column gap-4" on:submit|preventDefault={onSubmit}>
   <ModalHeader>
     <div slot="title">Log In</div>
-    <div slot="info">Connect your signer app with {PLATFORM_NAME} using a bunker link.</div>
+    <div slot="info">
+      Connect your signer by scanning the QR code below or pasting a bunker link.
+    </div>
   </ModalHeader>
+  {#if !loading}
+    <div class="m-auto w-xs" out:slideAndFade>
+      <QRCode code={init.nostrconnect} />
+    </div>
+  {/if}
   <Field>
     <p slot="label">Bunker Link*</p>
     <label class="input input-bordered flex w-full items-center gap-2" slot="input">
       <Icon icon="cpu" />
-      <input bind:value={bunker} class="grow" placeholder="bunker://" />
+      <input disabled={loading} bind:value={bunker} class="grow" placeholder="bunker://" />
     </label>
     <p slot="info">
       A login link provided by a nostr signing app.
@@ -63,7 +107,7 @@
     </p>
   </Field>
   <ModalFooter>
-    <Button class="btn btn-link" on:click={back}>
+    <Button class="btn btn-link" on:click={back} disabled={loading}>
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>

src/app/components/LogInInfoRemoteSigner.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-  import Button from "@lib/components/Button.svelte"
-  import InfoKeys from "@app/components/InfoKeys.svelte"
-  import {pushModal} from "@app/modal"
-</script>
-
-<p class="card2 bg-alt text-sm transition-all">
-  A remote signer is a simple way to protect your private key.
-  <Button class="link" on:click={() => pushModal(InfoKeys)}>What is a private key?</Button>
-</p>

src/app/components/ProfileFeed.svelte

@@ -4,7 +4,6 @@
   import {deriveEvents} from "@welshman/store"
   import {feedFromFilter} from "@welshman/feeds"
   import {NOTE, getAncestorTags} from "@welshman/util"
-  import type {TrustedEvent} from "@welshman/util"
   import {repository, createFeedController} from "@welshman/app"
   import {createScroller} from "@lib/html"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -24,7 +23,7 @@
       element,
       delay: 300,
       threshold: 3000,
-      onScroll: () => ctrl.load(5)
+      onScroll: () => ctrl.load(5),
     })
 
     return () => scroller.stop()

src/app/components/QRCode.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import QRCode from "qrcode"
+  import {onMount} from "svelte"
+  import Button from "@lib/components/Button.svelte"
+  import {clip} from "@app/toast"
+
+  export let code
+
+  let canvas, wrapper
+  let scale = 0.1
+  let height = null
+
+  onMount(() => {
+    QRCode.toCanvas(canvas, code)
+
+    const wrapperRect = wrapper.getBoundingClientRect()
+    const canvasRect = canvas.getBoundingClientRect()
+
+    scale = wrapperRect.width / (canvasRect.width * 10)
+    height = canvasRect.width * 10 * scale
+  })
+</script>
+
+<Button on:click={() => clip(code)}>
+  <div bind:this={wrapper} style={`height: ${height}px`}>
+    <canvas
+      class="rounded-box"
+      bind:this={canvas}
+      style={`transform-origin: top left; transform: scale(${scale}, ${scale})`} />
+  </div>
+</Button>

src/app/state.ts

@@ -77,7 +77,11 @@ export const INDEXER_RELAYS = [
   "wss://relay.nostr.band/",
 ]
 
-export const PLATFORM_LOGO = "/pwa-192x192.png"
+export const SIGNER_RELAYS = ["wss://relay.nsec.app/", "wss://bucket.coracle.social/"]
+
+export const PLATFORM_URL = window.location.origin
+
+export const PLATFORM_LOGO = PLATFORM_URL + "/pwa-192x192.png"
 
 export const PLATFORM_NAME = import.meta.env.VITE_PLATFORM_NAME
 

src/routes/spaces/[relay]/+layout.svelte

@@ -13,7 +13,7 @@
 
   $: url = decodeRelay($page.params.relay)
 
-  const ifLet = <T>(x: T | undefined, f: (x: T) => void) => x === undefined ? undefined : f(x)
+  const ifLet = <T,>(x: T | undefined, f: (x: T) => void) => (x === undefined ? undefined : f(x))
 
   const checkConnection = async () => {
     ifLet(await checkRelayConnection(url), error => {

src/routes/spaces/[relay]/threads/+page.svelte

@@ -35,14 +35,14 @@
 
   onMount(() => {
     const ctrl = createFeedController({
-      feed: feedsFromFilters(filters),
+      feed,
       onExhausted: () => {
         loading = false
       },
     })
 
     const unsub = subscribePersistent({
-      filters: filters.map(assoc('since', ago(30))),
+      filters: filters.map(assoc("since", ago(30))),
       relays: [url],
     })
 
@@ -50,7 +50,11 @@
       element,
       delay: 300,
       threshold: 3000,
-      onScroll: () => ctrl.load(5),
+      onScroll: async () => {
+        limit += 5
+
+        await ctrl.load(5)
+      },
     })
 
     return () => {