From 371c068254bcc11717ec8ac37bfcf2603d2ee856 Mon Sep 17 00:00:00 2001
From: styppo <mail@styp-rekowsky.de>
Date: Tue, 10 Jan 2023 01:43:15 +0000
Subject: [PATCH] * Profile page refinements * Add basic reaction support

---
 src/components/EmptyPlaceholder.vue |  16 ++++
 src/components/Post/HeroPost.vue    |   2 +-
 src/components/Post/ListPost.vue    |   9 +-
 src/components/Post/Thread.vue      |  11 ++-
 src/components/User/UserAvatar.vue  |   2 +-
 src/components/User/UserName.vue    |   2 +-
 src/css/quasar.variables.scss       |   2 +-
 src/nostr/FetchQueue.js             |   2 +-
 src/nostr/NostrClient.js            |   6 +-
 src/nostr/NostrStore.js             |  87 ++++++++++++++++--
 src/nostr/Relay.js                  |   1 +
 src/nostr/model/Note.js             |  36 +++++++-
 src/nostr/store/ReactionStore.js    |  75 ++++++++++++++++
 src/pages/profile/Followers.vue     | 134 ++++++++++++++++++++++++++++
 src/pages/{ => profile}/Profile.vue | 101 ++++++++++++++-------
 src/router/mixin.js                 |   4 +-
 src/router/routes.js                |   7 +-
 src/utils/utils.js                  |   6 ++
 18 files changed, 445 insertions(+), 58 deletions(-)
 create mode 100644 src/components/EmptyPlaceholder.vue
 create mode 100644 src/nostr/store/ReactionStore.js
 create mode 100644 src/pages/profile/Followers.vue
 rename src/pages/{ => profile}/Profile.vue (60%)

diff --git a/src/components/EmptyPlaceholder.vue b/src/components/EmptyPlaceholder.vue
new file mode 100644
index 0000000..90fefe1
--- /dev/null
+++ b/src/components/EmptyPlaceholder.vue
@@ -0,0 +1,16 @@
+<template>
+  <p>Nothing here 🤷</p>
+</template>
+
+<script>
+export default {
+  name: 'EmptyPlaceholder'
+}
+</script>
+
+<style lang="scss" scoped>
+p {
+  padding: 1rem;
+  text-align: center;
+}
+</style>
diff --git a/src/components/Post/HeroPost.vue b/src/components/Post/HeroPost.vue
index 57607d8..1bdf043 100644
--- a/src/components/Post/HeroPost.vue
+++ b/src/components/Post/HeroPost.vue
@@ -15,7 +15,7 @@
       <div class="post-content-header">
         <p v-if="note.isReply()" class="in-reply-to">
           Replying to
-          <a @click.stop="linkToProfile(ancestor?.author)">
+          <a @click.stop="goToProfile(ancestor?.author)">
             <UserName v-if="ancestor?.author" :pubkey="ancestor?.author" />
           </a>
         </p>
diff --git a/src/components/Post/ListPost.vue b/src/components/Post/ListPost.vue
index 4072754..fab17b2 100644
--- a/src/components/Post/ListPost.vue
+++ b/src/components/Post/ListPost.vue
@@ -2,7 +2,7 @@
   <div
     class="post"
     :class="{clickable}"
-    @click.stop="clickable && linkToThread(note.id)"
+    @click.stop="clickable && goToThread(note.id)"
   >
     <div class="post-author">
       <div class="connector-top">
@@ -22,7 +22,7 @@
         </p>
         <p v-if="note.isReply()" class="in-reply-to">
           Replying to
-          <a @click.stop="linkToProfile(ancestor?.author)">
+          <a @click.stop="goToProfile(ancestor?.author)">
             <UserName v-if="ancestor?.author" :pubkey="ancestor?.author" />
           </a>
         </p>
@@ -31,7 +31,7 @@
         <BaseMarkdown :content="note.content" />
 <!--        {{ note.content }}-->
       </div>
-      <div v-if="actions" class="post-content-actions">
+      <div v-if="showActions" class="post-content-actions">
         <div class="action-item comment" @click.stop="app.createPost({ancestor: note.id})">
           <BaseIcon icon="comment" />
           <span>{{ stats.comments || '' }}</span>
@@ -109,6 +109,9 @@ export default {
         shares: 0,
       }
     },
+    showActions() {
+      return this.actions && this.note.canReply()
+    },
   },
   methods: {
     formatPostDate(timestamp) {
diff --git a/src/components/Post/Thread.vue b/src/components/Post/Thread.vue
index cc99297..f22c80c 100644
--- a/src/components/Post/Thread.vue
+++ b/src/components/Post/Thread.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="thread">
     <ListPost
-      v-for="(note, index) in thread"
+      v-for="(note, index) in filteredThread"
       :key="note.id"
       :note="note"
-      :connector-top="thread.length > 1 && index > 0"
-      :connector-bottom="(thread.length > 1 && index < thread.length - 1) || forceBottomConnector"
+      :connector-top="filteredThread.length > 1 && index > 0"
+      :connector-bottom="(filteredThread.length > 1 && index < filteredThread.length - 1) || forceBottomConnector"
       actions
       clickable
     />
@@ -30,6 +30,11 @@ export default {
       default: false,
     },
   },
+  computed: {
+    filteredThread() {
+      return this.thread.filter(note => !!note)
+    }
+  }
 }
 </script>
 
