🔧 ProfileLink, ScrollTopButton, HotTable & SalesTable

components/hot/HotTable.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <Loader :value="$fetchState.pending" />
+    <Loader :value="pending" />
     <NeoTable
-      :data="data"
+      :data="hot"
       hoverable
       class="hot-sticky-header"
       td-class="is-vcentered">
@@ -32,85 +32,75 @@
       </NeoTableColumn>
 
       <template #empty>
-        <div v-if="!$fetchState.pending" class="w-100 has-text-centered">
+        <div v-if="!pending" class="w-100 has-text-centered">
           {{ $t('spotlight.empty') }}
         </div>
-        <NeoSkeleton :active="$fetchState.pending" />
+        <NeoSkeleton :active="pending" />
       </template>
     </NeoTable>
   </div>
 </template>
 
-<script lang="ts">
-import { Component, mixins } from 'nuxt-property-decorator'
+<script setup lang="ts">
 import hotNfts from '@/queries/rmrk/subsquid/hotNfts.graphql'
 import formatDistanceToNow from 'date-fns/formatDistanceToNow'
 import groupBy from 'lodash/groupBy'
 import sortBy from 'lodash/sortBy'
-import { RowHot, SubsquidHotNft } from './types'
 import { NeoSkeleton, NeoTable, NeoTableColumn } from '@kodadot1/brick'
-
-import PrefixMixin from '~/utils/mixins/prefixMixin'
-import ChainMixin from '@/utils/mixins/chainMixin'
 import formatBalance from '@/utils/format/balance'
 import { getVolume } from '@/utils/math'
 import { lastweekDate } from '@/components/series/utils'
 
