window.nostr.js 0.3.0 → 0.4.1

package/iframe/build.js

@@ -0,0 +1,9 @@
+import {build} from 'esbuild'
+
+build({
+  entryPoints: ['iframe/iframe.ts'],
+  bundle: true,
+  sourcemap: 'external',
+  outfile: 'dist/iframe.js',
+  format: 'iife'
+}).then(() => console.log('iframe built'))

package/iframe/iframe.ts

@@ -0,0 +1,28 @@
+const SHARED_BUNKER_KEY = 'wnj:root:sharedBunker'
+
+window.onmessage = async (ev: MessageEvent) => {
+  const {bunker, getbunker} = ev.data
+
+  // set the bunker URL
+  if (bunker) {
+    // we only accept these websites to be setting the bunker URL
+    if (
+      !ev.origin.startsWith('https://join.the-nostr.org') &&
+      !ev.origin.startsWith('http://localhost:6711')
+    ) {
+      return
+    }
+
+    if (bunker) {
+      localStorage.setItem(SHARED_BUNKER_KEY, bunker)
+    } else {
+      console.error('wnj iframe got an invalid bunker url:', bunker)
+    }
+  }
+
+  if (getbunker) {
+    // any website can get the bunker URL if it is set
+    const bunker = localStorage.getItem(SHARED_BUNKER_KEY)
+    window.parent.postMessage({bunker}, '*') // we reply even if it's undefined so they know
+  }
+}

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

@@ -1,12 +1,18 @@
 export PATH := "./node_modules/.bin:" + env_var('PATH')
+set unstable
 
 dev:
-  vite
+  vite --port 13471
 
-build:
+build: wnj iframe
+
+wnj:
   vite build
   mv dist/assets/*.js dist/window.nostr.js
 
+iframe:
+  node ./iframe/build.js
+
 demo:
   xdg-open demo/index.html
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "window.nostr.js",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "type": "module",
   "main": "dist/window.nostr.js",
   "devDependencies": {
@@ -8,6 +8,7 @@
     "@tsconfig/svelte": "^5.0.2",
     "@typescript-eslint/eslint-plugin": "^7.0.1",
     "autoprefixer": "^10.4.17",
+    "esbuild": "^0.24.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.35.1",
     "postcss": "^8.4.35",
@@ -22,7 +23,7 @@
     "vite": "^5.1.0"
   },
   "dependencies": {
-    "debounce": "^2.0.0",
-    "nostr-tools": "2.5.2"
+    "debounce": "2.0.0",
+    "nostr-tools": "^2.9.1"
   }
 }

package/src/App.svelte

@@ -25,12 +25,14 @@
   import Spinner from './Spinner.svelte'
 
   const mobileMode = mediaQueryStore('only screen and (max-width: 640px)')
-  const localStorageKeys = {
+  const lskeys = {
     ORIGIN: 'wnj:origin',
     CLIENT_SECRET: 'wnj:clientSecret',
     Y_POS: 'wnj:ypos',
     CALLBACK_TOKEN: 'wnj:callbackToken',
-    BUNKER_POINTER: 'wnj:bunkerPointer'
+    BUNKER_POINTER: 'wnj:bunkerPointer',
+    CACHED_PUBKEY: 'wnj:cachedPubKey',
+    IGNORE_IFRAME: 'wnj:ignoreIframe'
   }
 
   let myself: HTMLDivElement
@@ -38,30 +40,27 @@
   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'
@@ -97,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
@@ -122,7 +121,7 @@
     onauth(url: string) {
       if (creating) {
         showAuth = url
-      } else if(identity) {
+      } else if (identity) {
         showConfirmAction = url
         opened = true
       } else {
@@ -169,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 {
@@ -218,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
+        }
       }
     }
 
@@ -256,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
@@ -318,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()
   }
 
@@ -391,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) {
@@ -410,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,
@@ -434,8 +464,6 @@
             identity!.event = evt
             identity!.name = name
             identity!.picture = picture
-            onFirstMetadata?.()
-            onFirstMetadata = null
           } catch (err) {
             /***/
           }
