window.nostr.js 0.2.2 → 0.4.0

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.html

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

package/iframe/iframe.ts

@@ -0,0 +1,21 @@
+import {parseBunkerInput} from 'nostr-tools/nip46'
+import {localStorageKeys} from '../src/lib'
+
+window.onmessage = async (ev: MessageEvent) => {
+  if (
+    !ev.origin.startsWith('https://join.the-nostr.org') &&
+    !ev.origin.startsWith('http://localhost:6711')
+  ) {
+    return
+  }
+
+  const {bunker} = ev.data
+  if (bunker) {
+    const bp = await parseBunkerInput(bunker)
+    if (bp) {
+      localStorage.setItem(localStorageKeys.BUNKER_POINTER, JSON.stringify(bp))
+    } else {
+      console.error('wnj iframe got an invalid bunker url:', bunker)
+    }
+  }
+}

package/justfile

@@ -1,12 +1,19 @@
 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
+  cp ./iframe/iframe.html dist/
+
 demo:
   xdg-open demo/index.html
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "window.nostr.js",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "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",
@@ -23,6 +24,6 @@
   },
   "dependencies": {
     "debounce": "^2.0.0",
-    "nostr-tools": "2.5.2"
+    "nostr-tools": "^2.8.1"
   }
 }

package/src/App.svelte

@@ -18,6 +18,7 @@
     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'
@@ -25,13 +26,6 @@
   import Spinner from './Spinner.svelte'
 
   const mobileMode = mediaQueryStore('only screen and (max-width: 640px)')
-  const localStorageKeys = {
-    ORIGIN: 'wnj:origin',
-    CLIENT_SECRET: 'wnj:clientSecret',
-    Y_POS: 'wnj:ypos',
-    CALLBACK_TOKEN: 'wnj:callbackToken',
-    BUNKER_POINTER: 'wnj:bunkerPointer'
-  }
 
   let myself: HTMLDivElement
   export let accent: string
@@ -42,6 +36,8 @@
         | 'top'
         | 'bottom'
         | null) || position
+  export let startHidden: boolean
+  export let compactMode: boolean
 
   const win = window as any
   const pool = new SimplePool()
@@ -120,7 +116,7 @@
     onauth(url: string) {
       if (creating) {
         showAuth = url
-      } else if(identity) {
+      } else if (identity) {
         showConfirmAction = url
         opened = true
       } else {
@@ -522,20 +518,26 @@
   bind:this={myself}
 >
   <!-- Close status ################### -->
-  {#if !opened}
+  {#if !opened && !identity && startHidden}
+    <!-- Show nothing  -->
+  {:else if !opened}
     <div
-      class="rounded px-4 py-2 shadow-[0_0px_10px_0px_rgba(0,0,0,0.3)] transition-all duration-200 bg-{accent}-700 hover:bg-{accent}-800 {movingStyle}"
+      class="rounded px-2 py-2 shadow-[0_0px_10px_0px_rgba(0,0,0,0.3)] transition-all duration-200 bg-{accent}-700 hover:bg-{accent}-800 {movingStyle}"
     >
       <!-- Connecting view ################### -->
       {#if connecting}
-        <div class="flex items-center">
+        <div class="flex items-center px-2">
           Connecting to bunker
           <Spinner />
         </div>
       {:else if !identity}
-        Connect with Nostr
-      {:else}
-        <div class="flex items-center">
+        {#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 items-center px-2">
           {#if identity.picture}
             <img
               src={identity.picture}
@@ -543,13 +545,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" />
       {/if}
     </div>
 
@@ -576,40 +582,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>

package/src/lib.ts

@@ -0,0 +1,7 @@
+export const localStorageKeys = {
+  ORIGIN: 'wnj:origin',
+  CLIENT_SECRET: 'wnj:clientSecret',
+  Y_POS: 'wnj:ypos',
+  CALLBACK_TOKEN: 'wnj:callbackToken',
+  BUNKER_POINTER: 'wnj:bunkerPointer'
+}

package/src/main.ts

@@ -36,23 +36,25 @@ const app = new App({
   target: mountPoint,
   props: {
     accent: win.wnjParams?.accent || 'cyan',
-    position: win.wnjParams?.position === 'bottom' ? 'bottom' : 'top'
+    position: win.wnjParams?.position === 'bottom' ? 'bottom' : 'top',
+    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}
-}