refactor: Identity - Vue Composition API

components/rmrk/Profile/ProfileLink.vue

@@ -5,13 +5,18 @@
       :route="`/${urlPrefix}/u`"
       :param="address"
       link="u">
-      <Identity :address="address" :inline="true" :vertical-align="true" />
+      <Identity
+        v-if="address"
+        :address="address"
+        :inline="true"
+        :vertical-align="true" />
       <template #extra>
         <Avatar :size="24" :value="address" class="mr-2" />
       </template>
     </LinkResolver>
     <template v-if="showTwitter">
       <Identity
+        v-if="address"
         :address="address"
         :show-twitter="showTwitter"
         :show-discord="showDiscord"

components/shared/identity/IdentityChain.vue

@@ -9,13 +9,13 @@
         src="/infinity.svg"
         class="ml-1 infinity-loader" />
       <template v-else>
-        <span v-if="identity.display" class="ml-1"
-          >({{ identity.display }})</span
-        >
+        <span v-if="identity?.display" class="ml-1">
+          ({{ identity?.display }})
+        </span>
       </template>
     </span>
-    <template v-else-if="!hideIdentityPopover">
-      <IdentityPopover :identity="{ ...identity, address }">
+    <template v-else-if="!hideIdentityPopover && !isMobileDevice">
+      <IdentityPopover v-if="address">
         <template #trigger>
           {{ name }}
         </template>
@@ -27,30 +27,26 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
+<script lang="ts" setup>
 import { GenericAccountId } from '@polkadot/types/generic/AccountId'
-
-import { emptyObject } from '@/utils/empty'
+import { isMobileDevice } from '@/utils/extension'
 
 type IdentityFields = Record<string, string>
 type Address = string | GenericAccountId | undefined
 
-const components = {
-  IdentityPopover: () =>
-    import('@/components/shared/identity/popover/IdentityPopover.vue'),
-}
+const IdentityPopover = defineAsyncComponent(
+  () => import('@/components/shared/identity/popover/IdentityPopover.vue')
+)
 
-@Component({ components })
-export default class IdentityChain extends Vue {
-  @Prop() readonly showOnchainIdentity!: boolean
-  @Prop() readonly hideIdentityPopover!: boolean
-  @Prop() readonly isFetchingIdentity!: boolean
-  @Prop({ default: emptyObject<IdentityFields>() }) readonly identity
-  @Prop() readonly address!: Address
-  @Prop() readonly shortenedAddress!: Address
-  @Prop() readonly name!: Address
-}
+defineProps<{
+  showOnchainIdentity?: boolean
+  hideIdentityPopover?: boolean
+  isFetchingIdentity?: boolean
+  identity?: IdentityFields
+  address?: Address
+  shortenedAddress?: string
+  name?: string | object
+}>()
 </script>
 
 <style scoped>

components/shared/identity/IdentityIndex.vue

@@ -1,6 +1,5 @@
 <template>
-  <component
-    :is="is"
+  <div
     v-if="
       ((showTwitter && twitter) || !showTwitter) &&
       ((showDiscord && discord) || !showDiscord)
@@ -21,154 +20,59 @@
       :address="address"
       :shortened-address="shortenedAddress"
       :name="name" />
-  </component>
+  </div>
 </template>
 
-<script lang="ts">
-import { Component, Emit, Prop, Watch, mixins } from 'nuxt-property-decorator'
-import { get, update } from 'idb-keyval'
-import { hexToString, isHex } from '@polkadot/util'
-import { Data } from '@polkadot/types'
+<script lang="ts" setup>
 import { GenericAccountId } from '@polkadot/types/generic/AccountId'
-import { onApiConnect } from '@kodadot1/sub-api'
+import { defineEmits } from '#app'
 
-import InlineMixin from '@/utils/mixins/inlineMixin'
-import UseApiMixin from '@/utils/mixins/useApiMixin'
-
-import { emptyObject } from '@/utils/empty'
-import { identityStore } from '@/utils/idbStore'
-import shortAddress from '@/utils/shortAddress'
-import shouldUpdate from '@/utils/shouldUpdate'
+import useIdentity from './useIdentity'
 
 type Address = string | GenericAccountId | undefined
