Add support for nip05 verification

README.md

@@ -18,7 +18,7 @@ If you like Coracle and want to support its development, you can donate sats via
 - [x] Add notes, follows, likes tab to profile
 - [x] Mentions
 - [x] Persist and load relay list
-- [ ] NIP 05
+- [x] NIP 05
 - [ ] Direct messages https://github.com/nbd-wtf/nostr-tools/blob/master/nip04.ts
 - [ ] Image uploads
   - Use dufflepud. Default will charge via lightning and have a tos, others can self-host and skip that.
@@ -80,6 +80,7 @@ If you like Coracle and want to support its development, you can donate sats via
 - [x] Added automatic relay discovery
 - [x] Added error tracking with bugsnag
 - [x] Upgraded nostr-tools
+- [x] Added support for NIP-05 verfication
 
 ## 0.2.6
 

src/App.svelte

@@ -218,7 +218,7 @@
         <img src="/images/favicon.png" class="w-8" />
         <h1 class="staatliches text-3xl">Coracle</h1>
       </Anchor>
-      {#if $mostRecentAlert > $lastCheckedAlerts || slowConnections.length > 0}
+      {#if $mostRecentAlert > $lastCheckedAlerts}
       <div class="w-2 h-2 rounded bg-accent absolute top-4 left-12 lg:hidden" />
       {/if}
     </div>

src/agent/data.js

@@ -1,6 +1,7 @@
 import Dexie from 'dexie'
+import {nip05} from 'nostr-tools'
 import {writable} from 'svelte/store'
-import {ensurePlural, createMap, switcherFn} from 'hurdak/lib/hurdak'
+import {noop, ensurePlural, createMap, switcherFn} from 'hurdak/lib/hurdak'
 import {now} from 'src/util/misc'
 import {personKinds} from 'src/util/nostr'
 
@@ -56,7 +57,20 @@ export const processEvents = async events => {
       ...person,
       ...updates[e.pubkey],
       ...switcherFn(e.kind, {
-        0: () => JSON.parse(e.content),
+        0: () => {
+          try {
+            const content = JSON.parse(e.content)
+
+            // Fire off a nip05 verification
+            if (content.nip05) {
+              verifyNip05(e.pubkey, content.nip05)
+            }
+
+            return content
+          } catch (e) {
+            console.error(e)
+          }
+        },
         2: () => {
           if (e.created_at > (person.relays_updated_at || 0)) {
             return {
@@ -85,3 +99,14 @@ export const processEvents = async events => {
 
   await updatePeople(updates)
 }
+
+// Utils
+
+const verifyNip05 = (pubkey, as) =>
+  nip05.queryProfile(as).then(result => {
+    if (result.pubkey === pubkey) {
+      const person = getPerson(pubkey, true)
+
+      updatePeople({[pubkey]: {...person, verified_as: as}})
+    }
+  }, noop)

src/agent/index.js

@@ -1,4 +1,4 @@
-import {last, uniqBy, prop, objOf, uniq} from 'ramda'
+import {last, uniqBy, prop} from 'ramda'
 import {derived, get} from 'svelte/store'
 import {Tags} from 'src/util/nostr'
 import pool from 'src/agent/pool'

src/app/ui.js

@@ -1,5 +1,4 @@
 import {prop} from "ramda"
-import Bugsnag from "@bugsnag/js"
 import {uuid} from "hurdak/lib/hurdak"
 import {navigate} from "svelte-routing"
 import {nip19} from 'nostr-tools'

src/routes/Person.svelte

@@ -1,5 +1,5 @@
 <script>
-  import {find, reject} from 'ramda'
+  import {last, find, reject} from 'ramda'
   import {onMount, onDestroy} from 'svelte'
   import {nip19} from 'nostr-tools'
   import {first} from 'hurdak/lib/hurdak'
@@ -92,25 +92,32 @@
 
 <Content>
   <div class="flex flex-col gap-4" in:fly={{y: 20}}>
-    <div class="flex gap-4">
+    <div class="flex items-start gap-4">
       <div
-        class="overflow-hidden w-12 h-12 rounded-full bg-cover bg-center shrink-0 border border-solid border-white"
+        class="overflow-hidden w-32 h-32 rounded-full bg-cover bg-center shrink-0 border border-solid border-white"
         style="background-image: url({person.picture})" />
-      <div class="flex-grow">
+      <div class="flex-grow flex flex-col gap-2">
         <div class="flex items-center gap-2">
           <h1 class="text-2xl">{displayPerson(person)}</h1>
-          {#if $user && $user.pubkey !== pubkey}
-            <i class="fa-solid fa-sliders cursor-pointer" on:click={openAdvanced} />
-          {/if}
         </div>
+        {#if person.verified_as}
+        <div class="flex gap-1 text-sm">
+          <i class="fa fa-user-check text-accent" />
+          <span class="text-light">{last(person.verified_as.split('@'))}</span>
+        </div>
+        {/if}
         <p>{@html renderContent(person.about || '')}</p>
       </div>
-      <div class="whitespace-nowrap">
+      <div class="whitespace-nowrap flex gap-4 items-center">
         {#if $user?.pubkey === pubkey && $canSign}
         <a href="/profile" class="cursor-pointer text-sm">
           <i class="fa-solid fa-edit" /> Edit
         </a>
-        {:else if $user?.petnames && $canSign}
+        {/if}
+        {#if $user && $user.pubkey !== pubkey}
+          <i class="fa-solid fa-sliders cursor-pointer" on:click={openAdvanced} />
+        {/if}
+        {#if $user?.petnames && $canSign}
         <div class="flex flex-col items-end gap-2">
           {#if following}
           <Button on:click={unfollow}>Unfollow</Button>

src/routes/Profile.svelte

@@ -15,7 +15,10 @@
   import {routes} from "src/app/ui"
   import cmd from "src/app/cmd"
 
-  let values = {picture: null, about: null, name: null}
+  let values = {picture: null, about: null, name: null, nip05: null}
+
+  const nip05Url = "https://github.com/nostr-protocol/nips/blob/master/05.md"
+  const pseudUrl = "https://www.coindesk.com/markets/2020/06/29/many-bitcoin-developers-are-choosing-to-use-pseudonyms-for-good-reason/"
 
   onMount(async () => {
     if (!$user) {
@@ -56,13 +59,7 @@
       <p>
         Give people a friendly way to recognize you. We recommend you do not use your real name or
         share your personal information. The future of the internet is
-        <Anchor
-          target="_blank"
-          rel="noopener"
-          href="https://www.coindesk.com/markets/2020/06/29/many-bitcoin-developers-are-choosing-to-use-pseudonyms-for-good-reason/"
-        >
-          pseudonymous
-        </Anchor>.
+        <Anchor external href={pseudUrl}>pseudonymous</Anchor>.
       </p>
     </div>
     <div class="flex flex-col gap-8 w-full">
@@ -76,6 +73,16 @@
           public key will also be displayed next to your posts.
         </p>
       </div>
+      <div class="flex flex-col gap-1">
+        <strong>NIP-05 Identifier</strong>
+        <Input type="text" name="name" wrapperClass="flex-grow" bind:value={values.nip05}>
+          <i slot="before" class="fa-solid fa-user-check" />
+        </Input>
+        <p class="text-sm text-light">
+          Enter a <Anchor external href={nip05Url}>NIP-05</Anchor> identifier in the form
+          "name@domain.com" to verify your public key.
+        </p>
+      </div>
       <div class="flex flex-col gap-1">
         <strong>About you</strong>
         <Textarea name="about" bind:value={values.about} />

src/views/SearchPeople.svelte

@@ -24,7 +24,9 @@
       class="overflow-hidden w-12 h-12 rounded-full bg-cover bg-center shrink-0 border border-solid border-white"
       style="background-image: url({p.picture})" />
     <div class="flex-grow">
-      <h1 class="text-2xl">{displayPerson(p)}</h1>
+      <div class="flex gap-2 items-center justify-between">
+        <h1 class="text-2xl">{displayPerson(p)}</h1>
+      </div>
       <p>{@html renderContent(ellipsize(p.about || '', 140))}</p>
     </div>
   </a>