window.nostr.js 0.4.6 → 0.4.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "window.nostr.js",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "type": "module",
   "main": "dist/window.nostr.js",
   "devDependencies": {
@@ -24,6 +24,6 @@
   },
   "dependencies": {
     "debounce": "2.0.0",
-    "nostr-tools": "2.9.3"
+    "nostr-tools": "2.12.0"
   }
 }

package/src/App.svelte

@@ -11,27 +11,26 @@
   import {
     BunkerSigner,
     type BunkerSignerParams,
-    createAccount,
     parseBunkerInput,
     type BunkerPointer,
-    type BunkerProfile,
-    BUNKER_REGEX,
-    queryBunkerProfile
+    BUNKER_REGEX
   } from 'nostr-tools/nip46'
-  import {NIP05_REGEX, queryProfile} from 'nostr-tools/nip05'
+  import {NIP05_REGEX} from 'nostr-tools/nip05'
   import {npubEncode} from 'nostr-tools/nip19'
   import {onMount} from 'svelte'
   import mediaQueryStore from './mediaQueryStore.js'
   import Spinner from './Spinner.svelte'
 
+  const currentDomain = window.location.hostname
+  const currentProtocol = window.location.protocol
+
   const mobileMode = mediaQueryStore('only screen and (max-width: 640px)')
   const lskeys = {
     ORIGIN: 'wnj:origin',
     CLIENT_SECRET: 'wnj:clientSecret',
     Y_POS: 'wnj:ypos',
     CALLBACK_TOKEN: 'wnj:callbackToken',
-    BUNKER_POINTER: 'wnj:bunkerPointer',
-    CACHED_PUBKEY: 'wnj:cachedPubKey'
+    BUNKER_POINTER: 'wnj:bunkerPointer'
   }
 
   let myself: HTMLDivElement
@@ -48,9 +47,6 @@
   const pool = new SimplePool()
   let bunkerInput: HTMLInputElement
   let bunkerInputValue: string
-  let nameInput: HTMLInputElement
-  let nameInputValue: string
-  let chosenProvider: BunkerProfile | undefined
   let clientSecret: Uint8Array
   const local = localStorage.getItem(lskeys.CLIENT_SECRET)
   if (local) {
@@ -61,6 +57,7 @@
   }
 
   let state: 'opened' | 'closed' | 'justopened' | 'justclosed' = 'closed'
+  let nostrLogin = false
   let bunkerPointer: BunkerPointer | null
   let resolveBunker: (_: BunkerSigner) => void
   let rejectBunker: (_: string) => void
@@ -71,6 +68,7 @@
   let showLogin: string | null = null
   let showConfirmAction: string | null = null
   let takingTooLong = false
+  let hasTriedToConnectButFailed = false
   let creating: boolean
   let awaitingCreation: boolean
   let errorMessage: string
@@ -83,17 +81,6 @@
     event: NostrEvent | null
   }
   let metadataSub: SubCloser | null
-  let providers: BunkerProfile[] = [
-    {
-      picture: 'https://nsec.app/favicon.ico',
-      name: 'Nsec.app',
-      about:
-        'Store keys safely without a browser extension! Nsec.app is a non-custodial web app that can be connected to Nostr apps and provide restricted access to your keys.',
-      nip05: '_@nsec.app',
-      website: 'https://nsec.app',
-      domain: 'nsec.app'
-    } as BunkerProfile
-  ]
 
   const connectBunkerError =
     'We could not connect to a NIP-46 bunker with that url, are you sure it is set up correctly?'
@@ -112,7 +99,6 @@
   let clickStart: number
 
   $: opened = state === 'justopened' || state === 'opened'
-
   $: movingStyle = hasMoved
     ? 'cursor-grabbing outline-dashed outline-' +
       accent +
@@ -131,7 +117,7 @@
         showAuth = url
       } else if (identity) {
         showConfirmAction = url
-        opened = true
+        state = 'opened'
       } else {
         showLogin = url
       }