diff --git a/src/components/User/UserAvatar.vue b/src/components/User/UserAvatar.vue
index c77aa23..82d5707 100644
--- a/src/components/User/UserAvatar.vue
+++ b/src/components/User/UserAvatar.vue
@@ -2,7 +2,7 @@
   <q-avatar
     :class="{'cursor-pointer': clickable}"
     :size="size"
-    @click="clickable && linkToProfile(pubkey)"
+    @click="clickable && goToProfile(pubkey)"
   >
     <img
       v-if="hasAvatar && !avatarFetchFailed"
diff --git a/src/components/User/UserName.vue b/src/components/User/UserName.vue
index e84bc71..71b6aaa 100644
--- a/src/components/User/UserName.vue
+++ b/src/components/User/UserName.vue
@@ -3,7 +3,7 @@
     class="username"
     :class="{'two-line': twoLine, clickable}"
   >
-    <a @click="clickable && linkToProfile(pubkey)">
+    <a @click="clickable && goToProfile(pubkey)">
       <span v-if="profile?.name" class="name">{{ profile.name }}</span>
 <!--      <q-icon v-if="showFollowing && isFollow" name="visibility" color="secondary">-->
 <!--        <q-tooltip>-->
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 3996ce1..b781120 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -12,7 +12,7 @@
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
-$primary   : #1976D2;
+$primary   : #ee517d;
 $secondary : #26A69A;
 $accent    : #9C27B0;
 
