window.nostr.js 0.4.0 → 0.4.2

package/index.html

@@ -15,7 +15,7 @@
     "
   >
     <main>
-      <h1>App Title</h1>
+      <h1>Lorem Ipsum</h1>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et ex dui.
         Donec eu dui sed massa auctor rhoncus. Nunc mollis, metus nec
@@ -34,31 +34,6 @@
         mollis sit amet. Cras sit amet mi sit amet eros convallis pulvinar.
         Donec condimentum condimentum tincidunt.
       </p>
-
-      <p>
-        Suspendisse eu ipsum vel lorem congue mattis in at neque. Phasellus nec
-        felis sit amet nibh bibendum tristique a quis urna. Pellentesque laoreet
-        porta libero eget pellentesque. Praesent tempor, nisi et efficitur
-        cursus, leo nunc ullamcorper ante, quis eleifend velit justo sed enim.
-        Maecenas laoreet dictum lorem rhoncus tempus. Integer ipsum augue,
-        sagittis a facilisis et, mollis ut ipsum. Proin elementum consectetur
-        tincidunt.
-      </p>
-
-      <p>
-        Mauris nec mi et quam semper volutpat. Morbi suscipit felis lectus, in
-        ornare purus pretium in. Maecenas et ex metus. Ut aliquam, felis vel
-        mollis dapibus, tellus velit blandit dui, eu hendrerit tellus magna at
-        eros. Donec scelerisque hendrerit auctor. Aenean aliquet sapien
-        elementum dui sagittis eleifend. Donec hendrerit odio et dui lacinia
-        aliquet. Morbi auctor ultrices dui fringilla elementum. Curabitur
-        scelerisque lorem vitae placerat vulputate. Donec vestibulum urna sem,
-        at sodales ligula laoreet id. Etiam vehicula, lorem id tincidunt
-        sodales, sem odio vehicula ex, vel condimentum quam augue id augue.
-        Integer a varius nunc. Mauris rhoncus leo sed facilisis bibendum. Nullam
-        consectetur pellentesque vestibulum. Cras hendrerit feugiat orci, in
-        molestie risus rutrum ut. Proin dictum nunc at rutrum vehicula.
-      </p>
     </main>
     <!-- <script>
       window.wnjParams = {

package/justfile

@@ -4,16 +4,10 @@ set unstable
 dev:
   vite --port 13471
 
-build: wnj iframe
-
-wnj:
+build:
   vite build
   mv dist/assets/*.js dist/window.nostr.js
 
-iframe:
-  node ./iframe/build.js
-  cp ./iframe/iframe.html dist/
-
 demo:
   xdg-open demo/index.html
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "window.nostr.js",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "type": "module",
   "main": "dist/window.nostr.js",
   "devDependencies": {
@@ -23,7 +23,7 @@
     "vite": "^5.1.0"
   },
   "dependencies": {
-    "debounce": "^2.0.0",
-    "nostr-tools": "^2.8.1"
+    "debounce": "2.0.0",
+    "nostr-tools": "^2.9.1"
   }
 }

package/src/App.svelte

@@ -18,7 +18,6 @@
     type BunkerProfile,
     BUNKER_REGEX
   } from 'nostr-tools/nip46'
-  import {localStorageKeys} from './lib'
   import {NIP05_REGEX, queryProfile} from 'nostr-tools/nip05'
   import {npubEncode} from 'nostr-tools/nip19'
   import {onMount} from 'svelte'
@@ -26,36 +25,42 @@
   import Spinner from './Spinner.svelte'
 
   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',
+    IGNORE_IFRAME: 'wnj:ignoreIframe'
+  }
 
   let myself: HTMLDivElement
   export let accent: string
   export let position: 'top' | 'bottom' = 'top'
   $: origin = $mobileMode
     ? 'bottom'
-    : (localStorage.getItem(localStorageKeys.ORIGIN) as
-        | 'top'
-        | 'bottom'
-        | null) || position
+    : (localStorage.getItem(lskeys.ORIGIN) as 'top' | 'bottom' | null) ||
+      position
   export let startHidden: boolean
   export let compactMode: boolean
 
   const win = window as any
   const pool = new SimplePool()
+  let useIframe = false
+  let iframe: HTMLIFrameElement | undefined
   let bunkerInput: HTMLInputElement
   let bunkerInputValue: string
   let nameInput: HTMLInputElement
   let nameInputValue: string
   let chosenProvider: BunkerProfile | undefined
   let clientSecret: Uint8Array
-  const local = localStorage.getItem(localStorageKeys.CLIENT_SECRET)
+  const local = localStorage.getItem(lskeys.CLIENT_SECRET)
   if (local) {
     clientSecret = hexToBytes(local)
   } else {
     clientSecret = generateSecretKey()
-    localStorage.setItem(
-      localStorageKeys.CLIENT_SECRET,
-      bytesToHex(clientSecret)
-    )
+    localStorage.setItem(lskeys.CLIENT_SECRET, bytesToHex(clientSecret))
   }
 
   let state: 'opened' | 'closed' | 'justopened' | 'justclosed' = 'closed'
@@ -91,7 +96,7 @@
   export let right = 20
   $: ypos = $mobileMode
     ? BASE_YPOS
-    : parseInt(localStorage.getItem(localStorageKeys.Y_POS) || '0') || BASE_YPOS
+    : parseInt(localStorage.getItem(lskeys.Y_POS) || '0') || BASE_YPOS
   let dragStarted = false
   let hasMoved = false
   let insidePosition: number
@@ -163,9 +168,8 @@
   let windowNostr = {
     isWnj: true,
     async getPublicKey(): Promise<string> {
-      if (bunkerPointer) return bunkerPointer.pubkey
       if (!connecting && !connected) open()
-      return (await bunker).bp.pubkey
+      return (await bunker).getPublicKey()
     },
     async signEvent(event: NostrEvent): Promise<VerifiedEvent> {
       try {
@@ -212,12 +216,22 @@
 
   onMount(() => {
     if (!bunkerPointer) {
-      let data = localStorage.getItem(localStorageKeys.BUNKER_POINTER)
+      let data = localStorage.getItem(lskeys.BUNKER_POINTER)
       if (data) {
         bunkerPointer = JSON.parse(data)
-        // we have a pointer, which means we can get the public key right away
-        // but we will only try to connect when any other method is called on window.nostr
         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()
+        }
+      } else {
+        // when we don't have any bunker data stored, we can still check the iframe for it
+        if (!localStorage.getItem(lskeys.IGNORE_IFRAME)) {
+          useIframe = true
+        }
       }
     }
 
@@ -250,6 +264,21 @@
     }
   })
 
+  function onIframeLoaded() {
+    window.addEventListener('message', handleMessage)
+    iframe?.contentWindow?.postMessage({getbunker: true}, '*')
+
+    async function handleMessage(ev: MessageEvent) {
+      let {bunker} = ev.data
+      if (bunker) {
+        bunkerPointer = await parseBunkerInput(bunker)
+        identify()
+        connect()
+        window.removeEventListener('message', handleMessage)
+      }
+    }
+  }
+
   function handleClick(ev: MouseEvent) {
     if (Math.abs(ypos - yposStart) > 6 || Date.now() - clickStart > 600) {
       return
@@ -312,7 +341,9 @@
 
   async function handleDisconnect(ev: MouseEvent) {
     ev.preventDefault()
-    localStorage.removeItem(localStorageKeys.BUNKER_POINTER)
+    localStorage.removeItem(lskeys.BUNKER_POINTER)
+    localStorage.removeItem(lskeys.CACHED_PUBKEY)
+    localStorage.setItem(lskeys.IGNORE_IFRAME, '')
     reset()
   }
 
@@ -385,10 +416,7 @@
     try {
       await b.connect()
       connected = true
-      localStorage.setItem(
-        localStorageKeys.BUNKER_POINTER,
-        JSON.stringify(bunkerPointer)
-      )
+      localStorage.setItem(lskeys.BUNKER_POINTER, JSON.stringify(bunkerPointer))
       close()
       resolveBunker(b)
     } catch (err: any) {
@@ -404,8 +432,16 @@
     }
   }
 
-  function identify(onFirstMetadata: (() => void) | null = null) {
-    let pubkey = bunkerPointer!.pubkey
+  // identify() is what gives a name and picture to our floating widget
+  async function identify() {
+    let pubkey = localStorage.getItem(lskeys.CACHED_PUBKEY)
+    if (!pubkey) {
+      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)
+    }
 
     identity = {
       pubkey: pubkey,
@@ -428,8 +464,6 @@
             identity!.event = evt
             identity!.name = name
             identity!.picture = picture
-            onFirstMetadata?.()
-            onFirstMetadata = null
           } catch (err) {
             /***/
           }
@@ -491,8 +525,8 @@
         ypos = BASE_YPOS
       }
 
-      localStorage.setItem(localStorageKeys.ORIGIN, origin)
-      localStorage.setItem(localStorageKeys.Y_POS, ypos.toString())
+      localStorage.setItem(lskeys.ORIGIN, origin)
+      localStorage.setItem(lskeys.Y_POS, ypos.toString())
     }
   }
 </script>
@@ -806,3 +840,11 @@
     </div>
   {/if}
 </div>
+{#if useIframe}
+  <iframe
+    title="~"
+    bind:this={iframe}
+    on:load={onIframeLoaded}
+    src="https://join.the-nostr.org/iframe.html"
+  ></iframe>
+{/if}

package/dist/iframe.html

@@ -1 +0,0 @@
-<script src="iframe.js"></script>