-type IdentityFields = Record<string, string>
-
-const components = {
-  IdentitySocial: () =>
-    import('@/components/shared/identity/IdentitySocial.vue'),
-  IdentityChain: () => import('@/components/shared/identity/IdentityChain.vue'),
-}
-
-@Component({ components })
-export default class Identity extends mixins(InlineMixin, UseApiMixin) {
-  @Prop() public address!: Address
-  @Prop(Boolean) public verticalAlign!: boolean
-  @Prop(Boolean) public noOwerflow!: boolean
-  @Prop(Boolean) public emit!: boolean
-  @Prop(Boolean) public showTwitter!: boolean
-  @Prop(Boolean) public showDiscord!: boolean
-  @Prop(Boolean) public showOnchainIdentity!: boolean
-  @Prop(Boolean) public hideIdentityPopover!: boolean
-  @Prop(String) public customNameOption!: string
-  public identity: IdentityFields = emptyObject<IdentityFields>()
-  public isFetchingIdentity = false
-
-  get shortenedAddress(): Address {
-    return shortAddress(this.resolveAddress(this.address))
-  }
-
-  get name(): Address {
-    if (this.customNameOption) {
-      return this.customNameOption
-    }
-    const name = this.identity.display
-    if (name?.length > 20) {
-      return shortAddress(name)
-    }
-    return (name as string) || this.shortenedAddress
-  }
-
-  get twitter(): Address {
-    const twitter = this.identity.twitter
-    return (twitter as string) || ''
-  }
-
-  get discord(): Address {
-    return this.identity?.discord
-  }
-
-  @Watch('address', { immediate: true })
-  async watchAddress(newAddress: Address, oldAddress: Address) {
-    if (shouldUpdate(newAddress, oldAddress)) {
-      this.identityOf(newAddress).then((id) => (this.identity = id))
-    }
-  }
-
-  protected mounted() {
-    onApiConnect(this.apiUrl, async () => {
-      this.identity = await this.identityOf(this.resolveAddress(this.address))
-    })
-  }
-
-  public async identityOf(account: Address): Promise<IdentityFields> {
-    if (!account) {
-      return Promise.resolve(emptyObject<IdentityFields>())
-    }
-
-    const address: string = this.resolveAddress(account)
-    const identity = await get(address, identityStore)
-
-    if (!identity) {
-      return await this.fetchIdentity(address)
-    }
-
-    if (this.emit) {
-      this.emitIdentityChange(identity)
-    }
-
-    return identity
-  }
-
-  private handleRaw(display: Data): string {
-    if (display?.isRaw) {
-      return display.asRaw.toHuman() as string
-    }
-
-    if (isHex((display as any)?.Raw)) {
-      return hexToString((display as any)?.Raw)
-    }
-
-    return display?.toString()
-  }
-
-  private resolveAddress(account: Address): string {
-    return account instanceof GenericAccountId
-      ? account.toString()
-      : account || ''
-  }
-
-  protected async fetchIdentity(address: string): Promise<IdentityFields> {
-    this.isFetchingIdentity = true
-    const api = await this.useApi()
-
-    const optionIdentity = await api?.query.identity?.identityOf(address)
-    const identity = optionIdentity?.unwrapOrDefault()
-
-    if (!identity?.size) {
-      this.isFetchingIdentity = false
-      return emptyObject<IdentityFields>()
-    }
-
-    const final = Array.from(identity.info)
-      .filter(([, value]) => !Array.isArray(value) && !value.isEmpty)
-      .reduce((acc, [key, value]) => {
-        acc[key] = this.handleRaw(value as unknown as Data)
-        return acc
-      }, {} as IdentityFields)
-
-    update(address, () => final, identityStore)
-    this.isFetchingIdentity = false
-
-    if (this.emit) {
-      this.emitIdentityChange(final)
-    }
-
-    return final
-  }
 
-  @Emit('change')
-  emitIdentityChange(final: IdentityFields) {
-    return final
+const IdentitySocial = defineAsyncComponent(
+  () => import('@/components/shared/identity/IdentitySocial.vue')
+)
+const IdentityChain = defineAsyncComponent(
+  () => import('@/components/shared/identity/IdentityChain.vue')
+)
+
+const props = defineProps<{
+  address?: Address
+  emit?: boolean
+  showTwitter?: boolean
+  showDiscord?: boolean
+  showOnchainIdentity?: boolean
+  hideIdentityPopover?: boolean
+  customNameOption?: string
+  inline?: boolean
+}>()
+
+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/shared/identity/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>