window.nostr.js 0.1.3 → 0.2.0

package/src/App.svelte

@@ -25,14 +25,23 @@
   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
   export let position: 'top' | 'bottom' = 'top'
   $: origin = $mobileMode
     ? 'bottom'
-    : (localStorage.getItem('wnj:origin') as 'top' | 'bottom' | null) ||
-      position
+    : (localStorage.getItem(localStorageKeys.ORIGIN) as
+        | 'top'
+        | 'bottom'
+        | null) || position
 
   const win = window as any
   const pool = new SimplePool()
@@ -42,23 +51,32 @@
   let nameInputValue: string
   let chosenProvider: BunkerProfile | undefined
   let clientSecret: Uint8Array
-  const local = localStorage.getItem('wnj:clientSecret')
+  const local = localStorage.getItem(localStorageKeys.CLIENT_SECRET)
   if (local) {
     clientSecret = hexToBytes(local)
   } else {
     clientSecret = generateSecretKey()
-    localStorage.setItem('wnj:clientSecret', bytesToHex(clientSecret))
+    localStorage.setItem(
+      localStorageKeys.CLIENT_SECRET,
+      bytesToHex(clientSecret)
+    )
   }
 
   let state: 'opened' | 'closed' | 'justopened' | 'justclosed' = 'closed'
   let bunkerPointer: BunkerPointer | null
   let resolveBunker: (_: BunkerSigner) => void
+  let rejectBunker: (_: string) => void
   let bunker: Promise<BunkerSigner>
   let connecting: boolean
-  let longConnecting = false
-  let cancelConnection = false
+  let connected: boolean
+  let showAuth: string | null = null
+  let showLogin: string | null = null
+  let takingTooLong = false
   let creating: boolean
