feat: Display NFT time value (#906)

aeternity · Sep 13, 2024 · 9740453 · 9740453
1 parent 49fbb43
commit 9740453
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 3 deletions.
diff --git a/src/components/NftsTable.vue b/src/components/NftsTable.vue
@@ -8,6 +8,12 @@
             {{ nftsHints.collectionName }}
           </hint-tooltip>
         </th>
+        <th>
+          Created
+          <hint-tooltip>
+            {{ nftsHints.created }}
+          </hint-tooltip>
+        </th>
         <th>
           Owners
           <hint-tooltip>
@@ -37,6 +43,11 @@
             {{ nft.name }}
           </app-link>
         </td>
+        <td class="nfts-table__data">
+          <block-time-cell
+            :height="nft.blockHeight"
+            :timestamp="nft.creationTime"/>
+        </td>
         <td class="nfts-table__data">
           {{ nft.nftOwners }}
         </td>

diff --git a/src/components/NftsTableCondensed.vue b/src/components/NftsTableCondensed.vue
@@ -21,6 +21,21 @@
           </td>
         </tr>
 
+        <tr class="nfts-table-condensed__row">
+          <th class="nfts-table-condensed__header">
+            <app-tooltip>
+              Created
+              <template #tooltip>
+                {{ nftsHints.created }}
+              </template>
+            </app-tooltip>
+          </th>
+          <td class="nfts-table-condensed__data">
+            <block-time-cell
+              :height="nft.blockHeight"
+              :timestamp="nft.creationTime"/>
+          </td>
+        </tr>
         <tr class="nfts-table-condensed__row">
           <th class="nfts-table-condensed__header">
             <app-tooltip>

diff --git a/src/stores/nfts.js b/src/stores/nfts.js
@@ -6,7 +6,7 @@ export const useNftsStore = defineStore('nfts', () => {
   const { MIDDLEWARE_URL } = useRuntimeConfig().public
   const axios = useAxios()
 
-  const nfts = ref(null)
+  const rawNfts = ref(null)
   const nftsCount = ref(null)
 
   function fetchNfts(queryParameters) {
@@ -16,13 +16,20 @@ export const useNftsStore = defineStore('nfts', () => {
     ])
   }
 
+
+  const nfts = computed(() => {
+    return rawNfts.value
+      ? adaptNfts(rawNfts.value)
+      : null
+  })
+
   async function fetchNftsList({ queryParameters, limit } = {}) {
-    nfts.value = null
+    rawNfts.value = null
     const defaultParameters = `/v3/aex141?limit=${limit || 10}&direction=backward&by=creation`
     const { data } = await axios.get(
       `${MIDDLEWARE_URL}${queryParameters || defaultParameters}`,
     )
-    nfts.value = data
+    rawNfts.value = data
   }
 
   async function fetchNftsCount() {

diff --git a/src/utils/adapters.js b/src/utils/adapters.js
@@ -606,6 +606,25 @@ export function adaptNft(nft) {
   }
 }
 
+export function adaptNfts(nfts) {
+  const formattedData = nfts.data
+    .map(nft => {
+      return {
+        name: nft.name,
+        blockHeight: nft.blockHeight,
+        creationTime: DateTime.fromMillis(nft.creationTime),
+        contractId: nft.contractId,
+        nftsAmount: nft.nftsAmount,
+        nftOwners: nft.nftOwners,
+      }
+    })
+  return {
+    next: nfts.next,
+    data: formattedData,
+    prev: nfts.prev,
+  }
+}
+
 export function adaptVerificationDetail(verificationDetail) {
   return {
     license: verificationDetail.license,

diff --git a/src/utils/hints/nftsHints.js b/src/utils/hints/nftsHints.js
@@ -2,6 +2,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.',
+  created: 'Keyblock height and estimated date and time when the NFT was created.',
   amount: 'Amount of NFTs in the collection.',
   smartContractId: 'Identifier of the smart contract that implements the AEX-141 non-fungible token standard.',
   extensions: 'Extensions that are implemented for this NFT according to the creator of the smart contract.',