@@ -176,7 +162,7 @@
   let windowNostr = {
     isWnj: true,
     async getPublicKey(): Promise<string> {
-      if (!connecting && !connected) open()
+      if (!connecting && !connected) connectOrOpen()
       return (await bunker).getPublicKey()
     },
     async signEvent(event: NostrEvent): Promise<VerifiedEvent> {
@@ -191,8 +177,7 @@
     async getRelays(): Promise<{
       [url: string]: {read: boolean; write: boolean}
     }> {
-      if (!connecting && !connected) connectOrOpen()
-      return (await bunker).getRelays()
+      return {}
     },
     nip04: {
       async encrypt(pubkey: string, plaintext: string): Promise<string> {
@@ -223,18 +208,48 @@
   }
 
   onMount(() => {
+    // Verify Nstart callback if the hash contains "nostr-login"
+    const hash = window.location.hash
+    if (hash.startsWith('#nostr-login=')) {
+      // Extract the value after "nostr-login="
+      const value = hash.substring(hash.indexOf('=') + 1)
+
+      // Reset nostr-login data
+      const urlWithoutHash = window.location.href.split('#')[0]
+      history.replaceState(null, '', urlWithoutHash)
+
+      if (value.startsWith('bunker://')) {
+        bunkerInputValue = value
+        const event = new SubmitEvent('submit', {
+          bubbles: true,
+          cancelable: true
+        })
+        nostrLogin = true
+        open()
+        handleConnect(event)
+      }
+    }
+
     if (!bunkerPointer) {
       let data = localStorage.getItem(lskeys.BUNKER_POINTER)
       if (data) {
-        bunkerPointer = JSON.parse(data)
+        bunkerPointer = JSON.parse(data) as BunkerPointer
+
+        // rebuild a bunker url from the pointer data so we can fill in the input
+        let bunkerURL = new URL(`bunker://${bunkerPointer.pubkey}`)
+        bunkerPointer.relays.forEach(relay => {
+          bunkerURL.searchParams.append('relay', relay)
+        })
+        if (bunkerPointer.secret) {
+          bunkerURL.searchParams.set('secret', bunkerPointer.secret)
+        }
+        bunkerInputValue = bunkerURL.toString()
+        // ~
+
         identify()
 
         // we must connect here so identify() works because we can't rely on the bunker params to read our pubkey
-        // however we may first check if we have it cached locally before doing the expensive connection
-        let cachedPubkey = localStorage.getItem(lskeys.CACHED_PUBKEY)
-        if (!cachedPubkey) {
-          connect()
-        }
+        connect()
       }
     }
 
@@ -300,9 +315,9 @@
   async function handleConnect(ev: SubmitEvent) {
     ev.preventDefault()
     try {
-      bunkerPointer = await parseBunkerInput(bunkerInput.value)
+      bunkerPointer = await parseBunkerInput(bunkerInputValue)
       if (!bunkerPointer) {
-        if (bunkerInput.value.match(BUNKER_REGEX)) {
+        if (bunkerInputValue.match(BUNKER_REGEX)) {
           errorMessage = connectBunkerError
         } else {
           errorMessage = connectNip05Error
@@ -318,7 +333,7 @@
       // wait until the connection has succeeded before loading user data
       identify()
     } catch (error) {
-      if (bunkerInput.value.match(BUNKER_REGEX)) {
+      if (bunkerInputValue.match(BUNKER_REGEX)) {
         errorMessage = connectBunkerError
       } else {
         errorMessage = connectNip05Error
@@ -330,83 +345,26 @@
   async function handleDisconnect(ev: MouseEvent) {
     ev.preventDefault()
     localStorage.removeItem(lskeys.BUNKER_POINTER)
-    localStorage.removeItem(lskeys.CACHED_PUBKEY)
     reset()
   }
 
-  async function handleOpenCreate(ev: MouseEvent) {
+  async function handleErasePointer(ev: MouseEvent) {
     ev.preventDefault()
-    creating = true
-
-    if (providers.length > 0 && providers[0].bunkerPointer == null) {
-      let toRemove: BunkerProfile[] = []
-      let promises: Promise<void>[] = []
-
-      for (let i = 0; i < providers.length; i++) {
-        let promise = queryBunkerProfile(providers[i].nip05).then(
-          (bp: BunkerPointer | null) => {
-            if (!bp) {
-              toRemove.push(providers[i])
-            } else {
-              providers[i].bunkerPointer = bp
-            }
-          }
-        )
-        promises.push(promise)
-      }
-
-      await Promise.all(promises)
-      for (let r = 0; r < toRemove.length; r++) {
-        let idx = providers.indexOf(toRemove[r])
-        providers.splice(idx, 1)
-      }
-
-      providers = providers
-    }
+    bunkerInputValue = ''
+    localStorage.removeItem(lskeys.BUNKER_POINTER)
+    hasTriedToConnectButFailed = false
   }
 
   function handleOpenLogin(_: MouseEvent) {
     creating = false
   }
 
-  async function handleCreate(ev: SubmitEvent) {
-    ev.preventDefault()
-    if (!chosenProvider) return
-
-    awaitingCreation = true
-    let bunker = await createAccount(
-      chosenProvider,
-      bunkerSignerParams,
-      nameInput.value,
-      chosenProvider.domain,
-      undefined,
-      clientSecret
-    )
-    awaitingCreation = false
-
-    open()
-    creating = false
-
-    bunkerPointer = bunker.bp
-    identify()
-    connect(bunker)
-  }
-
-  const checkNameInput = debounce(async () => {
-    if (chosenProvider && nameInput.value.length > 0) {
-      if (await queryProfile(nameInput.value + '@' + chosenProvider.domain)) {
-        nameInput.setCustomValidity(`'${nameInput.value}' is already taken.`)
-      } else {
-        nameInput.setCustomValidity('')
-      }
-    }
-  }, 500)
-
   function handleAbortConnection() {
     takingTooLong = false
     connecting = false
     rejectBunker('connection aborted')
     reset()
+    open()
   }
 
   async function connect(b: BunkerSigner | undefined = undefined) {
@@ -415,7 +373,7 @@
 
     let connectionTimeout = setTimeout(() => {
       takingTooLong = true
-      opened = true
+      state = 'opened'
     }, 5000)
 
     try {
@@ -434,18 +392,20 @@
       showAuth = null
       showLogin = null
       showConfirmAction = null
+      if (nostrLogin) {
+        open()
+      }
     }
   }
 
   // identify() is what gives a name and picture to our floating widget
   async function identify() {
-    let pubkey = localStorage.getItem(lskeys.CACHED_PUBKEY)
-    if (!pubkey) {
+    let pubkey: string
+    try {
       pubkey = await (await bunker).getPublicKey()
-
-      // store this pubkey here so we don't have to connect and get our pubkey immediately
-      // the next time we open this page
-      localStorage.setItem(lskeys.CACHED_PUBKEY, pubkey)
+    } catch (err) {
+      hasTriedToConnectButFailed = true
+      return
     }
 
     identity = {
@@ -534,6 +494,10 @@
       localStorage.setItem(lskeys.Y_POS, ypos.toString())
     }
   }
+
+  function handleCreateAccount() {
+    window.location.href = `https://nstart.me?an=${currentDomain}&at=web&ac=${currentProtocol}//${currentDomain}&sfb=yes`
+  }
 </script>
 
 <svelte:window
@@ -708,39 +672,17 @@
         <!-- Create account view ################### -->
       {:else if creating}
         <div class="text-center text-lg">Create a Nostr account</div>
-        <form class="mb-1 mt-4" on:submit={handleCreate}>
-          <div class="flex flex-row">
-            <!-- svelte-ignore a11y-autofocus -->
-            <input
-              class="box-border w-40 rounded px-2 py-1 text-lg text-neutral-800 outline-none"
-              placeholder="bob"
-              bind:this={nameInput}
-              bind:value={nameInputValue}
-              on:input={checkNameInput}
-              autofocus
-              autocapitalize="none"
-            />
-            <div class="mx-2 text-2xl">@</div>
-            <select
-              class="box-border w-full rounded px-2 py-1 text-lg text-neutral-800 outline-none"
-              bind:value={chosenProvider}
-            >
-              {#each providers as prov}
-                <option
-                  label={prov.domain}
-                  value={prov}
-                  class="px-2 py-1 text-lg"
-                />
-              {/each}
-            </select>
-          </div>
-          <button
-            class="mt-4 block w-full cursor-pointer rounded border-0 px-2 py-1 text-lg text-white disabled:cursor-default disabled:bg-neutral-400 disabled:text-neutral-200 bg-{accent}-900 hover:bg-{accent}-950"
-            disabled={!chosenProvider || !nameInputValue || awaitingCreation}
-          >
-            Continue »
-          </button>
-        </form>
+        <div class="mt-4 text-base leading-5">
+          To use this Nostr app you need a profile. The following button opens a
+          wizard that help you to create your keypair and safely manage it in a
+          few steps. Are you ready?
+        </div>
+        <button
+          class="mt-4 block w-full cursor-pointer rounded border-0 px-2 py-1 text-lg text-white disabled:cursor-default disabled:bg-neutral-400 disabled:text-neutral-200 bg-{accent}-900 hover:bg-{accent}-950"
+          on:click={handleCreateAccount}
+          disabled={awaitingCreation}
+          >Create an account »
+        </button>
         <div class="mt-6 text-center text-sm leading-3">
           Do you already have a Nostr address?<br />
           <button
@@ -795,11 +737,19 @@
         </form>
         {#if !connecting}
           <div class="mt-6 text-center text-sm leading-3">
-            Do you need a Nostr account?<br />
-            <button
-              class="cursor-pointer border-0 bg-transparent text-sm text-white underline"
-              on:click={handleOpenCreate}>Sign up now</button
-            >
+            {#if hasTriedToConnectButFailed}
+              Is this bunker provider broken?<br />
+              <button
+                class="cursor-pointer border-0 bg-transparent text-sm text-white underline"
+                on:click={handleErasePointer}>Clear it</button
+              >
+            {:else}
+              Do you need a Nostr account?<br />
+              <button
+                class="cursor-pointer border-0 bg-transparent text-sm text-white underline"
+                on:click={handleCreateAccount}>Sign up now</button
+              >
+            {/if}
           </div>
         {/if}