-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: Michele F. <michele-franchi@users.noreply.github.com>
- Loading branch information
1 parent
6c9c236
commit c3fa902
Showing
13 changed files
with
301 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,164 @@ | ||
| <template> | ||
| <app-panel class="nft-details-panel"> | ||
| <template #heading> | ||
| DETAILS | ||
| </template> | ||
| <template #header> | ||
| <copy-chip | ||
| :label="nftDetails.contractId" | ||
| class="nft-details-panel__chip"/> | ||
| <copy-chip | ||
| :label="formatEllipseHash(nftDetails.contractId)" | ||
| :clipboard-text="nftDetails.contractId" | ||
| class="nft-details-panel__chip-ellipse"/> | ||
| </template> | ||
|
|
||
| <table> | ||
| <tbody> | ||
| <tr class="nft-details-panel__row"> | ||
| <th class="nft-details-panel__table-header"> | ||
| Collection Name | ||
| <hint-tooltip> | ||
| {{ nftsHints.collectionName }} | ||
| </hint-tooltip> | ||
| </th> | ||
| <td class="nft-details-panel__data"> | ||
| {{ nftDetails.name }} | ||
| </td> | ||
| </tr> | ||
| <tr class="nft-details-panel__row"> | ||
| <th class="nft-details-panel__table-header"> | ||
| Owners | ||
| <hint-tooltip> | ||
| {{ nftsHints.owners }} | ||
| </hint-tooltip> | ||
| </th> | ||
| <td class="nft-details-panel__data"> | ||
| {{ nftDetails.nftOwners }} | ||
| </td> | ||
| </tr> | ||
| <tr class="nft-details-panel__row"> | ||
| <th class="nft-details-panel__table-header"> | ||
| Amount | ||
| <hint-tooltip> | ||
| {{ nftsHints.amount }} | ||
| </hint-tooltip> | ||
| </th> | ||
| <td class="nft-details-panel__data"> | ||
| {{ nftDetails.nftsAmount }} | ||
| </td> | ||
| </tr> | ||
| <tr | ||
| class="nft-details-panel__row"> | ||
| <th class="nft-details-panel__table-header"> | ||
| Extensions | ||
| <hint-tooltip> | ||
| {{ nftsHints.extensions }} | ||
| </hint-tooltip> | ||
| </th> | ||
| <td class="nft-details-panel__data"> | ||
| <div | ||
| v-if="!!nftDetails.extensions.length" | ||
| class="nft-details-panel__extensions"> | ||
| <app-chip | ||
| v-for="extension in nftDetails.extensions" | ||
| :key="extension" | ||
| size="sm"> | ||
| {{ extension }} | ||
| </app-chip> | ||
| </div> | ||
| <template v-else> | ||
| N/A | ||
| </template> | ||
| </td> | ||
| </tr> | ||
| <tr | ||
| v-if="nftDetails.tokenLimit !== null" | ||
| class="nft-details-panel__row"> | ||
| <th class="nft-details-panel__table-header"> | ||
| Token limit | ||
| <hint-tooltip> | ||
| {{ nftsHints.tokenLimit }} | ||
| </hint-tooltip> | ||
| </th> | ||
| <td class="nft-details-panel__data"> | ||
| {{ nftDetails.tokenLimit }} | ||
| </td> | ||
| </tr> | ||
| <tr | ||
| v-if="nftDetails.templateLimit !== null" | ||
| class="nft-details-panel__row"> | ||
| <th class="nft-details-panel__table-header"> | ||
| Template limit | ||
| <hint-tooltip> | ||
| {{ nftsHints.templateLimit }} | ||
| </hint-tooltip> | ||
| </th> | ||
| <td class="nft-details-panel__data"> | ||
| {{ nftDetails.templateLimit }} | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </app-panel> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import AppPanel from '@/components/AppPanel' | ||
| import { nftsHints } from '@/utils/hints/nftHints' | ||
| defineProps({ | ||
| nftDetails: { | ||
| type: Object, | ||
| required: true, | ||
| }, | ||
| }) | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| .nft-details-panel { | ||
| &__table-header { | ||
| border-bottom: 1px solid var(--color-midnight-25); | ||
| } | ||
| &__data { | ||
| text-align: right; | ||
| } | ||
| &__row:last-of-type &__table-header { | ||
| border-bottom: 0; | ||
| } | ||
| &__link { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| &:first-child { | ||
| margin-right: var(--space-3); | ||
| } | ||
| } | ||
| &__extensions { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| gap: var(--space-1); | ||
| justify-content: flex-end; | ||
| } | ||
| &__chip, | ||
| &__hash { | ||
| display: none; | ||
| @media (--desktop) { | ||
| display: inline-flex; | ||
| } | ||
| } | ||
| &__chip-ellipse, | ||
| &__hash-ellipse { | ||
| @media (--desktop) { | ||
| display: none; | ||
| } | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <template> | ||
| <Head> | ||
| <Title>{{ APP_TITLE_SHORT }} | NFT</Title> | ||
| </Head> | ||
|
|
||
| <page-header> | ||
| NFT | ||
| <template #tooltip> | ||
| {{ nftsHints.nft }} | ||
| </template> | ||
| </page-header> | ||
| <template v-if="!isLoading"> | ||
| <nft-details-panel | ||
| v-if="nftDetails" | ||
| :nft-details="nftDetails"/> | ||
| </template> | ||
| <loader-panel v-else/> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { storeToRefs } from 'pinia' | ||
| import { nftsHints } from '@/utils/hints/nftHints' | ||
| import PageHeader from '@/components/PageHeader' | ||
| import { useNftDetailsStore } from '@/stores/nftDetails' | ||
| import NftDetailsPanel from '@/components/NftDetailsPanel' | ||
| const nftDetailsStore = useNftDetailsStore() | ||
| const { nftDetails } = storeToRefs(nftDetailsStore) | ||
| const { fetchNftDetails } = nftDetailsStore | ||
| const route = useRoute() | ||
| const { isLoading } = useLoading() | ||
| try { | ||
| await fetchNftDetails(route.params.id) | ||
| } catch (error) { | ||
| if ([400, 404].includes(error.response?.status)) { | ||
| throw showError({ | ||
| data: { | ||
| entityId: route.params.id, | ||
| entityName: 'NFT', | ||
| }, | ||
| statusMessage: 'EntityDetailsNotFound', | ||
| }) | ||
| } | ||
| throw error | ||
| } | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { defineStore } from 'pinia' | ||
| import { useRuntimeConfig } from 'nuxt/app' | ||
| import useAxios from '@/composables/useAxios' | ||
| import { adaptNftDetails } from '@/utils/adapters' | ||
|
|
||
| export const useNftDetailsStore = defineStore('nftDetails', () => { | ||
| const { MIDDLEWARE_URL } = useRuntimeConfig().public | ||
| const axios = useAxios() | ||
|
|
||
| const rawNftDetails = ref(null) | ||
|
|
||
| const nftDetails = computed(() => { | ||
| return rawNftDetails.value | ||
| ? adaptNftDetails(rawNftDetails.value) | ||
| : null | ||
| }) | ||
|
|
||
| async function fetchNftDetails(contractId) { | ||
| const { data } = await axios.get(`${MIDDLEWARE_URL}/v2/aex141/${contractId}`) | ||
| rawNftDetails.value = data | ||
| } | ||
|
|
||
| return { | ||
| nftDetails, | ||
| fetchNftDetails, | ||
| } | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.