-  let connected: null | {
+  let awaitingCreation: boolean
+  let errorMessage: string
+  let showInfo = false
+  let identity: null | {
     pubkey: string
     npub: string
     name?: string
@@ -67,12 +85,16 @@
   }
   let metadataSub: SubCloser | null
   let providers: BunkerProfile[] = []
+  const connectBunkerError =
+    'We could not connect to a NIP-46 bunker with that url, are you sure it is set up correctly?'
+  const connectNip05Error =
+    'We were not able to connect using this address. For it to work it has to come from a NIP-46 provider.'
 
   const BASE_YPOS = 20
   export let right = 20
   $: ypos = $mobileMode
     ? BASE_YPOS
-    : parseInt(localStorage.getItem('wnj:ypos') || '0') || BASE_YPOS
+    : parseInt(localStorage.getItem(localStorageKeys.Y_POS) || '0') || BASE_YPOS
   let dragStarted = false
   let hasMoved = false
   let insidePosition: number
@@ -82,10 +104,10 @@
   $: opened = state === 'justopened' || state === 'opened'
 
   $: movingStyle = hasMoved
-    ? 'tw-cursor-grabbing tw-outline-dashed tw-outline-' +
+    ? 'cursor-grabbing outline-dashed outline-' +
       accent +
-      '-500 tw-outline-1 tw-outline-offset-4'
-    : 'tw-outline-none'
+      '-500 outline-1 outline-offset-4'
+    : 'outline-none'
 
   $: bunkerInputValueIsGood =
     bunkerInputValue &&
@@ -95,10 +117,18 @@
   const bunkerSignerParams: BunkerSignerParams = {
     pool,
     onauth(url: string) {
-      window.open(url, 'window.nostr', `width=600,height=800,popup=yes`)
+      if (creating) {
+        showAuth = url
+      } else {
+        showLogin = url
+      }
     }
   }
 
+  function openAuthURLPopup(url: string | null): Window | null {
+    return window.open(url!, 'window.nostr', `width=600,height=800,popup=yes`)
+  }
+
   const delayedUpdateState = debounce(() => {
     switch (state) {
       case 'justopened':
@@ -120,31 +150,40 @@
     delayedUpdateState()
   }
 
+  function connectOrOpen() {
+    if (bunkerPointer && !connected) {
+      connect()
+      return
+    }
+    open()
+  }
+
   reset()
 
   let windowNostr = {
     isWnj: true,
     async getPublicKey(): Promise<string> {
+      if (bunkerPointer) return bunkerPointer.pubkey
       if (!connecting && !connected) open()
       return (await bunker).bp.pubkey
     },
     async signEvent(event: NostrEvent): Promise<VerifiedEvent> {
-      if (!connecting && !connected) open()
+      if (!connecting && !connected) connectOrOpen()
       return (await bunker).signEvent(event)
     },
     async getRelays(): Promise<{
       [url: string]: {read: boolean; write: boolean}
     }> {
-      if (!connecting && !connected) open()
+      if (!connecting && !connected) connectOrOpen()
       return (await bunker).getRelays()
     },
     nip04: {
       async encrypt(pubkey: string, plaintext: string): Promise<string> {
-        if (!connecting && !connected) open()
+        if (!connecting && !connected) connectOrOpen()
         return (await bunker).nip04Encrypt(pubkey, plaintext)
       },
       async decrypt(pubkey: string, ciphertext: string): Promise<string> {
-        if (!connecting && !connected) open()
+        if (!connecting && !connected) connectOrOpen()
         return (await bunker).nip04Decrypt(pubkey, ciphertext)
       }
     }
@@ -153,22 +192,28 @@
   function reset() {
     close()
     bunkerPointer = null
-    bunker = new Promise(resolve => {
+    bunker = new Promise((resolve, reject) => {
       resolveBunker = resolve
+      rejectBunker = reject
     })
+    identity = null
     connecting = false
+    takingTooLong = false
     creating = false
-    connected = null
+    connected = false
     metadataSub = null
+    errorMessage = ''
   }
 
   onMount(() => {
-    let data = localStorage.getItem('wnj:bunkerPointer')
-    if (data) {
-      bunkerPointer = JSON.parse(data)
-      connect(
-        new BunkerSigner(clientSecret, bunkerPointer!, bunkerSignerParams)
-      )
+    if (!bunkerPointer) {
+      let data = localStorage.getItem(localStorageKeys.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()
+      }
     }
 
     if (win.nostr && !win.nostr.isWnj) {
@@ -214,27 +259,54 @@
   function handleCloseModal(ev: MouseEvent) {
     close()
     creating = false
+    showAuth = null
+    showLogin = null
+    ev.stopPropagation()
+  }
+
+  function handleShowInfo(ev: MouseEvent) {
+    showInfo = true
+    ev.stopPropagation()
+  }
+
+  function handleCloseInfo(ev: MouseEvent) {
+    showInfo = false
     ev.stopPropagation()
   }
 
   async function handleConnect(ev: SubmitEvent) {
     ev.preventDefault()
-    bunkerPointer = await parseBunkerInput(bunkerInput.value)
-    if (!bunkerPointer) {
-      bunkerInput.setCustomValidity(
-        'invalid NIP-05 "name@domain.com" address or bunker:// URI'
-      )
-      return
-    }
+    try {
+      bunkerPointer = await parseBunkerInput(bunkerInput.value)
+      if (!bunkerPointer) {
+        if (bunkerInput.value.match(BUNKER_REGEX)) {
+          errorMessage = connectBunkerError
+        } else {
+          errorMessage = connectNip05Error
+        }
+        return
+      }
 
-    bunkerInput.setCustomValidity('')
-    connect(new BunkerSigner(clientSecret, bunkerPointer!, bunkerSignerParams))
+      bunkerInput.setCustomValidity('')
+      errorMessage = ''
+      await connect()
+
+      // since we are connecting right now after the user has typed stuff
+      // wait until the connection has succeeded before loading user data
+      identify()
+    } catch (error) {
+      if (bunkerInput.value.match(BUNKER_REGEX)) {
+        errorMessage = connectBunkerError
+      } else {
+        errorMessage = connectNip05Error
+      }
+      connecting = false
+    }
   }
 
   async function handleDisconnect(ev: MouseEvent) {
     ev.preventDefault()
-    localStorage.removeItem('wnj:bunkerPointer')
-    if (win.isWnj) delete win.nostr
+    localStorage.removeItem(localStorageKeys.BUNKER_POINTER)
     reset()
   }
 
@@ -259,16 +331,20 @@
     ev.preventDefault()
     if (!chosenProvider) return
 
+    awaitingCreation = true
     let bunker = await createAccount(
       chosenProvider,
       bunkerSignerParams,
       nameInput.value,
       chosenProvider.domain
     )
+    awaitingCreation = false
 
     open()
     creating = false
 
+    bunkerPointer = bunker.bp
+    identify()
     connect(bunker)
   }
 
@@ -283,64 +359,74 @@
   }, 500)
 
   function handleAbortConnection() {
-    longConnecting = false
+    takingTooLong = false
     connecting = false
-    cancelConnection = true
-    // TODO: Effectively abort the connection
+    rejectBunker('connection aborted')
+    reset()
   }
 
-  async function connect(bunker: BunkerSigner) {
-    let connectionTimeout: number
+  async function connect(b: BunkerSigner | undefined = undefined) {
+    b = b || new BunkerSigner(clientSecret, bunkerPointer!, bunkerSignerParams)
+    connecting = true
 
-    function allowCancel() {
-      longConnecting = true
+    let connectionTimeout = setTimeout(() => {
+      takingTooLong = true
       opened = true
+    }, 5000)
+
+    try {
+      await b.connect()
+      connected = true
+      localStorage.setItem(
+        localStorageKeys.BUNKER_POINTER,
+        JSON.stringify(bunkerPointer)
+      )
+      close()
+      resolveBunker(b)
+    } catch (err: any) {
+      rejectBunker(err?.message || String(err))
+    } finally {
+      // this still gets executed even if we return above
       clearTimeout(connectionTimeout)
+      connecting = false
+      takingTooLong = false
+      showAuth = null
+      showLogin = null
     }
+  }
 
-    connecting = true
-    connectionTimeout = setTimeout(allowCancel, 5000)
-
-    await bunker.connect()
-
-    clearTimeout(connectionTimeout)
-    bunkerPointer = bunker.bp
+  function identify(onFirstMetadata: (() => void) | null = null) {
+    let pubkey = bunkerPointer!.pubkey
 
-    // set this so the floating thing will update
-    connected = {
-      pubkey: bunker.bp.pubkey,
-      npub: npubEncode(bunker.bp.pubkey),
+    identity = {
+      pubkey: pubkey,
+      npub: npubEncode(pubkey),
       event: null
     }
 
-    localStorage.setItem('wnj:bunkerPointer', JSON.stringify(bunkerPointer))
-
-    // load metadata
     metadataSub = pool.subscribeMany(
       [
         'wss://purplepag.es',
         'wss://relay.snort.social',
         'wss://relay.nos.social'
       ],
-      [{kinds: [0], authors: [bunker.bp.pubkey]}],
+      [{kinds: [0], authors: [pubkey]}],
       {
         onevent(evt) {
-          if ((connected!.event?.created_at || 0) >= evt.created_at) return
+          if ((identity!.event?.created_at || 0) >= evt.created_at) return
           try {
             let {name, picture} = JSON.parse(evt.content)
-            connected!.event = evt
-            connected!.name = name
-            connected!.picture = picture
+            identity!.event = evt
+            identity!.name = name
+            identity!.picture = picture
+            onFirstMetadata?.()
+            onFirstMetadata = null
           } catch (err) {
             /***/
           }
         }
       }
     )
-    connecting = false
-    longConnecting = false
-    close()
-    resolveBunker(bunker)
   }
 
   function handleMouseDown(ev: MouseEvent) {
@@ -396,8 +482,8 @@
         ypos = BASE_YPOS
       }
 
-      localStorage.setItem('wnj:origin', origin)
-      localStorage.setItem('wnj:ypos', ypos.toString())
+      localStorage.setItem(localStorageKeys.ORIGIN, origin)
+      localStorage.setItem(localStorageKeys.Y_POS, ypos.toString())
     }
   }
 </script>
@@ -410,8 +496,8 @@
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class="tw-text-white tw-font-sans draggable tw-animate-fadein"
-  class:tw-cursor-pointer={!connected && !opened}
+  class="draggable animate-fadein font-sans text-white"
+  class:cursor-pointer={!identity && !opened}
   style="position: fixed; {opened && $mobileMode
     ? 'width: 100%;'
     : ''}; right: {opened && $mobileMode
@@ -425,29 +511,29 @@
   <!-- Close status ################### -->
   {#if !opened}
     <div
-      class="tw-px-4 tw-py-2 tw-bg-{accent}-700 hover:tw-bg-{accent}-800 tw-rounded tw-shadow-[0_0px_10px_0px_rgba(0,0,0,0.3)] tw-transition-all tw-duration-200 {movingStyle}"
+      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}"
     >
       <!-- Connecting view ################### -->
       {#if connecting}
-        <div class="tw-flex tw-items-center">
+        <div class="flex items-center">
           Connecting to bunker
           <Spinner />
         </div>
-      {:else if !connected}
+      {:else if !identity}
         Connect with Nostr
       {:else}
-        <div class="tw-flex tw-items-center">
-          {#if connected.picture}
+        <div class="flex items-center">
+          {#if identity.picture}
             <img
-              src={connected.picture}
+              src={identity.picture}
               alt=""
-              class="tw-w-5 tw-h-5 tw-rounded-full tw-mr-2"
+              class="mr-2 h-5 w-5 rounded-full"
             />
           {:else}
             ☉
           {/if}
-          {connected.name ||
-            connected.npub.slice(0, 7) + '…' + connected.npub.slice(-4)}
+          {identity.name ||
+            identity.npub.slice(0, 7) + '…' + identity.npub.slice(-4)}
         </div>
       {/if}
     </div>
@@ -455,77 +541,148 @@
     <!-- Open status ################### -->
   {:else}
     <div
-      class="sm:tw-w-80 tw-px-6 tw-py-8 tw-bg-{accent}-700 tw-rounded-md tw-shadow-[0_0px_30px_0px_rgba(0,0,0,0.6)] tw-transition-all tw-animate-show {movingStyle}"
+      class="animate-show rounded-md bg-gradient-to-b px-8 py-8 shadow-[0_0px_30px_0px_rgba(0,0,0,0.6)] transition-all sm:w-96 from-{accent}-900 to-{accent}-700 {movingStyle}"
     >
       <button
-        on:click={handleCloseModal}
-        class="tw-absolute tw-top-0 tw-right-0.5 tw-bg-transparent tw-border-none tw-cursor-pointer tw-text-{accent}-950 tw-text-3xl"
+        on:click={showInfo ? handleCloseInfo : handleCloseModal}
+        class="absolute right-2 top-0 cursor-pointer bg-transparent text-3xl text-{accent}-600"
         >⤫</button
       >
-      <!-- Create account view ################### -->
-      {#if creating}
-        <div class="tw-text-lg tw-text-center">Create a Nostr account</div>
-        <form class="tw-mt-4 tw-mb-1" on:submit={handleCreate}>
-          <div class="tw-flex items-center">
+
+      {#if !showInfo && !showAuth && !showLogin}
+        <button
+          on:click={handleShowInfo}
+          class="absolute bottom-1 right-3 cursor-pointer bg-transparent text-xl text-{accent}-600"
+          >?</button
+        >
+      {/if}
+
+      {#if showAuth}
+        <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/>
+            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)}>
+            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/>
+            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)}>
+            Login now »
+          </button>
+        </div>
+
+        <!-- Show info ################### -->
+      {:else if showInfo}
+        <div class="text-center text-lg">What is that?</div>
+        <div class="text-base leading-5">
+          <p class="mb mt-4">
+            This widget is created with <i>window.nostr.js</i>, a small script
+            you can drop in any page that already uses NIP-07 and make it also
+            work with NIP-46 automatically when the user doesn't have an
+            extension installed.
+            <br />
+            It adds a small floating button on the side of the window that users
+            can use to create Nostr accuonts or connect to their NIP-46 bunkers.
+          </p>
+          <p class="mt-4">
+            This tool is opensource, get the code from the <a
+              target="_blank"
+              class="underline"
+              href="https://github.com/fiatjaf/window.nostr.js"
+              >project's page</a
+            >.
+          </p>
+          <p class="mt-4">
+            You don't know what Nostr is?
+            <a target="_blank" class="underline" href="https://www.nostr.com"
+              >Learn more</a
+            >.
+          </p>
+        </div>
+
+        <!-- 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="tw-box-border tw-w-40 tw-px-2 tw-py-1 tw-rounded tw-text-lg tw-border-none tw-outline-none"
+              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="tw-mx-2 tw-text-2xl">@</div>
+            <div class="mx-2 text-2xl">@</div>
             <select
-              class="tw-w-full tw-box-border tw-px-2 tw-py-1 tw-rounded tw-text-lg tw-border-none tw-outline-none"
+              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="tw-px-2 tw-py-1 tw-text-lg"
+                  class="px-2 py-1 text-lg"
                 />
               {/each}
             </select>
           </div>
-          <div class="tw-text-sm tw-text-center tw-mt-4 tw-leading-4">
-            A window from the selected provider will pop up to finalize the
-            creation; if it doesn't display check if the browser is blocking it
-          </div>
           <button
-            class="tw-block tw-w-full tw-mt-4 tw-px-2 tw-py-1 tw-text-lg tw-rounded tw-border-0 tw-bg-{accent}-900 hover:tw-bg-{accent}-950 tw-hover:bg-indigo-900 tw-cursor-pointer tw-text-white disabled:tw-bg-neutral-400 disabled:tw-text-neutral-200 disabled:tw-cursor-default"
-            disabled={!chosenProvider || !nameInputValue}
+            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}
           >
-            Create »
+            Continue »
           </button>
         </form>
-        <div class="tw-mt-6 tw-text-center tw-text-sm tw-leading-3">
+        <div class="mt-6 text-center text-sm leading-3">
           Do you already have a Nostr address?<br />
           <button
-            class="tw-border-0 tw-bg-transparent tw-text-white tw-cursor-pointer tw-underline tw-text-sm"
+            class="cursor-pointer border-0 bg-transparent text-sm text-white underline"
             on:click={handleOpenLogin}>Login now</button
           >
         </div>
 
         <!-- Login view ################### -->
-      {:else if !connected}
-        <div class="tw-text-lg tw-text-center">
+      {:else if !identity}
+        <div class="text-center text-lg">
           How do you want to connect to Nostr?
         </div>
-        <form class="flex tw-mt-4 tw-mb-1" on:submit={handleConnect}>
+        <form class="mb-1 mt-4 flex flex-col" on:submit={handleConnect}>
           <!-- svelte-ignore a11y-autofocus -->
           <input
-            class="tw-box-border tw-w-full tw-px-2 tw-py-1 tw-rounded tw-text-lg tw-border-none tw-outline-none"
+            class="box-border w-full rounded px-2 py-1 text-lg text-neutral-800 outline-none"
             placeholder="user@provider or bunker://..."
             bind:this={bunkerInput}
             bind:value={bunkerInputValue}
             autofocus
             disabled={connecting}
+            autocapitalize="none"
           />
+          {#if errorMessage}
+            <div
+              class="my-2 rounded bg-yellow-100 p-2 text-center text-sm leading-4 text-red-400"
+            >
+              {errorMessage}
+            </div>
+          {/if}
           <button
-            class="tw-flex tw-w-full tw-mt-4 tw-px-2 tw-py-1 tw-text-lg tw-rounded tw-border-0 tw-bg-{accent}-900 hover:tw-bg-{accent}-950 tw-hover:bg-indigo-900 tw-cursor-pointer tw-text-white disabled:tw-bg-neutral-400 disabled:tw-text-neutral-200 disabled:tw-cursor-default tw-items-center tw-justify-center"
+            class="mt-4 flex w-full cursor-pointer items-center justify-center 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={!bunkerInputValueIsGood || connecting}
           >
             {#if connecting}
@@ -535,63 +692,61 @@
               Connect »
             {/if}
           </button>
-          {#if connecting && longConnecting}
-            <div class="tw-mt-6 tw-text-center tw-text-sm tw-leading-3">
+          {#if connecting && takingTooLong}
+            <div class="mt-6 text-center text-sm leading-3">
               Waiting too much?
               <button
-                class="tw-border-0 tw-bg-transparent tw-text-white tw-cursor-pointer tw-underline tw-text-sm"
+                class="cursor-pointer border-0 bg-transparent text-sm text-white underline"
                 on:click={handleAbortConnection}>Cancel the connection</button
               >
             </div>
           {/if}
         </form>
         {#if !connecting}
-          <div class="tw-mt-6 tw-text-center tw-text-sm tw-leading-3">
+          <div class="mt-6 text-center text-sm leading-3">
             Do you need a Nostr account?<br />
             <button
-              class="tw-border-0 tw-bg-transparent tw-text-white tw-cursor-pointer tw-underline tw-text-sm"
+              class="cursor-pointer border-0 bg-transparent text-sm text-white underline"
               on:click={handleOpenCreate}>Sign up now</button
             >
           </div>
         {/if}
 
         <!-- Connected view ################### -->
-      {:else if connected}
-        <div class="tw-text-center">
-          <div class="tw-text-sm tw-mb-4">You are connected to Nostr as</div>
+      {:else}
+        <div class="text-center">
+          <div class="mb-4 text-sm">You are connected to Nostr as</div>
           <a
             target="_blank"
-            href={'https://nosta.me/' + connected.npub}
-            class="tw-text-white tw-no-underline tw-group"
+            href={'https://nosta.me/' + identity.npub}
+            class="group text-white no-underline"
           >
-            {#if connected.picture || connected.name}
-              <div
-                class="tw-flex tw-items-center tw-justify-center tw-gap-2 tw-mb-2"
-              >
-                {#if connected.picture}
+            {#if identity.picture || identity.name}
+              <div class="mb-2 flex items-center justify-center gap-2">
+                {#if identity.picture}
                   <img
-                    src={connected.picture}
+                    src={identity.picture}
                     alt=""
-                    class="tw-w-10 tw-h-10 tw-rounded-full tw-border-solid tw-border-2 tw-border-transparent group-hover:tw-border-{accent}-100"
+                    class="h-10 w-10 rounded-full border-2 border-solid border-transparent group-hover:border-{accent}-100"
                   />
                 {/if}
-                {#if connected.name}
+                {#if identity.name}
                   <div
-                    class="tw-text-3xl group-hover:tw-underline tw-decoration-2 tw-underline-offset-4"
+                    class="text-3xl decoration-2 underline-offset-4 group-hover:underline"
                   >
-                    {connected.name}
+                    {identity.name}
                   </div>
                 {/if}
               </div>
             {/if}
-            <div class="tw-block tw-break-all">{connected.npub}</div>
+            <div class="block break-all">{identity.npub}</div>
           </a>
         </div>
         <button
-          class="tw-block tw-w-full tw-my-2 tw-mt-6 tw-px-2 tw-py-1 tw-text-lg tw-rounded tw-border-0 tw-bg-{accent}-900 hover:tw-bg-{accent}-950 tw-hover:bg-indigo-900 tw-cursor-pointer tw-text-white"
+          class="my-2 mt-6 block w-full cursor-pointer rounded border-0 px-2 py-1 text-lg text-white bg-{accent}-900 hover:bg-{accent}-950"
           on:click={handleDisconnect}>Disconnect</button
         >
-        <div class="tw-block tw-break-all tw-mt-6 tw-text-center tw-text-sm">
+        <div class="mt-6 block break-all text-center text-sm">
           This webpage is using the public key:<br />
           {getPublicKey(clientSecret)}
         </div>
@@ -599,13 +754,3 @@
     </div>
   {/if}
 </div>
-
-<!-- hack to preload tailwind colors:
-tw-bg-cyan-700 tw-bg-cyan-800 tw-bg-cyan-900 tw-bg-cyan-950 tw-text-cyan-950 tw-outline-cyan-500
-tw-bg-green-700 tw-bg-green-800 tw-bg-green-900 tw-bg-green-950 tw-text-green-950 tw-outline-green-500
-tw-bg-purple-700 tw-bg-purple-800 tw-bg-purple-900 tw-bg-purple-950 tw-text-purple-950 tw-outline-purple-500
-tw-bg-red-700 tw-bg-red-800 tw-bg-red-900 tw-bg-red-950 tw-text-red-950 tw-outline-red-500
-tw-bg-orange-700 tw-bg-orange-800 tw-bg-orange-900 tw-bg-orange-950 tw-text-orange-950 tw-outline-orange-500
-tw-bg-neutral-700 tw-bg-neutral-800 tw-bg-neutral-900 tw-bg-neutral-950 tw-text-neutral-950 tw-outline-neutral-500
-tw-bg-stone-700 tw-bg-stone-800 tw-bg-stone-900 tw-bg-stone-950 tw-text-stone-950 tw-outline-stone-500
--->