Flexed last things

Author: vikiival

src/components/rmrk/Create/PermaMint.vue

@@ -24,7 +24,7 @@
             label="Drop your NFT here or click to upload. We support various media types (BMP, GIF, JPEG, PNG, SVG, TIFF, WEBP)"
             expanded
             preview
-            accept="image/png, image/jpeg, image/gif"
+            accept="image/png, image/jpeg, image/gif, video/quicktime, image/svg+xml"
           />
 
           <b-field grouped :label="$i18n.t('Name')">
@@ -207,7 +207,7 @@ export default class PermaMint extends Mixins(
   private nsfw: boolean = false;
   private price: number = 0;
   private estimated: string = '';
-  private hasCarbonOffset: boolean = true;
+  private hasCarbonOffset: boolean = false;
   protected arweaveUpload = false;
 
   protected updateMeta(value: number) {
@@ -432,16 +432,19 @@ export default class PermaMint extends Mixins(
       throw new ReferenceError('No file found!');
     }
 
+    const { name, description } = this.rmrkMint
+
     this.meta = {
-      ...this.rmrkMint,
+      description,
       ...this.meta,
+      name,
       attributes: [
-        ...(this.rmrkMint?.tags || []),
+        ...(this.rmrkMint?.tags.map(t => t.trait_type ? t : ({ ...t, trait_type: '' })) || []),
         ...this.nsfwAttribute(),
         ...this.offsetAttribute()
       ],
       external_url: `https://nft.kodadot.xyz`,
-      type: this.file.type
+      type: this.file.type,
     };
 
     try {

src/components/rmrk/Gallery/GalleryItem.vue

@@ -119,7 +119,7 @@ import { Component, Vue } from 'vue-property-decorator';
 // import MarkdownItVueLight from 'markdown-it-vue';
 import 'markdown-it-vue/dist/markdown-it-vue-light.css'
 import { NFT, NFTMetadata, Emote } from '../service/scheme';
-import { sanitizeIpfsUrl, resolveMedia } from '../utils';
+import { sanitizeIpfsUrl, resolveMedia, isIpfsUrl, sanitizeArweaveUrl, getSanitizer } from '../utils';
 import { emptyObject } from '@/utils/empty';
 
 import AvailableActions from './AvailableActions.vue';
@@ -232,10 +232,14 @@ export default class GalleryItem extends Vue {
 
     if (this.nft['metadata'] && !this.meta['image']) {
       const m = await get(this.nft.metadata)
-      const meta = m ? m : await fetchNFTMetadata(this.nft, 'permafrost')
+
+      const meta = m ? m : await fetchNFTMetadata(this.nft, getSanitizer(this.nft.metadata, undefined, 'permafrost'));
+      console.log(meta);
+
+      const imageSanitizer = getSanitizer(meta.image);
       this.meta = {
         ...meta,
-        image: sanitizeIpfsUrl(meta.image || '', 'arweave'),
+        image: imageSanitizer(meta.image),
         animation_url: sanitizeIpfsUrl(meta.animation_url || '', 'pinata')
       }
 

src/components/rmrk/utils.ts

@@ -16,7 +16,7 @@ import { justHash } from '@/utils/ipfs';
 export const SQUARE = '::'
 export const DEFAULT_IPFS_PROVIDER = 'https://ipfs.io/';
 
-export type ProviderKeyType = IPFSProviders | ArweaveProviders
+export type ProviderKeyType = IPFSProviders
 export type ArweaveProviders = 'permafrost' | 'arweave'
 export type IPFSProviders = 'pinata' | 'cloudflare' | 'ipfs' | 'dweb' | 'kodadot'
 
@@ -29,10 +29,12 @@ export const ipfsProviders: Record<IPFSProviders, string> = {
 }
 
 export const arweaveProviders: Record<ArweaveProviders, string> = {
-  permafrost: process.env.FROST_URL + '/meta/',
-  arweave: 'https://arweave.net/',
+  permafrost: process.env.VUE_APP_PERMAFROST_URL + '/meta/',
+  arweave: process.env.VUE_APP_AR_URL || 'https://arweave.net/',
 }
 
+export type SanitizerFunc = (url: string) => string
+
 
 
 export const ipfsHashToUrl = (ipfsHash?: string, provider?: ProviderKeyType) => {
@@ -43,7 +45,8 @@ export const ipfsHashToUrl = (ipfsHash?: string, provider?: ProviderKeyType) =>
   return ipfsHash
 }
 
-const resolveProvider = (key: ProviderKeyType = 'kodadot'): string => ipfsProviders[key as IPFSProviders] || arweaveProviders[key as ArweaveProviders]
+const resolveProvider = (key: ProviderKeyType = 'kodadot'): string => ipfsProviders[key]
+const resolveArProvider = (key: ArweaveProviders = 'arweave'): string => arweaveProviders[key]
 
 export const zip = <T1, T2, T3>(a: T1[], b: T2[], cb?: (el: (T1 | T2)[]) => T3): T3[] | (T1 | T2)[][] => {
   const res = a.map((k, i) => [k, b[i]]);
@@ -65,19 +68,19 @@ export const fetchCollectionMetadata = (
 
 export const fetchNFTMetadata = (
   rmrk: NFT,
-  provider?: ProviderKeyType
-): Promise<NFTMetadata> => fetchMetadata<NFTMetadata>(rmrk, provider)
+  sanitizer: SanitizerFunc = sanitizeIpfsUrl
+): Promise<NFTMetadata> => fetchMetadata<NFTMetadata>(rmrk, sanitizer)
 
 export const fetchMetadata = async <T>(
   rmrk: RmrkType | CollectionOrNFT,
-  provider?: ProviderKeyType
+  sanitizer: SanitizerFunc = sanitizeIpfsUrl
 ): Promise<T> => {
   try {
     if (!rmrk.metadata) {
       return emptyObject<T>();
     }
 
-    const { status, data } = await api.get(sanitizeIpfsUrl(rmrk.metadata, provider));
+    const { status, data } = await api.get(sanitizer(rmrk.metadata));
     console.log('IPFS data', status, data);
     if (status < 400) {
       return data as T;
@@ -119,14 +122,27 @@ const unSanitizeUrl = (url: string, prefix: string) => {
 
 const ar = /^ar:\/\//
 
-export const sanitizeArweaveUrl = (url: string, provider?: ProviderKeyType) => {
+export const sanitizeArweaveUrl = (url: string, provider?: ArweaveProviders) => {
   if (ar.test(url)) {
-    return url.replace(ar, provider || 'arweave')
+    return url.replace(ar, resolveArProvider(provider))
   }
 
   return url
 }
 
+export const isIpfsUrl = (url: string) => {
+  return /^ipfs:\/\//.test(url)
+}
+
+
+export const getSanitizer = (url: string, ipfsProvider?: ProviderKeyType, arProvider?: ArweaveProviders): SanitizerFunc => {
+  if (isIpfsUrl(url)) {
+    return link => sanitizeIpfsUrl(link, ipfsProvider)
+  }
+
+  return link => sanitizeArweaveUrl(link, arProvider)
+}
+
 export const sanitizeIpfsUrl = (ipfsUrl: string, provider?: ProviderKeyType) => {
   const rr = /^ipfs:\/\/ipfs/;
   if (rr.test(ipfsUrl)) {
@@ -138,7 +154,7 @@ export const sanitizeIpfsUrl = (ipfsUrl: string, provider?: ProviderKeyType) =>
     return ipfsUrl.replace('ipfs://', `${resolveProvider(provider)}ipfs/`);
   }
 
-  return sanitizeArweaveUrl(ipfsUrl, provider);
+  return sanitizeArweaveUrl(ipfsUrl, provider as ArweaveProviders);
 };
 
 export function sanitizeImage<T extends RmrkWithMetaType>(instance: T, provider?: ProviderKeyType): T {

src/proxy.ts

@@ -125,9 +125,6 @@ export const permaStore = async (nftMeta: NFTMetadata, file: Blob, collection: s
 
   formData.append('collection', collection);
 
-  formData.append('collection', collection);
-  formData.append('instance', '1');
-
   try {
     const { status, data } = await Axios.post(PERMAFROST_URL + '/store', formData, {
       headers: {

src/router/rmrk.ts

@@ -62,7 +62,7 @@ export default [
     component: SimpleMint
   },
   {
-    path: '/rmrk/permamint',
+    path: '/permafrost/create',
     name: 'permafrost',
     component: PermaMint
   },