Add zaps

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.2.15
+
+- [x] Add zaps
+
 ## 0.2.14
 
 - [x] Improve paste support

ROADMAP.md

@@ -1,5 +1,6 @@
 # Current
 
+- [ ] Try adding boxes/separation on feeds based on user feedback
 - [ ] Strip zero width spaces from compose
 - [ ] Fix iOS/safari/firefox
 - [ ] Make the note relays button modal make sense, one relay with no explanation is not good
@@ -13,13 +14,6 @@
 - https://github.com/seaweedfs/seaweedfs
 - https://github.com/cubefs/cubefs
 
-# Lightning
-
-- [ ] Linkify invoices
-- [ ] Linkify bech32 entities w/ NIP 21 https://github.com/nostr-protocol/nips/blob/master/21.md
-- [ ] Support invoices, tips, zaps https://twitter.com/jb55/status/1604131336247476224
-  - nevent1qqsd0x0xzfwtppu0n52ngw0zhynlwv0sjsr77aflcpufms2wrl3v8mspr9mhxue69uhhyetvv9ujuumwdae8gtnnda3kjctv9uqs7amnwvaz7tmwdaehgu3wd4hk6d7ewgp
-
 # Custom views
 
 - [ ] Add customize icon and route with editable custom view cards using "lists" nip
@@ -28,6 +22,15 @@
 
 # More
 
+- [ ] Linkify invoices
+- [ ] Linkify bech32 entities w/ NIP 21 https://github.com/nostr-protocol/nips/blob/master/21.md
+- [ ] Person zaps
+- [ ] Add dynamic title tag
+- [ ] Collapsible thread view
+- [ ] Split inbox into replies + everything else
+- [ ] Show more link on long notes
+- [ ] Show popover on delayed hover rather than click (on mobile, keep it click)
+- [ ] Light mode
 - [ ] Mute threads http://localhost:5173/nevent1qqsyz8x6r0cu7l6vwlcjhf8qhxyjtdykvuervkc3t3mfggse4qtwt0gpyfmhxue69uhkummnw3ezumrfvfjhyarpwdc8y6tddaexg6t4d5hxxmmdnhxvea
 - [ ] Add webtorrent support
   - https://coracle.social/nevent1qqsxgxcsq5vevy4wdty5z5v88nhwp2fc5qgl0ws5rmamn6z72hwv3qcpyfmhxue69uhkummnw3ez6an9wf5kv6t9vsh8wetvd3hhyer9wghxuet5qk6c9q

package.json

@@ -30,11 +30,14 @@
     "@fortawesome/fontawesome-free": "^6.2.1",
     "@noble/secp256k1": "^1.7.0",
     "@tsconfig/svelte": "^3.0.0",
+    "bech32": "^2.0.0",
+    "bolt11": "^1.4.0",
     "classnames": "^2.3.2",
     "compressorjs": "^1.1.1",
     "fuse.js": "^6.6.2",
     "hurdak": "github:ConsignCloud/hurdak",
     "husky": "^8.0.3",
+    "js-lnurl": "^0.5.1",
     "localforage": "^1.10.0",
     "localforage-memoryStorageDriver": "^0.9.2",
     "nostr-tools": "^1.4.1",

src/agent/cmd.ts

@@ -93,6 +93,16 @@ const createReply = (note, content, mentions = [], topics = []) => {
   return new PublishableEvent(1, {content, tags})
 }
 
+const requestZap = (relays, content, pubkey, eventId, amount, lnurl) => {
+  const tags = [["relays", ...relays], ["amount", amount], ["lnurl", lnurl], ["p", pubkey]]
+
+  if (eventId) {
+    tags.push(["e", eventId])
+  }
+
+  return new PublishableEvent(9734, {content, tags})
+}
+
 const deleteEvent = ids =>
   new PublishableEvent(5, {tags: ids.map(id => ["e", id])})
 
