feat: NFTs list (#474)

Co-authored-by: Michele F. <michele-franchi@users.noreply.github.com>
aeternity · Sep 4, 2023 · 6c9c236 · 6c9c236
1 parent f2be1b9
commit 6c9c236
Show file tree

Hide file tree

Showing 8 changed files with 327 additions and 2 deletions.
diff --git a/src/components/NftsPanel.vue b/src/components/NftsPanel.vue
@@ -0,0 +1,67 @@
+<template>
+  <app-panel>
+    <paginated-content
+      v-model:page-index="pageIndex"
+      :entities="nfts"
+      :total-count="nftsCount"
+      :limit="limit"
+      pagination-style="history"
+      @prev-clicked="loadPrevNfts"
+      @next-clicked="loadNextNfts">
+      <nfts-table
+        :nfts="nfts"
+        class="nfts-panel__table"/>
+      <nfts-table-condensed
+        :nfts="nfts"
+        class="nfts-panel__table-condensed"/>
+    </paginated-content>
+  </app-panel>
+</template>
+
+<script setup>
+import { storeToRefs } from 'pinia'
+import { useNftsStore } from '@/stores/nfts'
+import { isDesktop } from '@/utils/screen'
+
+const limit = computed(() => process.client && isDesktop() ? 10 : 3)
+const pageIndex = ref(1)
+
+const nftsStore = useNftsStore()
+const {
+  nfts,
+  nftsCount,
+} = storeToRefs(nftsStore)
+const { fetchNfts, fetchNftsList } = nftsStore
+
+async function loadPrevNfts() {
+  await fetchNftsList({ queryParameters: nfts.value.prev })
+}
+
+async function loadNextNfts() {
+  await fetchNftsList({ queryParameters: nfts.value.next })
+}
+
+if (process.client) {
+  await fetchNfts(
+    `/v2/aex141?limit=${limit}`,
+  )
+}
+
+</script>
+
+<style scoped>
+.nfts-panel {
+  &__table {
+    display: none;
+    @media (--desktop) {
+      display: revert;
+    }
+  }
+
+  &__table-condensed {
+    @media (--desktop) {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/components/NftsTable.vue b/src/components/NftsTable.vue
@@ -0,0 +1,75 @@
+<template>
+  <table class="nfts-table">
+    <thead>
+      <tr>
+        <th>
+          Collection Name
+          <hint-tooltip>
+            {{ nftsHints.collectionName }}
+          </hint-tooltip>
+        </th>
+        <th>
+          Owners
+          <hint-tooltip>
+            {{ nftsHints.owners }}
+          </hint-tooltip>
+        </th>
+        <th>
+          Amount
+          <hint-tooltip>
+            {{ nftsHints.amount }}
+          </hint-tooltip>
+        </th>
+        <th>
+          Smart Contract ID
+          <hint-tooltip>
+            {{ nftsHints.smartContractId }}
+          </hint-tooltip>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="nft in nfts.data"
+        :key="nft.contractId ">
+        <td class="nfts-table__data">
+          <app-link :to="`/nfts/${nft.contractId}`">
+            {{ nft.name }}
+          </app-link>
+        </td>
+        <td class="nfts-table__data">
+          {{ nft.nftOwners }}
+        </td>
+        <td class="nfts-table__data">
+          {{ nft.nftsAmount }}
+        </td>
+        <td class="nfts-table__data">
+          <app-link :to="`/contracts/${nft.contractId}`">
+            {{ formatEllipseHash(nft.contractId) }}
+          </app-link>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup>
+import { nftsHints } from '@/utils/hints/nftsHints'
+
+defineProps({
+  nfts: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
+<style scoped>
+.nfts-table {
+  margin-bottom: var(--space-4);
+
+  &__data {
+    vertical-align: top;
+  }
+}
+</style>
diff --git a/src/components/NftsTableCondensed.vue b/src/components/NftsTableCondensed.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="nfts-table-condensed">
+    <table
+      v-for="nft in nfts.data"
+      :key="nft.contractId"
+      class="nfts-table-condensed__table">
+      <tbody>
+        <tr class="nfts-table-condensed__row">
+          <th class="nfts-table-condensed__header">
+            <app-tooltip>
+              Collection Name
+              <template #tooltip>
+                {{ nftsHints.hash }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="nfts-table-condensed__data">
+            <app-link :to="`/nfts/${nft.contractId}`">
+              {{ nft.name }}
+            </app-link>
+          </td>
+        </tr>
+
+        <tr class="nfts-table-condensed__row">
+          <th class="nfts-table-condensed__header">
+            <app-tooltip>
+              Owners
+              <template #tooltip>
+                {{ nftsHints.owners }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="nfts-table-condensed__data">
+            {{ nft.nftOwners }}
+          </td>
+        </tr>
+
+        <tr class="nfts-table-condensed__row">
+          <th class="nfts-table-condensed__header">
+            <app-tooltip>
+              Amount
+              <template #tooltip>
+                {{ nftsHints.amount }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="nfts-table-condensed__data">
+            {{ nft.nftsAmount }}
+          </td>
+        </tr>
+
+        <tr class="nfts-table-condensed__row">
+          <th class="nfts-table-condensed__header">
+            <app-tooltip>
+              Smart Contract ID
+              <template #tooltip>
+                {{ nftsHints.smartContractId }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="nfts-table-condensed__data">
+            <app-link :to="`/contracts/${nft.contractId}`">
+              {{ formatEllipseHash(nft.contractId) }}
+            </app-link>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+import { nftsHints } from '@/utils/hints/nftsHints'
+
+defineProps({
+  nfts: {
+    type: Object,
+    required: true,
+  },
+})
+</script>
+
+<style scoped>
+.nfts-table-condensed {
+  &__table {
+    padding: 0 var(--space-1) var(--space-7);
+    margin-bottom: var(--space-5);
+  }
+
+  &__header {
+    border-bottom: 1px solid var(--color-midnight-25);
+    padding-right: var(--space-4);
+  }
+
+  &__row:last-of-type &__header {
+    border-bottom: 0;
+  }
+
+  &__data {
+    text-align: right;
+  }
+}
+</style>
diff --git a/src/components/TheNavigation.vue b/src/components/TheNavigation.vue
@@ -43,6 +43,13 @@
           State Channels
         </app-link>
       </li>
+      <li class="navigation__item">
+        <app-link
+          class="navigation__link"
+          to="/nfts">
+          NFTs
+        </app-link>
+      </li>
       <li class="navigation__item">
         <coming-soon-tooltip>
           <app-link

diff --git a/src/components/TransactionsPanel.vue b/src/components/TransactionsPanel.vue
@@ -47,8 +47,13 @@ const selectedTxType = ref(TX_TYPES_OPTIONS[0])
 const limit = computed(() => process.client && isDesktop() ? 10 : 3)
 const pageIndex = ref(1)
 
-const loadPrevTransactions = () => fetchTransactions(transactions.value.prev)
-const loadNextTransactions = () => fetchTransactions(transactions.value.next)
+async function loadPrevTransactions() {
+  await fetchTransactions(transactions.value.prev)
+}
+
+async function loadNextTransactions() {
+  await fetchTransactions(transactions.value.next)
+}
 
 const loadTransactions = () => {
   const { txType } = route.query

diff --git a/src/pages/nfts/index.vue b/src/pages/nfts/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <Head>
+    <Title>{{ APP_TITLE_SHORT }} | NFTs</Title>
+  </Head>
+
+  <page-header>
+    NFTs
+    <template #tooltip>
+      {{ nftsHints.nft }}
+    </template>
+  </page-header>
+
+  <nfts-panel v-if="!isLoading"/>
+  <loader-panel v-else/>
+</template>
+
+<script setup>
+import { nftsHints } from '@/utils/hints/nftsHints'
+
+const { isLoading } = useLoading()
+</script>
diff --git a/src/stores/nfts.js b/src/stores/nfts.js
@@ -0,0 +1,40 @@
+import { defineStore } from 'pinia'
+import { useRuntimeConfig } from 'nuxt/app'
+import useAxios from '@/composables/useAxios'
+
+export const useNftsStore = defineStore('nfts', () => {
+  const { MIDDLEWARE_URL } = useRuntimeConfig().public
+  const axios = useAxios()
+
+  const nfts = ref(null)
+  const nftsCount = ref(null)
+
+  function fetchNfts(queryParameters) {
+    return Promise.allSettled([
+      fetchNftsList(queryParameters),
+      fetchNftsCount(),
+    ])
+  }
+
+  async function fetchNftsList({ queryParameters, limit } = {}) {
+    nfts.value = null
+    const defaultParameters = `/v2/aex141?direction=forward&limit=${limit || 10}`
+    const { data } = await axios.get(
+      `${MIDDLEWARE_URL}${queryParameters || defaultParameters}`,
+    )
+    nfts.value = data
+  }
+
+  async function fetchNftsCount() {
+    nftsCount.value = null
+    const { data } = await axios.get(`${MIDDLEWARE_URL}/v2/aex141/count`)
+    nftsCount.value = data.data
+  }
+
+  return {
+    nftsCount,
+    nfts,
+    fetchNfts,
+    fetchNftsList,
+  }
+})
diff --git a/src/utils/hints/nftsHints.js b/src/utils/hints/nftsHints.js
@@ -0,0 +1,7 @@
+export const nftsHints = {
+  nft: 'A non-fungible token (NFT) is a unit of data stored on a blockchain, that certifies a digital asset to be unique and therefore not interchangeable. NFTs can be used to represent items such as photos, videos, audio, and other types of digital files.',
+  collectionName: 'Name of the NFT collection.',
+  owners: 'Total number of owners of the NFT collection.',
+  amount: 'Amount of NFTs in the collection.',
+  smartContractId: 'Identifier of the smart contract that implements the AEX-141 non-fungible token standard.',
+}