@@ -497,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>
@@ -532,18 +560,18 @@
     >
       <!-- Connecting view ################### -->
       {#if connecting}
-        <div class="flex px-2 items-center">
+        <div class="flex items-center px-2">
           Connecting to bunker
           <Spinner />
         </div>
-      {:else if !identity && !compactMode}
-        <div class="flex px-2 items-center">
-          Connect with Nostr
-        </div>
-      {:else if !identity && compactMode}
-        <div class="w-6 text-center">N</div>
+      {:else if !identity}
+        {#if compactMode}
+          <div class="w-6 text-center">N</div>
+        {:else}
+          <div class="flex items-center px-2">Connect with Nostr</div>
+        {/if}
       {:else if !compactMode}
-        <div class="flex px-2 items-center">
+        <div class="flex items-center px-2">
           {#if identity.picture}
             <img
               src={identity.picture}
@@ -551,19 +579,17 @@
               class="mr-2 h-5 w-5 rounded-full"
             />
           {:else}
-            ☉
+            <span class="mr-2">☉</span>
           {/if}
-          <div class="max-w-56 overflow-hidden whitespace-nowrap overflow-ellipsis inline-block">
+          <div
+            class="inline-block max-w-56 overflow-hidden overflow-ellipsis whitespace-nowrap"
+          >
             {identity.name ||
               identity.npub.slice(0, 7) + '…' + identity.npub.slice(-4)}
           </div>
         </div>
       {:else}
-        <img
-          src={identity.picture}
-          alt=""
-          class="h-6 w-6 rounded-full"
-        />
+        <img src={identity.picture} alt="" class="h-6 w-6 rounded-full" />
       {/if}
     </div>
 
@@ -590,40 +616,57 @@
         <div class="m-auto w-full">
           <div class="text-center text-lg">Create a Nostr account</div>
           <div class="mt-4 text-center text-sm leading-4">
-            Now you a new window will bring you to <strong>{new URL(showAuth).host}</strong> where the account creation will take place. If nothing happens check that if your browser is blocking popups, pleaase.<br/>
+            Now you a new window will bring you to <strong
+              >{new URL(showAuth).host}</strong
+            >
+            where the account creation will take place. If nothing happens check
+            that if your browser is blocking popups, pleaase.<br />
             After that you will be returned to this page.
           </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={() => openAuthURLPopup(showAuth)}>
+            on:click={() => openAuthURLPopup(showAuth)}
+          >
             Start account creation »
           </button>
         </div>
-
       {:else if showLogin}
         <div class="m-auto w-full">
           <div class="text-center text-lg">Login into a Nostr account</div>
           <div class="mt-4 text-center text-sm leading-4">
-            Now you a new window will bring you to <strong>{new URL(showLogin).host}</strong> where you can login and approve the permissions. If nothing happens check that if your browser is blocking popups, pleaase.<br/>
+            Now you a new window will bring you to <strong
+              >{new URL(showLogin).host}</strong
+            >
+            where you can login and approve the permissions. If nothing happens check
+            that if your browser is blocking popups, pleaase.<br />
             After that you will be returned to this page.
           </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={() => openAuthURLPopup(showLogin)}>
+            on:click={() => openAuthURLPopup(showLogin)}
+          >
             Login now »
           </button>
         </div>
-
-        {:else if showConfirmAction}
+      {:else if showConfirmAction}
         <div class="m-auto w-full">
-          <div class="text-center text-lg">An action requires your confirmation</div>
+          <div class="text-center text-lg">
+            An action requires your confirmation
+          </div>
           <div class="mt-4 text-center text-sm leading-4">
-            Now you a new window will bring you to <strong>{new URL(showConfirmAction).host}</strong> where you can approve the current action. If nothing happens check that if your browser is blocking popups, pleaase.<br/>
+            Now you a new window will bring you to <strong
+              >{new URL(showConfirmAction).host}</strong
+            >
+            where you can approve the current action. If nothing happens check that
+            if your browser is blocking popups, pleaase.<br />
             After that you will be returned to this page.
           </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={() => {openAuthURLPopup(showConfirmAction)}}>
+            on:click={() => {
+              openAuthURLPopup(showConfirmAction)
+            }}
+          >
             Confirm action »
           </button>
         </div>
@@ -797,3 +840,11 @@
     </div>
   {/if}
 </div>
+{#if useIframe}
+  <iframe
+    title="~"
+    bind:this={iframe}
+    on:load={onIframeLoaded}
+    src="https://the-nostr.org/iframe.html"
+  ></iframe>
+{/if}

package/src/main.ts

@@ -37,24 +37,24 @@ const app = new App({
   props: {
     accent: win.wnjParams?.accent || 'cyan',
     position: win.wnjParams?.position === 'bottom' ? 'bottom' : 'top',
-    startHidden: win.wnjParams?.startHidden ? true : false,
-    compactMode: win.wnjParams?.compactMode ? true : false,
+    startHidden: win.wnjParams?.startHidden,
+    compactMode: win.wnjParams?.compactMode
   }
 })
 
-if (!win.wnjParams?.disableOverflowFix){
+if (!win.wnjParams?.disableOverflowFix) {
   // Inject on the host page a style to avoid weird scrolling on the
   // right/bottom on mobile, if the underlying page has some horizontal
   // scrolling
-  var styleElement = document.createElement('style');
-  var cssCode = `
+  const styleElement = document.createElement('style')
+  const cssCode = `
     html, body {
       overflow: auto;
       height: 100%;
     }
-  `;
-  styleElement.innerHTML = cssCode;
-  document.head.appendChild(styleElement);
+  `
+  styleElement.innerHTML = cssCode
+  document.head.appendChild(styleElement)
 }
 
 export default app

package/src/mediaQueryStore.ts

@@ -0,0 +1,25 @@
+import {writable} from 'svelte/store'
+
+export default (mediaQueryString: string) => {
+  const {subscribe, set} = writable<boolean>(undefined, () => {
+    // start observing media query
+    const mql = window.matchMedia(mediaQueryString)
+
+    // set first media query result to the store
+    set(mql.matches)
+
+    // called when media query state changes
+    const onchange = () => set(mql.matches)
+
+    // listen for changes (need to support old `addListener` interface)
+    mql.addEventListener('change', onchange)
+
+    // when no more listeners
+    return () => {
+      // stop listening (need to support old `removeListener` interface)
+      mql.removeEventListener('change', onchange)
+    }
+  })
+
+  return {subscribe}
+}

package/tsconfig.json

@@ -13,8 +13,9 @@
      */
     "allowJs": true,
     "checkJs": true,
-    "isolatedModules": true
+    "isolatedModules": true,
+    "moduleDetection": "force"
   },
-  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte", "iframe/*.ts"],
+  "references": [{"path": "./tsconfig.node.json"}]
 }

package/src/mediaQueryStore.js

@@ -1,33 +0,0 @@
-import {writable} from 'svelte/store'
-
-/**
- * Svelte Media Query Store
- * @param mediaQueryString { string }
- */
-export default mediaQueryString => {
-  const {subscribe, set} = writable(undefined, () => {
-    // Start observing media query
-    let mql = window.matchMedia(mediaQueryString)
-
-    // Set first media query result to the store
-    set(mql.matches)
-
-    // Called when media query state changes
-    const onchange = () => set(mql.matches)
-
-    // Listen for changes (need to support old `addListener` interface)
-    'addEventListener' in mql
-      ? mql.addEventListener('change', onchange)
-      : mql.addListener(onchange)
-
-    // when no more listeners
-    return () => {
-      // stop listening (need to support old `removeListener` interface)
-      'removeEventListener' in mql
-        ? mql.removeEventListener('change', onchange)
-        : mql.removeListener(onchange)
-    }
-  })
-
-  return {subscribe}
-}