Merge pull request #115 from kodadot/main

Three items in gallery and new ipfs gateway in links

Author: yangwao

dashboard/src/components/rmrk/Gallery/Gallery.vue

@@ -14,7 +14,7 @@
     <div>
       <div class="columns is-multiline">
         <div
-          class="column is-one-quarter-desktop is-one-third-tablet"
+          class="column is-4"
           v-for="nft in nfts"
           :key="nft.id"
         >

dashboard/src/components/rmrk/Gallery/GalleryItem.vue

@@ -154,7 +154,7 @@ export default class GalleryItem extends Vue {
         ...nft,
         ...meta,
         image: sanitizeIpfsUrl(meta.image || ''),
-        animation_url: sanitizeIpfsUrl(meta.animation_url || '')
+        animation_url: sanitizeIpfsUrl(meta.animation_url || '', 'pinata')
       };
       if (this.nft.animation_url) {
         const { headers } = await api.head(this.nft.animation_url);

dashboard/src/components/rmrk/utils.ts

@@ -82,15 +82,15 @@ export const fetchRmrkMeta = async (
   return emptyObject<CollectionMetadata>();
 };
 
-export const sanitizeIpfsUrl = (ipfsUrl: string) => {
+export const sanitizeIpfsUrl = (ipfsUrl: string, provider?: string) => {
   const rr = /^ipfs:\/\/ipfs/;
   if (rr.test(ipfsUrl)) {
-    return ipfsUrl.replace('ipfs://', 'https://cloudflare-ipfs.com/');
+    return ipfsUrl.replace('ipfs://', resolveProvider(provider));
   }
 
   const r = /^ipfs:\/\//;
   if (r.test(ipfsUrl)) {
-    return ipfsUrl.replace('ipfs://', 'https://cloudflare-ipfs.com/ipfs/');
+    return ipfsUrl.replace('ipfs://', `${resolveProvider(provider)}ipfs/`);
   }
 
   return ipfsUrl;