#645 | IPFS NFTs

src/antelope/chains/EVMChainSettings.ts

@@ -1,5 +1,5 @@
 import { RpcEndpoint } from 'universal-authenticator-library';
-import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig, Method } from 'axios';
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, Method } from 'axios';
 import {
     AbiSignature,
     ChainSettings,
@@ -92,7 +92,7 @@ export default abstract class EVMChainSettings implements ChainSettings {
 
         // Interceptor handlers -- these handlers are used to limit the number of concurrent requests
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const requestHandler = (value: InternalAxiosRequestConfig) => new Promise<InternalAxiosRequestConfig<any>>((resolve) => {
+        const requestHandler = (value: any) => new Promise<any>((resolve) => {
             const interval = setInterval(() => {
                 if (pendingRequests < MAX_REQUESTS_COUNT) {
                     pendingRequests++;

src/antelope/chains/NativeChainSettings.ts

@@ -1,4 +1,4 @@
-import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
 import { RpcEndpoint } from 'universal-authenticator-library';
 import {
     Name,
@@ -77,7 +77,7 @@ export default abstract class NativeChainSettings implements ChainSettings {
 
         // Interceptor handlers -- these handlers are used to limit the number of concurrent requests
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const requestHandler = (value: InternalAxiosRequestConfig) => new Promise<InternalAxiosRequestConfig<any>>((resolve) => {
+        const requestHandler = (value: any) => new Promise<any>((resolve) => {
             const interval = setInterval(() => {
                 if (pendingRequests < MAX_REQUESTS_COUNT) {
                     pendingRequests++;

src/antelope/stores/utils/nft-utils.ts

@@ -107,5 +107,35 @@ export async function extractNftMetadata(
         }
     }
 
+    if (metadata?.image?.includes('https://cloudflare-ipfs.com/ipfs/')) {
+        mediaType = await determineIpfsMediaType(metadata?.image);
+
+        if (mediaType === NFTSourceTypes.IMAGE) {
+            image = metadata?.image;
+        }
+        mediaSource = metadata?.image;
+    }
+
     return { image, mediaType, mediaSource };
 }
+
+
+// eztodo docs
+export async function determineIpfsMediaType(url: string): Promise<NftSourceType> {
+    try {
+        const response = await fetch(url);
+        const contentType = response.headers.get('Content-Type') ?? '';
+
+        if (contentType.startsWith('image/')) {
+            return NFTSourceTypes.IMAGE;
+        } else if (contentType.startsWith('video/')) {
+            return NFTSourceTypes.VIDEO;
+        } else if (contentType.startsWith('audio/')) {
+            return NFTSourceTypes.AUDIO;
+        } else {
+            return NFTSourceTypes.UNKNOWN;
+        }
+    } catch (error) {
+        throw new Error('Error determining IPFS media type');
+    }
+}

src/antelope/types/NFTClass.ts

@@ -118,7 +118,7 @@ export async function constructNft(
         console.error('Error parsing metadata', `"${indexerData.metadata}"`, e);
     }
     if (!indexerData.metadata || typeof indexerData.metadata !== 'object') {
-        // we create a new metadata object with the actual string atributes of the item
+        // we create a new metadata object with the actual string attributes of the item
         const list = indexerData as unknown as { [key: string]: unknown };
         indexerData.metadata =
             Object.keys(indexerData)
@@ -129,6 +129,8 @@ export async function constructNft(
                 }, {} as { [key: string]: string });
     }
 
+    indexerData.metadata.image = ((indexerData.metadata.image as string) ?? '').replace('ipfs://', 'https://cloudflare-ipfs.com/ipfs/');
+
     const { image, mediaType, mediaSource } = await extractNftMetadata(indexerData.imageCache ?? '', indexerData.tokenUri ?? '', indexerData.metadata ?? {});
     const commonData: NftPrecursorData = {
         name: (indexerData.metadata?.name ?? '') as string,

src/pages/evm/nfts/NftDetailsPage.vue

@@ -226,16 +226,35 @@ function removeTab(tab: Tab){
             :class="{
                 'c-nft-details__header-container': true,
                 'c-nft-details__header-container--grid': nft !== null || loading,
+                'row': true,
             }"
         >
             <template v-if="loading">
-                <div
-                    v-for="index in 5"
-                    :key="`nft-details-page-${index}`"
-                    class="c-nft-details__header-card c-nft-details__header-card--placeholder"
-                >
-                    <q-skeleton type="rect" class="c-nft-details__header-skeleton" />
+                <div class="col-12">
+                    <div class="row q-col-gutter-sm">
+                        <div class="col-12 col-md-6">
+                            <q-skeleton type="rect" class="c-nft-details__header-skeleton--large" />
+                        </div>
+
+                        <div class="col-12 col-md-6">
+                            <div class="row q-col-gutter-sm">
+                                <div class="col-12">
+                                    <q-skeleton type="rect" class="c-nft-details__header-skeleton" />
+                                </div>
+                                <div class="col-6">
+                                    <q-skeleton type="rect" class="c-nft-details__header-skeleton" />
+                                </div>
+                                <div class="col-6">
+                                    <q-skeleton type="rect" class="c-nft-details__header-skeleton" />
+                                </div>
+                                <div class="col-12">
+                                    <q-skeleton type="rect" class="c-nft-details__header-skeleton" />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
+
             </template>
 
             <template v-else-if="nft === null">
@@ -252,71 +271,84 @@ function removeTab(tab: Tab){
                     :nft="nft"
                     :previewMode="false"
                     :tileMode="true"
-                    class="c-nft-details__viewer"
+                    class="col-12 col-md-6 q-mb-md q-pr-md"
                 />
-                <NftDetailsCard :title="$t('global.collection')" class="c-nft-details__header-card">
-                    <ExternalLink :text="nft.contractPrettyName || nft.contractAddress" :url="contractLink" />
-                </NftDetailsCard>
-
-                <NftDetailsCard :title="$t('global.id')" class="c-nft-details__header-card">
-                    {{ nft.id }}
-                </NftDetailsCard>
-
-                <NftDetailsCard
-                    v-if="isErc721"
-                    :title="$t('global.owner')"
-                    class="c-nft-details__header-card"
-                >
-                    <ExternalLink :text="nftAsErc721.owner" :url="ownerLink" />
-                </NftDetailsCard>
-
-                <NftDetailsCard
-                    v-else
-                    :title="$t('global.owners')"
-                    class="c-nft-details__header-card"
-                >
-                    <ToolTip
-                        :text="Object.keys(nftAsErc1155.owners).length.toLocaleString()"
-                        :hideIcon="true"
-                    >
-                        {{ nftOwnersText }}
-                    </ToolTip>
-                </NftDetailsCard>
-
-                <NftDetailsCard
-                    v-if="nft.description"
-                    :title="$t('global.description')"
-                    class="c-nft-details__header-card"
-                >
-                    {{ nft.description }}
-                </NftDetailsCard>
-
-
-                <NftDetailsCard
-                    v-if="isErc1155 && userAddress"
-                    :title="$t('global.owned_by_you')"
-                    class="c-nft-details__header-card"
-                >
-                    <ToolTip
-                        :text="(nftAsErc1155.owners[userAddress] ?? 0).toLocaleString()"
-                        :hideIcon="true"
-                    >
-                        {{ nftQuantityText }}
-                    </ToolTip>
-                </NftDetailsCard>
-
-                <NftDetailsCard
-                    v-if="isErc1155"
-                    :title="$t('global.total')"
-                    class="c-nft-details__header-card"
-                >
-                    <ToolTip
-                        :text="nftSupplyText"
-                        :hideIcon="true"
-                    >
-                        {{ nftSupplyTextAbbreviated }}
-                    </ToolTip>
-                </NftDetailsCard>
+
+                <div class="col-12 col-md-6">
+                    <div class="row q-col-gutter-sm">
+                        <div class="col-12">
+                            <NftDetailsCard :title="$t('global.collection')" class="c-nft-details__header-card">
+                                <ExternalLink :text="nft.contractPrettyName || nft.contractAddress" :url="contractLink" />
+                            </NftDetailsCard>
+                        </div>
+
+                        <div class="col-6">
+                            <NftDetailsCard :title="$t('global.id')" class="c-nft-details__header-card col-6">
+                                {{ nft.id }}
+                            </NftDetailsCard>
+                        </div>
+
+                        <div class="col-6">
+                            <NftDetailsCard
+                                v-if="isErc721"
+                                :title="$t('global.owner')"
+                                class="c-nft-details__header-card"
+                            >
+                                <ExternalLink :text="nftAsErc721.owner" :url="ownerLink" />
+                            </NftDetailsCard>
+
+                            <NftDetailsCard
+                                v-else
+                                :title="$t('global.owners')"
+                                class="c-nft-details__header-card"
+                            >
+                                <ToolTip
+                                    :text="Object.keys(nftAsErc1155.owners).length.toLocaleString()"
+                                    :hideIcon="true"
+                                >
+                                    {{ nftOwnersText }}
+                                </ToolTip>
+                            </NftDetailsCard>
+                        </div>
+
+                        <div v-if="nft.description" class="col-12">
+                            <NftDetailsCard
+                                :title="$t('global.description')"
+                                class="c-nft-details__header-card"
+                            >
+                                {{ nft.description }}
+                            </NftDetailsCard>
+                        </div>
+
+                        <div v-if="isErc1155 && userAddress" class="col-6">
+                            <NftDetailsCard
+                                :title="$t('global.owned_by_you')"
+                                class="c-nft-details__header-card"
+                            >
+                                <ToolTip
+                                    :text="(nftAsErc1155.owners[userAddress] ?? 0).toLocaleString()"
+                                    :hideIcon="true"
+                                >
+                                    {{ nftQuantityText }}
+                                </ToolTip>
+                            </NftDetailsCard>
+                        </div>
+
+                        <div v-if="isErc1155" class="col-6">
+                            <NftDetailsCard
+                                :title="$t('global.total')"
+                                class="c-nft-details__header-card col-6"
+                            >
+                                <ToolTip
+                                    :text="nftSupplyText"
+                                    :hideIcon="true"
+                                >
+                                    {{ nftSupplyTextAbbreviated }}
+                                </ToolTip>
+                            </NftDetailsCard>
+                        </div>
+                    </div>
+                </div>
             </template>
         </div>
     </template>
@@ -421,34 +453,14 @@ function removeTab(tab: Tab){
 
     &__header-container {
         &--grid {
-            display: grid;
-            grid-template-areas:
-                'a'
-                'b'
-                'c'
-                'd'
-                'e';
-            gap: 8px;
             width: 100%;
 
             @include sm-and-up {
-                grid-template-areas:
-                'a a'
-                'b b'
-                'c d'
-                'e e';
                 max-width: 432px;
             }
 
             @include md-and-up {
-                grid-template-areas:
-                'a a a b b'
-                'a a a c d'
-                'a a a e e'
-                'a a a . .';
                 max-width: 1000px;
-                width: max-content;
-                grid-template-columns: repeat(5, 1fr);
             }
         }
     }
@@ -458,48 +470,19 @@ function removeTab(tab: Tab){
         max-width: 1000px;
     }
 
-    &__viewer {
-        grid-area: a;
-    }
-
     &__header-card {
-        &:nth-of-type(2) {
-            grid-area: b;
-        }
-
-        &:nth-of-type(3) {
-            grid-area: c;
-        }
-
-        &:nth-of-type(4) {
-            grid-area: d;
-        }
-
-        &:nth-of-type(5) {
-            grid-area: e;
-        }
-
-        &--placeholder {
-            margin: auto;
-            height: 80px;
-            width: 100%;
-
-            &:first-of-type {
-                grid-area: a;
-                width: 270px;
-                height: 270px;
-
-                @include md-and-up {
-                    width: 432px;
-                    height: 432px;
-                }
-            }
-        }
+        min-height: 88px;
     }
 
     &__header-skeleton {
-        height: 100%;
+        height: 88px;
         width: 100%;
+
+        &--large {
+            margin: auto;
+            height: 270px;
+            max-width: 270px;
+        }
     }
 
     &__attributes-container {

src/pages/evm/nfts/NftInventoryPage.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, ref, watch, onMounted, onUnmounted, toRaw } from 'vue';
+import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
+import { storeToRefs } from 'pinia';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -18,7 +19,6 @@ import { truncateText } from 'src/antelope/stores/utils/text-utils';
 import EVMChainSettings from 'src/antelope/chains/EVMChainSettings';
 import TableControls from 'components/evm/TableControls.vue';
 import { truncateAddress } from 'src/antelope/stores/utils/text-utils';
-import { storeToRefs } from 'pinia';
 
 
 const nftStore = useNftsStore();
@@ -447,7 +447,7 @@ onUnmounted(() => {
                                 @click="goToDetailPage(props.row)"
                                 @keydown.space.enter.prevent="goToDetailPage(props.row)"
                             >
-                                <template v-if="props.row.image">
+                                <template v-if="props.row.image || props.row.isVideo">
                                     <NftViewer
                                         :nft="getNftForViewer(props.row)"
                                         :previewMode="false"