@@ -119,5 +129,5 @@ class PublishableEvent {
 export default {
   updateUser, setRelays, setPetnames, muffle, createRoom, updateRoom,
   createChatMessage, createDirectMessage, createNote, createReaction,
-  createReply, deleteEvent,
+  createReply, requestZap, deleteEvent, PublishableEvent,
 }

src/agent/network.ts

@@ -1,5 +1,5 @@
 import type {MyEvent} from 'src/util/types'
-import {partition, assoc, uniq, uniqBy, prop, propEq, reject, groupBy, pluck} from 'ramda'
+import {assoc, uniq, uniqBy, prop, propEq, reject, groupBy, pluck} from 'ramda'
 import {personKinds, findReplyId} from 'src/util/nostr'
 import {log} from 'src/util/logger'
 import {chunk} from 'hurdak/lib/hurdak'
@@ -148,7 +148,7 @@ const streamContext = ({notes, onChunk, depth = 0}) =>
       while (events.length > 0 && depth > 0) {
         const chunk = events.splice(0)
         const authors = getStalePubkeys(pluck('pubkey', chunk))
-        const filter = [{kinds: [1, 7], '#e': pluck('id', chunk)}] as Array<object>
+        const filter = [{kinds: [1, 7, 9735], '#e': pluck('id', chunk)}] as Array<object>
         const relays = sampleRelays(aggregateScores(chunk.map(getRelaysForEventChildren)))
 
         // Load authors and reactions in one subscription
@@ -171,22 +171,26 @@ const streamContext = ({notes, onChunk, depth = 0}) =>
   )
 
 const applyContext = (notes, context) => {
-  const [replies, reactions] = partition(
+  context = context.map(assoc('isContext', true))
-    propEq('kind', 1),
+
-    context.map(assoc('isContext', true))
+  const replies = context.filter(propEq('kind', 1))
-  )
+  const reactions = context.filter(propEq('kind', 7))
+  const zaps = context.filter(propEq('kind', 9735))
 
   const repliesByParentId = groupBy(findReplyId, replies)
   const reactionsByParentId = groupBy(findReplyId, reactions)
+  const zapsByParentId = groupBy(findReplyId, zaps)
 
-  const annotate = ({replies = [], reactions = [], ...note}) => {
+  const annotate = ({replies = [], reactions = [], zaps = [], ...note}) => {
     const combinedReplies = replies.concat(repliesByParentId[note.id] || [])
     const combinedReactions = reactions.concat(reactionsByParentId[note.id] || [])
+    const combinedZaps = zaps.concat(zapsByParentId[note.id] || [])
 
     return {
       ...note,
       replies: uniqBy(prop('id'), combinedReplies).map(annotate),
       reactions: uniqBy(prop('id'), combinedReactions),
+      zaps: uniqBy(prop('id'), combinedZaps),
     }
   }
 

src/agent/sync.ts

@@ -1,8 +1,9 @@
 import {uniq, pick, identity, isEmpty} from 'ramda'
 import {nip05} from 'nostr-tools'
+import {getParams} from 'js-lnurl'
 import {noop, createMap, ensurePlural, chunk, switcherFn} from 'hurdak/lib/hurdak'
 import {log} from 'src/util/logger'
-import {now, sleep, tryJson, timedelta, shuffle, hash} from 'src/util/misc'
+import {hexToBech32, now, sleep, tryJson, timedelta, shuffle, hash} from 'src/util/misc'
 import {Tags, roomAttrs, personKinds, isRelay, isShareableRelay, normalizeRelayUrl} from 'src/util/nostr'
 import database from 'src/agent/database'
 
@@ -45,8 +46,10 @@ const processProfileEvents = async events => {
             if (e.created_at > (person.kind0_updated_at || 0)) {
               if (kind0.nip05) {
                 verifyNip05(e.pubkey, kind0.nip05)
+              }
 
-                kind0.nip05_updated_at = e.created_at
+              if (kind0.lud16 || kind0.lud06) {
+                verifyZapper(e.pubkey, kind0.lud16 || kind0.lud06)
               }
 
               return {
@@ -304,4 +307,29 @@ const verifyNip05 = (pubkey, as) =>
     }
   }, noop)
 
+const verifyZapper = async (pubkey, address) => {
+  // Try to parse it as a lud06 LNURL
+  let zapper = await getParams(address) as any
+  let lnurl = address
+
+  // If that failed, try to parse it as a lud16 address
+  if (zapper.status === 'ERROR' && address.includes('@')) {
+    const [name, domain] = address.split('@')
+
+    if (!domain || !name) {
+      return
+    }
+
+    const url = `https://${domain}/.well-known/lnurlp/${name}`
+    const res = await fetch(url)
+
+    zapper = await res.json()
+    lnurl = hexToBech32('lnurl', url)
+  }
+
+  if (zapper?.allowsNostr && zapper?.nostrPubkey) {
+    database.people.patch({pubkey, zapper, lnurl})
+  }
+}
+
 export default {processEvents}

src/agent/user.ts

@@ -25,6 +25,7 @@ const anonRelays = synced('agent/user/anonRelays', [])
 
 const settings = synced("agent/user/settings", {
   relayLimit: 20,
+  defaultZap: 21,
   showMedia: true,
   reportAnalytics: true,
   dufflepudUrl: import.meta.env.VITE_DUFFLEPUD_URL,
@@ -91,6 +92,7 @@ const user = {
   canPublish,
   getProfile: () => profileCopy,
   getPubkey: () => profileCopy?.pubkey,
+  canZap: () => profileCopy?.zapper,
   muffle: events => {
     const muffle = user.getMuffle()
 

src/partials/Input.svelte

@@ -1,8 +1,9 @@
-<script>
+<script lang="ts">
   import cx from "classnames"
 
+  export let initialValue: string | number = ""
   export let wrapperClass = ""
-  export let value = ""
+  export let value = initialValue
 
   const className = cx(
     $$props.class,
@@ -12,14 +13,14 @@
 </script>
 
 <div class={cx(wrapperClass, "relative")}>
-  <input {...$$props} class={className} bind:value />
+  <input {...$$props} class={className} bind:value on:change on:input />
   {#if $$slots.before}
   <div class="absolute top-0 left-0 pt-3 px-3 text-dark flex gap-2">
     <slot name="before" />
   </div>
   {/if}
   {#if $$slots.after}
-  <div class="absolute top-0 right-0 pt-3 px-3 text-dark flex gap-2 bg-light">
+  <div class="absolute top-0 right-0 pt-3 px-3 text-dark flex gap-2 bg-light rounded m-px">
     <slot name="after" />
   </div>
   {/if}

src/util/misc.ts

@@ -1,8 +1,10 @@
+import {bech32} from 'bech32'
+import {Buffer} from 'buffer'
 import {debounce, throttle} from 'throttle-debounce'
 import {aperture, path as getPath, allPass, pipe, isNil, complement, equals, is, pluck, sum, identity, sortBy} from "ramda"
 import Fuse from "fuse.js/dist/fuse.min.js"
 import {writable} from 'svelte/store'
-import {isObject} from 'hurdak/lib/hurdak'
+import {isObject, round} from 'hurdak/lib/hurdak'
 import {warn} from 'src/util/logger'
 
 export const fuzzy = (data, opts = {}) => {
@@ -327,3 +329,18 @@ export const uploadFile = (url, fileObj) => {
 
   return fetchJson(url, {method: 'POST', body})
 }
+
+export const hexToBech32 = (prefix, hex) =>
+  bech32.encode(prefix, bech32.toWords(Buffer.from(hex, 'hex')))
+
+export const bech32ToHex = b32 =>
+  Buffer.from(bech32.fromWords(bech32.decode(b32).words)).toString('hex')
+
+export const formatSats = sats => {
+  const formatter = new Intl.NumberFormat()
+
+  if (sats < 1_000) return formatter.format(sats)
+  if (sats < 1_000_000) return formatter.format(round(1, sats / 1000)) + 'K'
+  if (sats < 100_000_000) return formatter.format(round(1, sats / 1_000_000)) + 'MM'
+  return formatter.format(round(2, sats / 100_000_000)) + 'BTC'
+}

src/util/nostr.ts

@@ -1,5 +1,5 @@
 import type {DisplayEvent} from 'src/util/types'
-import {last, identity, objOf, prop, flatten, uniq} from 'ramda'
+import {fromPairs, last, identity, objOf, prop, flatten, uniq} from 'ramda'
 import {nip19} from 'nostr-tools'
 import {ensurePlural, ellipsize, first} from 'hurdak/lib/hurdak'
 
@@ -31,6 +31,9 @@ export class Tags {
   pubkeys() {
     return this.type("p").values().all()
   }
+  asMeta() {
+    return fromPairs(this.tags)
+  }
   values() {
     return new Tags(this.tags.map(t => t[1]))
   }
@@ -118,7 +121,7 @@ export const normalizeRelayUrl = url => url.replace(/\/+$/, '').toLowerCase().tr
 export const roomAttrs = ['name', 'about', 'picture']
 
 export const asDisplayEvent = event =>
-  ({replies: [], reactions: [], ...event}) as DisplayEvent
+  ({replies: [], reactions: [], zaps: [], ...event}) as DisplayEvent
 
 export const toHex = (data: string): string | null => {
   try {

src/util/types.ts

@@ -28,6 +28,7 @@ export type MyEvent = Event & {
 export type DisplayEvent = MyEvent & {
   replies: Array<MyEvent>
   reactions: Array<MyEvent>
+  zaps: Array<MyEvent>
 }
 
 export type Room = {

src/views/Settings.svelte

@@ -46,6 +46,15 @@
           in any note.
         </p>
       </div>
+      <div class="flex flex-col gap-1">
+        <div class="flex gap-2 items-center">
+          <strong>Default zap amount</strong>
+          <Input bind:value={values.defaultZap} />
+        </div>
+        <p class="text-sm text-light">
+          The default amount of sats to use when sending a lightning tip.
+        </p>
+      </div>
       <div class="flex flex-col gap-1">
         <div class="flex justify-between">
           <strong>Max relays per request</strong>

src/views/notes/Note.svelte

@@ -1,15 +1,20 @@
 <script lang="ts">
   import cx from 'classnames'
+  import bolt11 from 'bolt11'
+  import QRCode from 'qrcode'
   import {nip19} from 'nostr-tools'
-  import {find, last, whereEq, without, uniq, pluck, reject, propEq} from 'ramda'
+  import {find, sum, last, whereEq, without, uniq, pluck, reject, propEq} from 'ramda'
   import {onMount} from 'svelte'
   import {tweened} from 'svelte/motion'
   import {slide} from 'svelte/transition'
   import {navigate} from 'svelte-routing'
   import {quantify} from 'hurdak/lib/hurdak'
   import {Tags, findRootId, findReplyId, displayPerson, isLike} from "src/util/nostr"
-  import {extractUrls} from "src/util/html"
+  import {formatTimestamp, now, tryJson, stringToColor, formatSats, fetchJson} from 'src/util/misc'
+  import {extractUrls, copyToClipboard} from "src/util/html"
   import ImageCircle from 'src/partials/ImageCircle.svelte'
+  import Input from 'src/partials/Input.svelte'
+  import Textarea from 'src/partials/Textarea.svelte'
   import Content from 'src/partials/Content.svelte'
   import PersonSummary from 'src/views/person/PersonSummary.svelte'
   import Popover from 'src/partials/Popover.svelte'
@@ -19,10 +24,11 @@
   import Anchor from 'src/partials/Anchor.svelte'
   import {toast, modal} from "src/app/ui"
   import {renderNote} from "src/app"
-  import {formatTimestamp, stringToColor} from 'src/util/misc'
   import Compose from "src/partials/Compose.svelte"
   import Card from "src/partials/Card.svelte"
   import user from 'src/agent/user'
+  import keys from 'src/agent/keys'
+  import network from 'src/agent/network'
   import {getEventPublishRelays, getRelaysForEventParent} from 'src/agent/relays'
   import database from 'src/agent/database'
   import cmd from 'src/agent/cmd'
@@ -39,6 +45,7 @@
   const getDefaultReplyMentions = () =>
     without([user.getPubkey()], uniq(Tags.from(note).type("p").values().all().concat(note.pubkey)))
 
+  let zap = null
   let reply = null
   let replyMentions = getDefaultReplyMentions()
   let replyContainer = null
@@ -51,25 +58,67 @@
   const interactive = !anchorId || !showEntire
   const person = database.watch('people', () => database.getPersonWithFallback(note.pubkey))
 
-  let likes, flags, like, flag, border, childrenContainer, noteContainer
+  let likes, flags, zaps, like, flag, border, childrenContainer, noteContainer, canZap, zapCanvas
 
   const interpolate = (a, b) => t => a + Math.round((b - a) * t)
   const likesCount = tweened(0, {interpolate})
   const flagsCount = tweened(0, {interpolate})
+  const zapsTotal = tweened(0, {interpolate})
   const repliesCount = tweened(0, {interpolate})
 
-  $: {
+  $: likes = note.reactions.filter(n => isLike(n.content))
-    likes = note.reactions.filter(n => isLike(n.content))
+  $: flags = note.reactions.filter(whereEq({content: '-'}))
-    flags = note.reactions.filter(whereEq({content: '-'}))
+  $: zaps = note.zaps
-  }
+    .map(zap => {
+      const zapMeta = Tags.from(zap).asMeta()
+
+      return tryJson(() => ({
+        ...zap,
+        invoice: bolt11.decode(zapMeta.bolt11),
+        request: JSON.parse(zapMeta.description),
+      }))
+    })
+    .filter(zap => {
+        if (!zap) {
+          return false
+        }
+
+        // Don't count zaps that the user sent himself
+        if (zap.request.pubkey === $person.pubkey) {
+          return false
+        }
+
+        const {invoice, request} = zap
+        const reqMeta = Tags.from(request).asMeta()
+
+        // Verify that the zapper actually sent the requested amount (if it was supplied)
+        if (reqMeta.amount && reqMeta.amount !== parseInt(invoice.millisatoshis)) {
+          return false
+        }
+
+        // If the sending client provided an lnurl tag, verify that too
+        if (reqMeta.lnurl && reqMeta.lnurl !== $person?.lnurl) {
+          return false
+        }
+
+        // Verify that the zap note actually came from the recipient's zapper
+        if ($person.zapper?.nostrPubkey !== zap.pubkey) {
+          return false
+        }
+
+        return true
+      })
 
   $: like = find(whereEq({pubkey: $profile?.pubkey}), likes)
   $: flag = find(whereEq({pubkey: $profile?.pubkey}), flags)
-
+  $: zapped = find(z => z.request.pubkey === $profile?.pubkey, zaps)
   $: $likesCount = likes.length
   $: $flagsCount = flags.length
+  $: $zapsTotal = sum(zaps.map(zap => zap.invoice.satoshis))
   $: $repliesCount = note.replies.length
   $: visibleNotes = note.replies.filter(r => showContext ? true : !r.isContext)
+  $: canZap = $person?.zapper && user.canZap()
+  $: zapCanvas && zap && QRCode.toCanvas(zapCanvas, zap.invoice)
 
   const onClick = e => {
     const target = e.target as HTMLElement
@@ -173,6 +222,67 @@
     }
   }
 
+  const startZap = async () => {
+    zap = {
+      amount: user.getSetting('defaultZap'),
+      message: '',
+      invoice: null,
+      loading: false,
+      startedAt: now(),
+    }
+  }
+
+  const loadZapInvoice = async () => {
+    zap.loading = true
+
+    const {zapper, lnurl} = $person
+    const amount = zap.amount * 1000
+    const relays = getEventPublishRelays(note)
+    const urls = pluck('url', relays)
+    const publishable = cmd.requestZap(urls, zap.message, note.pubkey, note.id, amount, lnurl)
+    const event = encodeURI(JSON.stringify(await keys.sign(publishable.event)))
+    const res = await fetchJson(
+      `${zapper.callback}?amount=${amount}&nostr=${event}&lnurl=${lnurl}`
+    )
+
+    zap.invoice = res.pr
+    zap.loading = false
+
+    // Open up alby or whatever
+    const {webln} = (window as {webln?: any})
+    if (webln) {
+      await webln.enable()
+
+      webln.sendPayment(zap.invoice)
+    }
+
+    // Listen for the zap confirmation
+    zap.sub = network.listen({
+      relays,
+      filter: {
+        kinds: [9735],
+        authors: [zapper.nostrPubkey],
+        '#p': [$person.pubkey],
+        since: zap.startedAt,
+      },
+      onChunk: chunk => {
+        note.zaps = note.zaps.concat(chunk)
+        cleanupZap()
+      },
+    })
+  }
+
+  const copyZapInvoice = () => {
+    copyToClipboard(zap.invoice)
+  }
+
+  const cleanupZap = () => {
+    if (zap) {
+      zap.sub?.then(s => s.unsub())
+      zap = null
+    }
+  }
+
   const onBodyClick = e => {
     const target = e.target as HTMLElement
 
@@ -207,7 +317,10 @@
   onMount(() => {
     const interval = setInterval(setBorderHeight, 300)
 
-    return () => clearInterval(interval)
+    return () => {
+      clearInterval(interval)
+      cleanupZap()
+    }
   })
 </script>
 
@@ -282,12 +395,20 @@
               <button class="fa fa-reply cursor-pointer" on:click={startReply} />
               {$repliesCount}
             </div>
-            <div class={cx('w-16', {'text-accent': like})}>
+            <div class="w-16" class:text-accent={like}>
               <button
                 class={cx('fa fa-heart cursor-pointer', {'fa-beat fa-beat-custom': like})}
                 on:click={() => like ? deleteReaction(like) : react("+")} />
               {$likesCount}
             </div>
+            <div class="w-20" class:text-accent={zapped}>
+              <button
+                class={cx("fa fa-bolt cursor-pointer", {
+                  'pointer-events-none opacity-50': !canZap,
+                })}
+                on:click={startZap} />
+              {formatSats($zapsTotal)}
+            </div>
             <div class="w-16">
               <button class="fa fa-flag cursor-pointer" on:click={() => react("-")} />
               {$flagsCount}
@@ -359,4 +480,36 @@
 </Modal>
 {/if}
 
+{#if zap}
+<Modal onEscape={cleanupZap}>
+  <Content size="lg">
+    <div class="text-center">
+      <h1 class="staatliches text-2xl">Send a zap</h1>
+      <p>to {displayPerson($person)}</p>
+    </div>
+    {#if zap.invoice}
+      <canvas class="m-auto" bind:this={zapCanvas} />
+      <Input value={zap.invoice}>
+        <button slot="after" class="fa fa-copy" on:click={copyZapInvoice} />
+      </Input>
+      <div class="text-center text-light">
+        Copy or scan using a lightning wallet to pay your zap.
+      </div>
+    {:else}
+    <Textarea bind:value={zap.message} placeholder="Add an optional message" />
+    <div class="flex items-center gap-2">
+      <label class="flex-grow">Custom amount:</label>
+      <Input bind:value={zap.amount}>
+        <i slot="before" class="fa fa-bolt" />
+        <span slot="after" class="-mt-1">sats</span>
+      </Input>
+      <Anchor loading={zap.loading} type="button-accent" on:click={loadZapInvoice}>
+        Zap!
+      </Anchor>
+    </div>
+    {/if}
+  </Content>
+</Modal>
+{/if}
+
 {/if}