diff --git a/src/nostr/FetchQueue.js b/src/nostr/FetchQueue.js
index 9377354..39ba5ea 100644
--- a/src/nostr/FetchQueue.js
+++ b/src/nostr/FetchQueue.js
@@ -41,7 +41,7 @@ export default class FetchQueue extends Observable {
     const ids = Object.keys(this.queue).slice(0, this.batchSize)
     if (!ids.length) return
 
-    console.log(`Fetching ${ids.length}/${Object.keys(this.queue).length} ${this.subId}s`, ids)
+    //console.log(`Fetching ${ids.length}/${Object.keys(this.queue).length} ${this.subId}s`, ids)
 
     // Remove ids that we have tried too many times.
     const filteredIds = []
diff --git a/src/nostr/NostrClient.js b/src/nostr/NostrClient.js
index 90f7214..a1ea6bc 100644
--- a/src/nostr/NostrClient.js
+++ b/src/nostr/NostrClient.js
@@ -31,7 +31,7 @@ export default class NostrClient {
     return this.pool.connectedRelays()
   }
 
-  subscribe(filters, callback, opts) {
+  subscribe(filters, callback, opts = {}) {
     let subId
     if (opts?.subId) {
       //if (this.subs[opts.subId]) throw new Error(`SubId '${opts.subId}' already exists`)
@@ -69,7 +69,7 @@ export default class NostrClient {
 
     const sub = this.subs[subId]
     if (!sub) {
-      console.warn(`Event for invalid subId ${subId} from ${relay}`)
+      //console.warn(`Event for invalid subId ${subId} from ${relay}`)
       return
     }
 
@@ -83,7 +83,7 @@ export default class NostrClient {
   }
 
   onEose(relay, subId) {
-    console.log(`[EOSE] from ${relay} for ${subId}`)
+    //console.log(`[EOSE] from ${relay} for ${subId}`)
 
     const sub = this.subs[subId]
     if (!sub) return
diff --git a/src/nostr/NostrStore.js b/src/nostr/NostrStore.js
index 0d27bea..ce881c1 100644
--- a/src/nostr/NostrStore.js
+++ b/src/nostr/NostrStore.js
@@ -1,12 +1,14 @@
 import {defineStore} from 'pinia'
 import {markRaw} from 'vue'
 import {EventKind} from 'src/nostr/model/Event'
+import Note from 'src/nostr/model/Note'
 import NostrClient from 'src/nostr/NostrClient'
 import FetchQueue from 'src/nostr/FetchQueue'
 import {NoteOrder, useNoteStore} from 'src/nostr/store/NoteStore'
 import {useProfileStore} from 'src/nostr/store/ProfileStore'
 import {useContactStore} from 'src/nostr/store/ContactStore'
 import {useSettingsStore} from 'stores/Settings'
+import {ReactionOrder, useReactionStore} from 'src/nostr/store/ReactionStore'
 
 export const Feeds = {
   GLOBAL: {
@@ -87,8 +89,13 @@ export const useNostrStore = defineStore('nostr', {
           return profiles.addEvent(event)
         }
         case EventKind.NOTE: {
-          const notes = useNoteStore()
-          return notes.addEvent(event)
+          if (Note.isReaction(event)) {
+            const reactions = useReactionStore()
+            return reactions.addEvent(event)
+          } else {
+            const notes = useNoteStore()
+            return notes.addEvent(event)
+          }
         }
         case EventKind.RELAY:
           break
@@ -102,8 +109,10 @@ export const useNostrStore = defineStore('nostr', {
           break
         case EventKind.SHARE:
           break
-        case EventKind.REACTION:
-          break
+        case EventKind.REACTION: {
+          const reactions = useReactionStore()
+          return reactions.addEvent(event)
+        }
         case EventKind.CHATROOM:
           break
       }
@@ -181,6 +190,40 @@ export const useNostrStore = defineStore('nostr', {
       )
     },
 
+    getReactionsTo(id, order = ReactionOrder.CREATION_DATE_DESC) {
+      const store = useReactionStore()
+      const reactions = store.allByEvent(id, order)
+      // TODO fetch?
+      return reactions
+    },
+
+    fetchReactionsTo(id, limit = 500) {
+      return this.fetchMultiple(
+        {
+          kinds: [EventKind.REACTION],
+          '#e': [id],
+        },
+        limit
+      )
+    },
+
+    getReactionsByAuthor(pubkey, order = ReactionOrder.CREATION_DATE_DESC) {
+      const store = useReactionStore()
+      const reactions = store.allByAuthor(pubkey, order)
+      // TODO fetch?
+      return reactions
+    },
+
+    fetchReactionsByAuthor(pubkey, limit = 500) {
+      return this.fetchMultiple(
+        {
+          kinds: [EventKind.REACTION],
+          authors: [pubkey],
+        },
+        limit
+      )
+    },
+
     streamThread(rootId, eventCallback, initialFetchCompleteCallback) {
       return this.streamEvents(
         {
@@ -208,8 +251,40 @@ export const useNostrStore = defineStore('nostr', {
       )
     },
 
-    cancelStream(subId) {
-      this.client.unsubscribe(subId)
+    streamFullProfile(pubkey) {
+      const handles = []
+      // Everything authored by pubkey
+      handles.push(this.client.subscribe({
+        kinds: [EventKind.NOTE],
+        authors: [pubkey],
+        limit: 200,
+      }, () => {}, { subId: 'foo' }))
+      handles.push(this.client.subscribe({
+        kinds: [EventKind.REACTION],
+        authors: [pubkey],
+        limit: 100,
+      }))
+      handles.push(this.client.subscribe({
+        kinds: [EventKind.METADATA, EventKind.CONTACT],
+        authors: [pubkey],
+      }))
+      // handles.push(this.client.subscribe({
+      //   kinds: [EventKind.METADATA, EventKind.NOTE, EventKind.RELAY, EventKind.CONTACT, EventKind.REACTION],
+      //   authors: [pubkey],
+      // }))
+      // Followers
+      handles.push(this.client.subscribe({
+        kinds: [EventKind.CONTACT],
+        '#p': [pubkey]
+      }))
+      return handles
+    },
+
+    cancelStream(subIds) {
+      if (!Array.isArray(subIds)) subIds = [subIds]
+      for (const subId of subIds) {
+        this.client.unsubscribe(subId)
+      }
     },
 
     fetchEvent(id) {
diff --git a/src/nostr/Relay.js b/src/nostr/Relay.js
index ff12a8a..d783765 100644
--- a/src/nostr/Relay.js
+++ b/src/nostr/Relay.js
@@ -29,6 +29,7 @@ export class Relay extends Observable {
   }
 
   subscribe(subId, filters) {
+    console.log(`${this} subscribing to ${subId}`, filters)
     this.socket.send(['REQ', subId, filters])
   }
 
diff --git a/src/nostr/model/Note.js b/src/nostr/model/Note.js
index e0175ff..8b6e707 100644
--- a/src/nostr/model/Note.js
+++ b/src/nostr/model/Note.js
@@ -1,8 +1,10 @@
 import {EventKind} from 'src/nostr/model/Event'
+import {isEmoji} from 'src/utils/utils'
 
 export default class Note {
   constructor(id, args) {
     this.id = id
+    this.kind = args.kind || EventKind.NOTE
     this.author = args.author || args.pubkey
     this.createdAt = args.createdAt
     this.content = args.content
@@ -13,11 +15,15 @@ export default class Note {
   }
 
   static from(event) {
-    console.assert(event.kind === EventKind.NOTE)
+    const content = Note.isReaction(event)
+      ? Note.normalizeReactionContent(event.content)
+      : event.content
+
     return new Note(event.id, {
+      kind: event.kind,
       author: event.pubkey,
       createdAt: event.createdAt,
-      content: event.content,
+      content,
       refs: {
         events: event.eventRefs(),
         pubkeys: event.pubkeyRefs(),
@@ -29,6 +35,10 @@ export default class Note {
     return !this.refs.events.isEmpty()
   }
 
+  canReply() {
+    return this.kind === EventKind.NOTE
+  }
+
   root() {
     return this.refs.events.root()
   }
@@ -36,4 +46,26 @@ export default class Note {
   ancestor() {
     return this.refs.events.ancestor()
   }
+
+  isReaction() {
+    return this.kind === EventKind.REACTION
+      || (this.isReply() && Note.isReactionContent(this.content))
+  }
+
+  static isReaction(event) {
+    return event.kind === EventKind.REACTION
+      || (!event.eventRefs().isEmpty() && Note.isReactionContent(event.content))
+  }
+
+  static isReactionContent(content) {
+    return content === '+'
+      || content === ''
+      || isEmoji(content)
+  }
+
+  static normalizeReactionContent(content) {
+    return isEmoji(content)
+      ? content
+      : '❤️'
+  }
 }
diff --git a/src/nostr/store/ReactionStore.js b/src/nostr/store/ReactionStore.js
new file mode 100644
index 0000000..3099b2a
--- /dev/null
+++ b/src/nostr/store/ReactionStore.js
@@ -0,0 +1,75 @@
+import {defineStore} from 'pinia'
+import {NoteOrder} from 'src/nostr/store/NoteStore'
+import Note from 'src/nostr/model/Note'
+
+// class Reaction {
+//   constructor(id, ancestor, author, createdAt, emoji) {
+//     this.id = id
+//     this.ancestor = ancestor
+//     this.author = author
+//     this.createdAt = createdAt
+//     this.emoji = emoji
+//   }
+//
+//   static from(event) {
+//     console.assert([EventKind.REACTION, EventKind.NOTE].includes(event.kind))
+//     if (event.eventRefs().isEmpty()) return
+//
+//     // TODO Normalize content better
+//     const emoji = isEmoji(event.content)
+//       ? event.content
+//       : '❤️'
+//
+//     return new Reaction(
+//       event.id,
+//       event.eventRefs().ancestor(),
+//       event.pubkey,
+//       event.createdAt,
+//       emoji
+//     )
+//   }
+// }
+
+export const ReactionOrder = NoteOrder
+
+export const useReactionStore = defineStore('reaction', {
+  state: () => ({
+    reactions: {},
+    byEvent: {},
+    byAuthor: {},
+  }),
+  getters: {
+    get(state) {
+      return id => state.reactions[id]
+    },
+    allByEvent(state) {
+      return (id, order) => (state.byEvent[id] || []).sort(order || ReactionOrder.CREATION_DATE_DESC)
+    },
+    allByAuthor(state) {
+      return (pubkey, order) => (state.byAuthor[pubkey] || []).sort(order || ReactionOrder.CREATION_DATE_DESC)
+    }
+  },
+  actions: {
+    addEvent(event) {
+      const note = Note.from(event)
+      if (!note || !note.isReply()) return false
+
+      // Skip if reaction already exists
+      if (this.reactions[note.id]) return this.reactions[note.id]
+
+      this.reactions[note.id] = note
+
+      if (!this.byEvent[note.ancestor()]) {
+        this.byEvent[note.ancestor()] = []
+      }
+      this.byEvent[note.ancestor()].push(note)
+
+      if (!this.byAuthor[note.author]) {
+        this.byAuthor[note.author] = []
+      }
+      this.byAuthor[note.author].push(note)
+
+      return this.reactions[note.id]
+    }
+  }
+})
diff --git a/src/pages/profile/Followers.vue b/src/pages/profile/Followers.vue
new file mode 100644
index 0000000..0f3c1a4
--- /dev/null
+++ b/src/pages/profile/Followers.vue
@@ -0,0 +1,134 @@
+<template>
+  <q-page class="followers">
+    <PageHeader :title="profile?.name || hexToBech32(pubkey) || 'Followers'" back-button />
+
+    <div class="profile-tabs">
+      <q-tabs
+        v-model="activeTab"
+        outline
+        align="justify"
+        indicator-color="primary"
+        :breakpoint="0"
+      >
+        <q-tab name="following" label="Following" />
+        <q-tab name="followers" label="Followers" />
+      </q-tabs>
+    </div>
+
+    <q-tab-panels v-model="activeTab" class="profile-tab-panels" animated>
+      <q-tab-panel name="following" class="no-padding">
+        <UserCard
+          v-for="contact in contacts"
+          :key="contact.pubkey"
+          :pubkey="contact.pubkey"
+          clickable
+        />
+      </q-tab-panel>
+      <q-tab-panel name="followers" class="no-padding">
+        <UserCard
+          v-for="follower in followers"
+          :key="follower"
+          :pubkey="follower"
+          clickable
+        />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-page>
+</template>
+
+<script>
+import {defineComponent} from 'vue'
+import PageHeader from 'components/PageHeader.vue'
+import UserCard from 'components/User/UserCard.vue'
+import {useAppStore} from 'stores/App'
+import {useNostrStore} from 'src/nostr/NostrStore'
+import {bech32ToHex, hexToBech32} from 'src/utils/utils'
+
+export default defineComponent({
+  name: 'Profile',
+  components: {
+    UserCard,
+    PageHeader,
+  },
+  setup() {
+    return {
+      app: useAppStore(),
+      nostr: useNostrStore(),
+    }
+  },
+  data() {
+    return {
+      activeTab: this.$route.params.tab || 'following',
+    }
+  },
+  computed: {
+    pubkey() {
+      return bech32ToHex(this.$route.params.pubkey)
+    },
+    profile() {
+      return this.nostr.getProfile(this.pubkey)
+    },
+    contacts() {
+      return this.nostr.getContacts(this.pubkey)
+    },
+    followers() {
+      return this.nostr.getFollowers(this.pubkey)
+    },
+  },
+  methods: {
+    hexToBech32,
+  },
+  mounted() {
+    this.nostr.fetchFollowers(this.pubkey, 1000)
+  },
+  watch: {
+    activeTab() {
+      this.$router.replace({
+        params: {
+          tab: this.activeTab
+        }
+      })
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import "assets/theme/colors.scss";
+
+.profile {
+  &-header {
+    display: flex;
+    padding: 1rem;
+    &-avatar {
+      height: 128px;
+      width: 128px;
+      margin-right: 1rem;
+    }
+    &-content {
+      .followers {
+        a + a {
+          margin-left: 1rem;
+        }
+      }
+    }
+  }
+  &-tabs {
+    border-bottom: $border-dark;
+  }
+  &-tab-panels {
+    background-color: unset;
+  }
+}
+</style>
+<style lang="scss">
+.profile-tabs {
+  .q-tab {
+  }
+}
+.profile-header-content .username {
+  .name, .pubkey:first-child {
+    font-size: 1.4rem;
+  }
+}
+</style>
diff --git a/src/pages/Profile.vue b/src/pages/profile/Profile.vue
similarity index 60%
rename from src/pages/Profile.vue
rename to src/pages/profile/Profile.vue
index 5069655..ef1ebc0 100644
--- a/src/pages/Profile.vue
+++ b/src/pages/profile/Profile.vue
@@ -8,12 +8,12 @@
         <p class="username"><UserName :pubkey="pubkey" two-line show-verified /></p>
         <p class="about">{{ profile?.about }}</p>
         <p class="followers">
-          <span>
+          <a @click="goToFollowers('following')">
             <strong>{{ contacts?.length || 0 }}</strong> Following
-          </span>
-          <span>
+          </a>
+          <a @click="goToFollowers('followers')">
             <strong>{{ followers?.length || 0 }}</strong> Followers
-          </span>
+          </a>
         </p>
       </div>
     </div>
@@ -21,15 +21,14 @@
     <div class="profile-tabs">
       <q-tabs
         v-model="activeTab"
-        dense
         outline
-        align="left"
+        align="justify"
+        indicator-color="primary"
         :breakpoint="0"
       >
         <q-tab name="posts" label="Posts" />
         <q-tab name="replies" label="Replies" />
-        <q-tab name="following" label="Following" />
-        <q-tab name="followers" label="Followers" />
+        <q-tab name="reactions" label="Reactions" />
         <q-tab name="relays" label="Relays" />
       </q-tabs>
     </div>
@@ -43,31 +42,23 @@
           clickable
           actions
         />
+        <EmptyPlaceholder v-if="!posts?.length" />
       </q-tab-panel>
       <q-tab-panel name="replies" class="no-padding">
-        <ListPost
-          v-for="note in replies"
-          :key="note.id"
-          :note="note"
-          clickable
-          actions
+        <Thread
+          v-for="thread in replies"
+          :key="thread[1].id"
+          :thread="thread"
         />
+        <EmptyPlaceholder v-if="!replies?.length" />
       </q-tab-panel>
-      <q-tab-panel name="following" class="no-padding">
-        <UserCard
-          v-for="contact in contacts"
-          :key="contact.pubkey"
-          :pubkey="contact.pubkey"
-          clickable
-        />
-      </q-tab-panel>
-      <q-tab-panel name="followers" class="no-padding">
-        <UserCard
-          v-for="follower in followers"
-          :key="follower"
-          :pubkey="follower"
-          clickable
+      <q-tab-panel name="reactions" class="no-padding">
+        <Thread
+          v-for="thread in reactions"
+          :key="thread[1].id"
+          :thread="thread"
         />
+        <EmptyPlaceholder v-if="!reactions?.length" />
       </q-tab-panel>
     </q-tab-panels>
   </q-page>
@@ -79,15 +70,17 @@ import PageHeader from 'components/PageHeader.vue'
 import UserAvatar from 'components/User/UserAvatar.vue'
 import UserName from 'components/User/UserName.vue'
 import ListPost from 'components/Post/ListPost.vue'
-import UserCard from 'components/User/UserCard.vue'
+import Thread from 'components/Post/Thread.vue'
 import {useAppStore} from 'stores/App'
 import {useNostrStore} from 'src/nostr/NostrStore'
-import {bech32ToHex} from 'src/utils/utils'
+import {bech32ToHex, hexToBech32} from 'src/utils/utils'
+import EmptyPlaceholder from 'components/EmptyPlaceholder.vue'
 
 export default defineComponent({
   name: 'Profile',
   components: {
-    UserCard,
+    EmptyPlaceholder,
+    Thread,
     PageHeader,
     UserAvatar,
     UserName,
@@ -101,6 +94,7 @@ export default defineComponent({
   },
   data() {
     return {
+      activeScreen: 'posts',
       activeTab: 'posts',
     }
   },
@@ -119,6 +113,11 @@ export default defineComponent({
     },
     replies() {
       return this.notes.filter(note => note.isReply())
+        .map(note => [this.nostr.getNote(note.ancestor()), note])
+    },
+    reactions() {
+      return this.nostr.getReactionsByAuthor(this.pubkey)
+        .map(note => [this.nostr.getNote(note.ancestor()), note])
     },
     contacts() {
       return this.nostr.getContacts(this.pubkey)
@@ -127,14 +126,33 @@ export default defineComponent({
       return this.nostr.getFollowers(this.pubkey)
     },
   },
+  methods: {
+    goToFollowers(tab = 'following') {
+      this.$router.push({
+        name: 'followers',
+        params: {
+          pubkey: hexToBech32(this.pubkey),
+          tab,
+        }
+      })
+    }
+  },
   mounted() {
+    // FIXME
+    // this.stream = this.nostr.streamFullProfile(this.pubkey)
     this.nostr.fetchNotesByAuthor(this.pubkey)
-    this.nostr.fetchFollowers(this.pubkey)
+    this.nostr.fetchReactionsByAuthor(this.pubkey, 100)
+    this.nostr.fetchFollowers(this.pubkey, 1000)
+  },
+  unmounted() {
+    // if (this.stream) this.nostr.cancelStream(this.stream)
   }
 })
 </script>
 
 <style lang="scss" scoped>
+@import "assets/theme/colors.scss";
+
 .profile {
   &-header {
     display: flex;
@@ -146,18 +164,35 @@ export default defineComponent({
     }
     &-content {
       .followers {
-        span + span {
+        a {
+          cursor: pointer;
+          color: $color-light-gray;
+          &:hover, &:active {
+            text-decoration: underline;
+          }
+          strong {
+            color: #fff;
+          }
+        }
+        a + a {
           margin-left: 1rem;
         }
       }
     }
   }
+  &-tabs {
+    border-bottom: $border-dark;
+  }
   &-tab-panels {
     background-color: unset;
   }
 }
 </style>
 <style lang="scss">
+.profile-tabs {
+  .q-tab {
+  }
+}
 .profile-header-content .username {
   .name, .pubkey:first-child {
     font-size: 1.4rem;
diff --git a/src/router/mixin.js b/src/router/mixin.js
index 480c8b8..96f184e 100644
--- a/src/router/mixin.js
+++ b/src/router/mixin.js
@@ -2,7 +2,7 @@ import {hexToBech32} from 'src/utils/utils'
 
 export default {
   methods: {
-    linkToProfile(pubkey) {
+    goToProfile(pubkey) {
       this.$router.push({
         name: 'profile',
         params: {
@@ -10,7 +10,7 @@ export default {
         }
       })
     },
-    linkToThread(id) {
+    goToThread(id) {
       this.$router.push({
         name: 'thread',
         params: {
diff --git a/src/router/routes.js b/src/router/routes.js
index f9226aa..372b6f9 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -15,9 +15,14 @@ const routes = [
   },
   {
     path: '/profile/:pubkey(npub[a-z0-9A-Z]{59})',
-    component: () => import('pages/Profile.vue'),
+    component: () => import('pages/profile/Profile.vue'),
     name: 'profile',
   },
+  {
+    path: '/profile/:pubkey(npub[a-z0-9A-Z]{59})/:tab(following|followers)',
+    component: () => import('pages/profile/Followers.vue'),
+    name: 'followers',
+  },
   {
     path: '/thread/:id(note[a-z0-9A-Z]{59})',
     component: () => import('pages/Thread.vue'),
diff --git a/src/utils/utils.js b/src/utils/utils.js
index 04b4b28..83af3a1 100644
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -1,5 +1,11 @@
 import {encode as bech32encode, decode as bech32decode} from 'bech32-buffer'
 
+const PATTERN_EMOJI = /^[#*0-9]\uFE0F?\u20E3|[\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u23CF\u23ED-\u23EF\u23F1\u23F2\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB\u25FC\u25FE\u2600-\u2604\u260E\u2611\u2614\u2615\u2618\u2620\u2622\u2623\u2626\u262A\u262E\u262F\u2638-\u263A\u2640\u2642\u2648-\u2653\u265F\u2660\u2663\u2665\u2666\u2668\u267B\u267E\u267F\u2692\u2694-\u2697\u2699\u269B\u269C\u26A0\u26A7\u26AA\u26B0\u26B1\u26BD\u26BE\u26C4\u26C8\u26CF\u26D1\u26D3\u26E9\u26F0-\u26F5\u26F7\u26F8\u26FA\u2702\u2708\u2709\u270F\u2712\u2714\u2716\u271D\u2721\u2733\u2734\u2744\u2747\u2757\u2763\u27A1\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B55\u3030\u303D\u3297\u3299]\uFE0F?|[\u261D\u270C\u270D](?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?|[\u270A\u270B](?:\uD83C[\uDFFB-\uDFFF])?|[\u23E9-\u23EC\u23F0\u23F3\u25FD\u2693\u26A1\u26AB\u26C5\u26CE\u26D4\u26EA\u26FD\u2705\u2728\u274C\u274E\u2753-\u2755\u2795-\u2797\u27B0\u27BF\u2B50]|\u26F9(?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|\u2764\uFE0F?(?:\u200D(?:\uD83D\uDD25|\uD83E\uDE79))?|\uD83C(?:[\uDC04\uDD70\uDD71\uDD7E\uDD7F\uDE02\uDE37\uDF21\uDF24-\uDF2C\uDF36\uDF7D\uDF96\uDF97\uDF99-\uDF9B\uDF9E\uDF9F\uDFCD\uDFCE\uDFD4-\uDFDF\uDFF5\uDFF7]\uFE0F?|[\uDF85\uDFC2\uDFC7](?:\uD83C[\uDFFB-\uDFFF])?|[\uDFC3\uDFC4\uDFCA](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDFCB\uDFCC](?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDCCF\uDD8E\uDD91-\uDD9A\uDE01\uDE1A\uDE2F\uDE32-\uDE36\uDE38-\uDE3A\uDE50\uDE51\uDF00-\uDF20\uDF2D-\uDF35\uDF37-\uDF7C\uDF7E-\uDF84\uDF86-\uDF93\uDFA0-\uDFC1\uDFC5\uDFC6\uDFC8\uDFC9\uDFCF-\uDFD3\uDFE0-\uDFF0\uDFF8-\uDFFF]|\uDDE6\uD83C[\uDDE8-\uDDEC\uDDEE\uDDF1\uDDF2\uDDF4\uDDF6-\uDDFA\uDDFC\uDDFD\uDDFF]|\uDDE7\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEF\uDDF1-\uDDF4\uDDF6-\uDDF9\uDDFB\uDDFC\uDDFE\uDDFF]|\uDDE8\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDEE\uDDF0-\uDDF5\uDDF7\uDDFA-\uDDFF]|\uDDE9\uD83C[\uDDEA\uDDEC\uDDEF\uDDF0\uDDF2\uDDF4\uDDFF]|\uDDEA\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDED\uDDF7-\uDDFA]|\uDDEB\uD83C[\uDDEE-\uDDF0\uDDF2\uDDF4\uDDF7]|\uDDEC\uD83C[\uDDE6\uDDE7\uDDE9-\uDDEE\uDDF1-\uDDF3\uDDF5-\uDDFA\uDDFC\uDDFE]|\uDDED\uD83C[\uDDF0\uDDF2\uDDF3\uDDF7\uDDF9\uDDFA]|\uDDEE\uD83C[\uDDE8-\uDDEA\uDDF1-\uDDF4\uDDF6-\uDDF9]|\uDDEF\uD83C[\uDDEA\uDDF2\uDDF4\uDDF5]|\uDDF0\uD83C[\uDDEA\uDDEC-\uDDEE\uDDF2\uDDF3\uDDF5\uDDF7\uDDFC\uDDFE\uDDFF]|\uDDF1\uD83C[\uDDE6-\uDDE8\uDDEE\uDDF0\uDDF7-\uDDFB\uDDFE]|\uDDF2\uD83C[\uDDE6\uDDE8-\uDDED\uDDF0-\uDDFF]|\uDDF3\uD83C[\uDDE6\uDDE8\uDDEA-\uDDEC\uDDEE\uDDF1\uDDF4\uDDF5\uDDF7\uDDFA\uDDFF]|\uDDF4\uD83C\uDDF2|\uDDF5\uD83C[\uDDE6\uDDEA-\uDDED\uDDF0-\uDDF3\uDDF7-\uDDF9\uDDFC\uDDFE]|\uDDF6\uD83C\uDDE6|\uDDF7\uD83C[\uDDEA\uDDF4\uDDF8\uDDFA\uDDFC]|\uDDF8\uD83C[\uDDE6-\uDDEA\uDDEC-\uDDF4\uDDF7-\uDDF9\uDDFB\uDDFD-\uDDFF]|\uDDF9\uD83C[\uDDE6\uDDE8\uDDE9\uDDEB-\uDDED\uDDEF-\uDDF4\uDDF7\uDDF9\uDDFB\uDDFC\uDDFF]|\uDDFA\uD83C[\uDDE6\uDDEC\uDDF2\uDDF3\uDDF8\uDDFE\uDDFF]|\uDDFB\uD83C[\uDDE6\uDDE8\uDDEA\uDDEC\uDDEE\uDDF3\uDDFA]|\uDDFC\uD83C[\uDDEB\uDDF8]|\uDDFD\uD83C\uDDF0|\uDDFE\uD83C[\uDDEA\uDDF9]|\uDDFF\uD83C[\uDDE6\uDDF2\uDDFC]|\uDFF3\uFE0F?(?:\u200D(?:\u26A7\uFE0F?|\uD83C\uDF08))?|\uDFF4(?:\u200D\u2620\uFE0F?|\uDB40\uDC67\uDB40\uDC62\uDB40(?:\uDC65\uDB40\uDC6E\uDB40\uDC67|\uDC73\uDB40\uDC63\uDB40\uDC74|\uDC77\uDB40\uDC6C\uDB40\uDC73)\uDB40\uDC7F)?)|\uD83D(?:[\uDC08\uDC26](?:\u200D\u2B1B)?|[\uDC3F\uDCFD\uDD49\uDD4A\uDD6F\uDD70\uDD73\uDD76-\uDD79\uDD87\uDD8A-\uDD8D\uDDA5\uDDA8\uDDB1\uDDB2\uDDBC\uDDC2-\uDDC4\uDDD1-\uDDD3\uDDDC-\uDDDE\uDDE1\uDDE3\uDDE8\uDDEF\uDDF3\uDDFA\uDECB\uDECD-\uDECF\uDEE0-\uDEE5\uDEE9\uDEF0\uDEF3]\uFE0F?|[\uDC42\uDC43\uDC46-\uDC50\uDC66\uDC67\uDC6B-\uDC6D\uDC72\uDC74-\uDC76\uDC78\uDC7C\uDC83\uDC85\uDC8F\uDC91\uDCAA\uDD7A\uDD95\uDD96\uDE4C\uDE4F\uDEC0\uDECC](?:\uD83C[\uDFFB-\uDFFF])?|[\uDC6E\uDC70\uDC71\uDC73\uDC77\uDC81\uDC82\uDC86\uDC87\uDE45-\uDE47\uDE4B\uDE4D\uDE4E\uDEA3\uDEB4-\uDEB6](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDD74\uDD90](?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?|[\uDC00-\uDC07\uDC09-\uDC14\uDC16-\uDC25\uDC27-\uDC3A\uDC3C-\uDC3E\uDC40\uDC44\uDC45\uDC51-\uDC65\uDC6A\uDC79-\uDC7B\uDC7D-\uDC80\uDC84\uDC88-\uDC8E\uDC90\uDC92-\uDCA9\uDCAB-\uDCFC\uDCFF-\uDD3D\uDD4B-\uDD4E\uDD50-\uDD67\uDDA4\uDDFB-\uDE2D\uDE2F-\uDE34\uDE37-\uDE44\uDE48-\uDE4A\uDE80-\uDEA2\uDEA4-\uDEB3\uDEB7-\uDEBF\uDEC1-\uDEC5\uDED0-\uDED2\uDED5-\uDED7\uDEDC-\uDEDF\uDEEB\uDEEC\uDEF4-\uDEFC\uDFE0-\uDFEB\uDFF0]|\uDC15(?:\u200D\uD83E\uDDBA)?|\uDC3B(?:\u200D\u2744\uFE0F?)?|\uDC41\uFE0F?(?:\u200D\uD83D\uDDE8\uFE0F?)?|\uDC68(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D(?:[\uDC68\uDC69]\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?)|\uD83E[\uDDAF-\uDDB3\uDDBC\uDDBD])|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFC-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB\uDFFD-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB-\uDFFD\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?\uDC68\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D\uDC68\uD83C[\uDFFB-\uDFFE])))?))?|\uDC69(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:\uDC8B\u200D\uD83D)?[\uDC68\uDC69]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D(?:[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?|\uDC69\u200D\uD83D(?:\uDC66(?:\u200D\uD83D\uDC66)?|\uDC67(?:\u200D\uD83D[\uDC66\uDC67])?))|\uD83E[\uDDAF-\uDDB3\uDDBC\uDDBD])|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFC-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB\uDFFD-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB-\uDFFD\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D\uD83D(?:[\uDC68\uDC69]|\uDC8B\u200D\uD83D[\uDC68\uDC69])\uD83C[\uDFFB-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83D[\uDC68\uDC69]\uD83C[\uDFFB-\uDFFE])))?))?|\uDC6F(?:\u200D[\u2640\u2642]\uFE0F?)?|\uDD75(?:\uFE0F|\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|\uDE2E(?:\u200D\uD83D\uDCA8)?|\uDE35(?:\u200D\uD83D\uDCAB)?|\uDE36(?:\u200D\uD83C\uDF2B\uFE0F?)?)|\uD83E(?:[\uDD0C\uDD0F\uDD18-\uDD1F\uDD30-\uDD34\uDD36\uDD77\uDDB5\uDDB6\uDDBB\uDDD2\uDDD3\uDDD5\uDEC3-\uDEC5\uDEF0\uDEF2-\uDEF8](?:\uD83C[\uDFFB-\uDFFF])?|[\uDD26\uDD35\uDD37-\uDD39\uDD3D\uDD3E\uDDB8\uDDB9\uDDCD-\uDDCF\uDDD4\uDDD6-\uDDDD](?:\uD83C[\uDFFB-\uDFFF])?(?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDDDE\uDDDF](?:\u200D[\u2640\u2642]\uFE0F?)?|[\uDD0D\uDD0E\uDD10-\uDD17\uDD20-\uDD25\uDD27-\uDD2F\uDD3A\uDD3F-\uDD45\uDD47-\uDD76\uDD78-\uDDB4\uDDB7\uDDBA\uDDBC-\uDDCC\uDDD0\uDDE0-\uDDFF\uDE70-\uDE7C\uDE80-\uDE88\uDE90-\uDEBD\uDEBF-\uDEC2\uDECE-\uDEDB\uDEE0-\uDEE8]|\uDD3C(?:\u200D[\u2640\u2642]\uFE0F?|\uD83C[\uDFFB-\uDFFF])?|\uDDD1(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83E\uDDD1))|\uD83C(?:\uDFFB(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFC-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFC(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB\uDFFD-\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFD(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFE(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB-\uDFFD\uDFFF]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?|\uDFFF(?:\u200D(?:[\u2695\u2696\u2708]\uFE0F?|\u2764\uFE0F?\u200D(?:\uD83D\uDC8B\u200D)?\uD83E\uDDD1\uD83C[\uDFFB-\uDFFE]|\uD83C[\uDF3E\uDF73\uDF7C\uDF84\uDF93\uDFA4\uDFA8\uDFEB\uDFED]|\uD83D[\uDCBB\uDCBC\uDD27\uDD2C\uDE80\uDE92]|\uD83E(?:[\uDDAF-\uDDB3\uDDBC\uDDBD]|\uDD1D\u200D\uD83E\uDDD1\uD83C[\uDFFB-\uDFFF])))?))?|\uDEF1(?:\uD83C(?:\uDFFB(?:\u200D\uD83E\uDEF2\uD83C[\uDFFC-\uDFFF])?|\uDFFC(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB\uDFFD-\uDFFF])?|\uDFFD(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB\uDFFC\uDFFE\uDFFF])?|\uDFFE(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB-\uDFFD\uDFFF])?|\uDFFF(?:\u200D\uD83E\uDEF2\uD83C[\uDFFB-\uDFFE])?))?)$/
+
+export function isEmoji(str) {
+  return !/\w/.test(str) && PATTERN_EMOJI.test(str)
+}
+
 export function bech32prefix(bech32) {
   if (!bech32 || bech32.length < 4) return
   return bech32.substr(0, 4).toLowerCase()