-const components = {
-  NeoSkeleton,
-  NeoTable,
-  NeoTableColumn,
-}
+const hot = ref([])
+const { $apollo } = useNuxtApp()
+const { client } = usePrefix()
+const { decimals } = useChain()
+
+const { pending } = useLazyAsyncData('data', async () => {
+  const data = await fetchHotNfts()
+  const collectionMap = groupBy(data, 'nft.collection.id')
+  const sortOrder = [...new Set(data.map((e) => e.nft.collection.id))]
+  const result = sortOrder.map((colId, idx) => {
+    const collection = collectionMap[colId][0].nft.collection
+    const nfts = sortBy(collectionMap[colId], 'timestamp').reverse()
+    const totalVolume = toKSM(getVolume(nfts))
+    const buys = nfts.length
+    const latestSale = nfts[0]
+    const medianIdx = Math.floor(buys / 2)
+    return {
+      id: idx + 1,
+      collectionId: colId,
+      name: collection.name,
+      totalVolume,
+      buys,
+      latestSoldSize: toKSM(latestSale.meta),
+      latestSoldTime: formatDistanceToNow(new Date(latestSale.timestamp)),
+      medianDate: formatDistanceToNow(new Date(nfts[medianIdx].timestamp)),
+      nfts,
+    }
+  })
 
-@Component({
-  components,
+  hot.value = result
 })
-export default class HotTable extends mixins(PrefixMixin, ChainMixin) {
-  protected data: RowHot[] = []
-  private toKSM(amount) {
-    return formatBalance(amount, this.decimals, '')
-  }
 
-  async fetch() {
-    const data = await this.fetchHotNfts()
-    const collectionMap = groupBy(data, 'nft.collection.id')
-    const sortOrder = [...new Set(data.map((e) => e.nft.collection.id))]
-    const result: RowHot[] = sortOrder.map((colId, idx) => {
-      const collection = collectionMap[colId][0].nft.collection
-      const nfts = sortBy(collectionMap[colId], 'timestamp').reverse()
-      const totalVolume = this.toKSM(getVolume(nfts))
-      const buys = nfts.length
-      const latestSale = nfts[0]
-      const medianIdx = Math.floor(buys / 2)
-      return {
-        id: idx + 1,
-        collectionId: colId,
-        name: collection.name,
-        totalVolume,
-        buys,
-        latestSoldSize: this.toKSM(latestSale.meta),
-        latestSoldTime: formatDistanceToNow(new Date(latestSale.timestamp)),
-        medianDate: formatDistanceToNow(new Date(nfts[medianIdx].timestamp)),
-        nfts,
-      }
-    })
-    this.data = result
-  }
+const toKSM = (amount) => {
+  return formatBalance(amount, decimals.value, '')
+}
 
-  public async fetchHotNfts(): Promise<[SubsquidHotNft]> {
-    const {
-      data: { result },
-    } = await this.$apollo.query({
-      query: hotNfts,
-      client: this.client,
-      variables: {
-        gte: lastweekDate,
-      },
-    })
-    return result
-  }
+const fetchHotNfts = async () => {
+  const {
+    data: { result },
+  } = await $apollo.query({
+    query: hotNfts,
+    client: client.value,
+    variables: {
+      gte: lastweekDate,
+    },
+  })
+  return result
 }
 </script>
+
 <style lang="scss" scoped>
 @import '@/styles/abstracts/variables';
 

components/rmrk/Profile/ProfileLink.vue

@@ -7,7 +7,7 @@
       link="u">
       <Identity v-if="address" :address="address" />
       <template #extra>
-        <Avatar :size="avatarSize || 24" :value="address" class="mr-2" />
+        <Avatar :size="avatarSize" :value="address" class="mr-2" />
       </template>
     </LinkResolver>
     <template v-if="showTwitter">
@@ -21,30 +21,17 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, mixins } from 'nuxt-property-decorator'
-import PrefixMixin from '@/utils/mixins/prefixMixin'
-import shortAddress from '@/utils/shortAddress'
+<script setup lang="ts">
+import Identity from '@/components/identity/IdentityIndex.vue'
 
-const components = {
-  Identity: () => import('@/components/identity/IdentityIndex.vue'),
-  LinkResolver: () => import('@/components/shared/LinkResolver.vue'),
-}
-
-@Component({ components })
-export default class ProfileLink extends mixins(PrefixMixin) {
-  @Prop() public address!: string
-  @Prop(Boolean) public showTwitter!: boolean
-  @Prop(Boolean) public showDiscord!: boolean
-  @Prop() public avatarSize!: number
-  get shortendId(): string {
-    return shortAddress(this.address)
-  }
+const { urlPrefix } = usePrefix()
 
-  get verticalAlign(): boolean {
-    return this.showTwitter
-  }
-}
+defineProps({
+  address: { type: String, default: '' },
+  showTwitter: { type: Boolean, default: false },
+  showDiscord: { type: Boolean, default: false },
+  avatarSize: { type: Number, default: 24 },
+})
 </script>
 
 <style scoped>

components/shared/ScrollTopButton.vue

@@ -1,45 +1,34 @@
 <template>
-  <a
+  <button
     v-if="showBtn"
     class="scroll-top-button button is-justify-content-center"
     @click="scrollToTop">
     <NeoIcon icon="chevron-up" />
-  </a>
+  </button>
 </template>
 
-<script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
-import { Debounce } from 'vue-debounce-decorator'
+<script setup lang="ts">
 import { SHOW_SCROLL_TOP_BUTTON_HEIGHT } from '@/utils/constants'
 import { NeoIcon } from '@kodadot1/brick'
 
-@Component({
-  components: {
-    NeoIcon,
-  },
-})
-export default class ScrollTopButton extends Vue {
-  public showBtn = false
-
-  protected mounted() {
-    window.addEventListener('scroll', this.onScroll)
-  }
+const showBtn = ref(false)
 
-  protected beforeDestroy() {
-    window.removeEventListener('scroll', this.onScroll)
-  }
+onMounted(() => {
+  window.addEventListener('scroll', onScroll)
+})
+onBeforeMount(() => {
+  window.removeEventListener('scroll', onScroll)
+})
 
-  @Debounce(100)
-  protected onScroll(): void {
-    this.showBtn =
-      document.documentElement.scrollTop > SHOW_SCROLL_TOP_BUTTON_HEIGHT
-  }
+const onScroll = () => {
+  showBtn.value =
+    document.documentElement.scrollTop > SHOW_SCROLL_TOP_BUTTON_HEIGHT
+}
 
-  public scrollToTop = () => {
-    window.scroll({
-      top: 0,
-      behavior: 'smooth',
-    })
-  }
+const scrollToTop = () => {
+  window.scroll({
+    top: 0,
+    behavior: 'smooth',
+  })
 }
 </script>

styles/components/_scroll-to-top-button.scss

@@ -1,6 +1,6 @@
 .scroll-top-button {
   position: fixed !important;
-  right: 24px;
+  right: 42px;
   bottom: 100px;
   width: 35px;
   height: 35px !important;