refactor: Identity - Vue Composition API

components/Navbar.vue

@@ -168,7 +168,7 @@ import { get } from 'idb-keyval'
 
 import BasicImage from '@/components/shared/view/BasicImage.vue'
 import ColorModeButton from '@/components/common/ColorModeButton.vue'
-import Identity from '@/components/shared/identity/IdentityIndex.vue'
+import Identity from '@/components/identity/IdentityIndex.vue'
 import NavbarProfileDropdown from '@/components/rmrk/Profile/NavbarProfileDropdown.vue'
 import Search from '@/components/rmrk/Gallery/Search/SearchBar.vue'
 

components/base/CarouselCardList.vue

@@ -43,8 +43,6 @@
                   <b-icon icon="palette" />
                   <Identity
                     :address="list.issuer"
-                    inline
-                    no-owerlow
                     class="force-clip is-ellipsis" />
                 </div>
               </nuxt-link>
@@ -59,8 +57,6 @@
                   <b-icon icon="money-bill-alt" />
                   <Identity
                     :address="list.currentOwner"
-                    inline
-                    no-overflow
                     class="force-clip is-ellipsis" />
                 </div>
               </nuxt-link>
@@ -93,7 +89,7 @@ import type { CarouselNFT } from './types'
 
 const components = {
   Money: () => import('@/components/shared/format/Money.vue'),
-  Identity: () => import('@/components/shared/identity/IdentityIndex.vue'),
+  Identity: () => import('@/components/identity/IdentityIndex.vue'),
   BasicImage: () => import('@/components/shared/view/BasicImage.vue'),
   PreviewMediaResolver: () =>
     import('@/components/media/PreviewMediaResolver.vue'),

components/bsx/Offer/MyOffer.vue

@@ -35,7 +35,7 @@
         :label="$t('myOffer.caller')"
         sortable>
         <nuxt-link :to="{ name: 'bsx-u-id', params: { id: props.row.caller } }">
-          <Identity :address="props.row.caller" inline no-overflow />
+          <Identity :address="props.row.caller" />
         </nuxt-link>
       </b-table-column>
       <b-table-column
@@ -101,7 +101,7 @@ import acceptableOfferByCurrentOwner from '@/queries/subsquid/bsx/acceptableOffe
 import { Offer, OfferResponse } from './types'
 
 const components = {
-  Identity: () => import('@/components/shared/identity/IdentityIndex.vue'),
+  Identity: () => import('@/components/identity/IdentityIndex.vue'),
   Money: () => import('@/components/shared/format/Money.vue'),
 }
 

components/bsx/Offer/OfferTable.vue

@@ -63,7 +63,7 @@
         :label="$t('offer.caller')"
         sortable>
         <nuxt-link :to="{ name: 'bsx-u-id', params: { id: props.row.caller } }">
-          <Identity :address="props.row.caller" inline no-overflow />
+          <Identity :address="props.row.caller" />
         </nuxt-link>
       </b-table-column>
 
@@ -149,7 +149,7 @@ import { Offer } from './types'
 import OfferMixin from '~/utils/mixins/offerMixin'
 
 const components = {
-  Identity: () => import('@/components/shared/identity/IdentityIndex.vue'),
+  Identity: () => import('@/components/identity/IdentityIndex.vue'),
   Money: () => import('@/components/shared/format/Money.vue'),
   Pagination: () => import('@/components/rmrk/Gallery/Pagination.vue'),
 }

components/bsx/Offer/OffersUserTable.vue

@@ -100,7 +100,7 @@ import { notificationTypes, showNotification } from '@/utils/notification'
 import { Offer } from './types'
 
 const components = {
-  Identity: () => import('@/components/shared/identity/IdentityIndex.vue'),
+  Identity: () => import('@/components/identity/IdentityIndex.vue'),
   Money: () => import('@/components/shared/format/Money.vue'),
   BasicSwitch: () => import('@/components/shared/form/BasicSwitch.vue'),
 }

components/bsx/Offer/StatsOverview.vue

@@ -44,7 +44,7 @@ import { countOf } from '~/utils/countOf'
 import statsForBsx from '~/queries/subsquid/bsx/statsForBsx.graphql'
 
 const components = {
-  Identity: () => import('@/components/shared/identity/IdentityIndex.vue'),
+  Identity: () => import('@/components/identity/IdentityIndex.vue'),
   Money: () => import('@/components/shared/format/Money.vue'),
 }
 

components/identity/IdentityIndex.vue

@@ -0,0 +1,77 @@
+<template>
+  <div
+    v-if="
+      ((showTwitter && twitter) || !showTwitter) &&
+      ((showDiscord && discord) || !showDiscord)
+    "
+    class="is-flex-wrap-wrap is-flex-grow-1">
+    <IdentitySocial
+      v-if="(showTwitter && twitter) || (showDiscord && discord)"
+      :twitter="twitter"
+      :show-twitter="showTwitter"
+      :discord="discord"
+      :show-discord="showDiscord" />
+    <IdentityChain
+      v-else
+      :show-onchain-identity="showOnchainIdentity"
+      :hide-identity-popover="hideIdentityPopover"
+      :is-fetching-identity="isFetchingIdentity"
+      :identity="identity"
+      :address="address"
+      :shortened-address="shortenedAddress"
+      :name="name" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { GenericAccountId } from '@polkadot/types/generic/AccountId'
+import { defineEmits } from '#app'
+
+import useIdentity from './utils/useIdentity'
+
+type Address = string | GenericAccountId | undefined
+
+const IdentitySocial = defineAsyncComponent(
+  () => import('./module/IdentitySocial.vue')
+)
+const IdentityChain = defineAsyncComponent(
+  () => import('./module/IdentityChain.vue')
+)
+
+const props = defineProps<{
+  address?: Address
+  emit?: boolean
+  showTwitter?: boolean
+  showDiscord?: boolean
+  showOnchainIdentity?: boolean
+  hideIdentityPopover?: boolean
+  customNameOption?: string
+}>()
+
+const {
+  identity,
+  isFetchingIdentity,
+  shortenedAddress,
+  twitter,
+  discord,
+  name,
+} = useIdentity({
+  address: props.address,
+  customNameOption: props.customNameOption,
+})
+
+provide('address', props.address)
+provide('shortenedAddress', shortenedAddress.value)
+provide(
+  'identity',
+  computed(() => identity.value)
+)
+
+const emit = defineEmits(['change'])
+
+watch(identity, () => {
+  if (props.emit) {
+    emit('change', identity.value)
+  }
+})
+</script>

components/identity/module/IdentityChain.vue

@@ -0,0 +1,56 @@
+<template v-else>
+  <div>
+    <span
+      v-if="showOnchainIdentity"
+      class="is-inline-flex is-align-items-center">
+      {{ shortenedAddress }}
+      <img
+        v-if="isFetchingIdentity"
+        src="/infinity.svg"
+        class="ml-1 infinity-loader" />
+      <template v-else>
+        <span v-if="identity?.display" class="ml-1">
+          ({{ identity?.display }})
+        </span>
+      </template>
+    </span>
+    <template v-else-if="!hideIdentityPopover && !isMobileDevice">
+      <IdentityPopover v-if="address">
+        <template #trigger>
+          {{ name }}
+        </template>
+      </IdentityPopover>
+    </template>
+    <span v-else>
+      {{ name }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { GenericAccountId } from '@polkadot/types/generic/AccountId'
+import { isMobileDevice } from '@/utils/extension'
+
+type IdentityFields = Record<string, string>
+type Address = string | GenericAccountId | undefined
+
+const IdentityPopover = defineAsyncComponent(
+  () => import('./IdentityPopover.vue')
+)
+
+defineProps<{
+  showOnchainIdentity?: boolean
+  hideIdentityPopover?: boolean
+  isFetchingIdentity?: boolean
+  identity?: IdentityFields
+  address?: Address
+  shortenedAddress?: string
+  name?: string | object
+}>()
+</script>
+
+<style scoped>
+.infinity-loader {
+  height: 20px;
+}
+</style>

components/identity/module/IdentityPopover.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-tippy
+    class="tippy-container"
+    interactive
+    :animate-fill="false"
+    placement="bottom"
+    :delay="[100, 800]"
+    data-cy="identity">
+    <template #trigger>
+      <slot name="trigger" />
+    </template>
+    <div class="popover-content-container p-4 ms-dos-shadow">
+      <IdentityPopoverHeader />
+      <hr style="height: 1px" class="m-0" />
+      <IdentityPopoverFooter />
+    </div>
+  </v-tippy>
+</template>
+
+<script lang="ts" setup>
+const IdentityPopoverHeader = defineAsyncComponent(
+  () => import('./IdentityPopoverHeader.vue')
+)
+const IdentityPopoverFooter = defineAsyncComponent(
+  () => import('./IdentityPopoverFooter.vue')
+)
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/abstracts/variables';
+
+.tippy-container {
+  display: inline-block;
+}
+
+.popover-content-container {
+  border: 2px solid $primary;
+  max-width: 350px;
+}
+
+.ms-dos-shadow {
+  box-shadow: $dropdown-content-shadow;
+}
+</style>

components/shared/identity/popover/IdentityPopoverFooter.vue → components/identity/module/IdentityPopoverFooter.vue

@@ -15,15 +15,13 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
+<script lang="ts" setup>
+import useIdentityStats from '../utils/useIdentityStats'
 
-@Component
-export default class IdentityPopoverFooter extends Vue {
-  @Prop({ required: true, default: 0 }) readonly totalCollected
-  @Prop({ required: true, default: 0 }) readonly totalCreated
-  @Prop({ required: true, default: 0 }) readonly totalSold
-}
+const address = inject('address')
+const { totalCollected, totalCreated, totalSold } = useIdentityStats({
+  address,
+})
 </script>
 
 <style>

components/shared/identity/popover/IdentityPopoverHeader.vue → components/identity/module/IdentityPopoverHeader.vue

@@ -4,16 +4,16 @@
       <Identicon
         :size="60"
         :theme="'polkadot'"
-        :value="identity.address"
+        :value="address"
         class="popover-image avatar mr-5" />
     </div>
     <div class="column is-three-quarters">
       <p class="has-text-weight-bold is-size-5 mb-1 break-word">
-        {{ identity.display }}
+        {{ identity?.display }}
       </p>
       <a
-        v-if="identity.twitter"
-        :href="`https://twitter.com/${identity.twitter}`"
+        v-if="identity?.twitter"
+        :href="`https://twitter.com/${identity?.twitter}`"
         class="is-flex is-align-items-center mb-2"
         target="_blank"
         rel="noopener noreferrer">
@@ -22,13 +22,13 @@
           icon="twitter"
           class="is-flex is-justify-content-space-between" />
         <span>
-          {{ identity.twitter }}
+          {{ identity?.twitter }}
         </span>
       </a>
       <p class="is-size-7 mb-1">
-        {{ address }}
+        {{ shortenedAddress }}
         <b-icon
-          v-clipboard:copy="identity.address"
+          v-clipboard:copy="identity?.address"
           icon="copy"
           size="is-small"
           class="copy-icon"
@@ -50,26 +50,22 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
+<script lang="ts" setup>
 import Identicon from '@polkadot/vue-identicon'
+import useIdentityStats from '../utils/useIdentityStats'
 
-@Component({
-  components: {
-    Identicon,
-  },
-})
-export default class IdentityPopoverHeader extends Vue {
-  @Prop({ required: true, default: {} }) readonly identity
-  @Prop({ required: true, default: '' }) readonly address
-  @Prop({ required: true, default: '' }) readonly startedMinting
-  @Prop({ required: true, default: '' }) readonly lastBought
-  @Prop(Number) readonly totalCreated
-  @Prop(Number) readonly totalCollected
+const address = inject('address')
+const shortenedAddress = inject('shortenedAddress')
+const identity = inject<{ [x: string]: string }>('identity')
 
-  public toast(message: string): void {
-    this.$buefy.toast.open(message)
-  }
+const { totalCollected, totalCreated, startedMinting, lastBought } =
+  useIdentityStats({
+    address,
+  })
+const { $buefy } = useNuxtApp()
+
+const toast = (message: string) => {
+  $buefy.toast.open(message)
 }
 </script>
 

components/shared/identity/IdentitySocial.vue → components/identity/module/IdentitySocial.vue

@@ -20,14 +20,11 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
-
-@Component
-export default class IdentitySocial extends Vue {
-  @Prop({ required: true, default: false }) readonly twitter
-  @Prop({ required: true, default: false }) readonly showTwitter
-  @Prop({ required: true, default: false }) readonly discord
-  @Prop({ required: true, default: false }) readonly showDiscord
-}
+<script lang="ts" setup>
+defineProps<{
+  twitter: string
+  showTwitter: boolean
+  discord: string
+  showDiscord: boolean
+}>()
 </script>