7k6 - changelog

dashboard/src/App.vue

@@ -11,6 +11,7 @@ import { cryptoWaitReady } from '@polkadot/util-crypto';
 import keyring from '@polkadot/ui-keyring';
 import Navbar from './components/Navbar.vue';
 import isShareMode from '@/utils/isShareMode'
+import coingecko from '@/coingecko'
 
 @Component<Dashboard>({
   metaInfo() {
@@ -67,8 +68,24 @@ export default class Dashboard extends Vue {
     console.log('keyring loaded');
   }
 
+  public async getKsmPrice(): Promise<void> {
+    try {
+      const { data } = await coingecko.get(`/simple/price`, {
+        params: {
+          ids: 'kusama',
+          vs_currencies: 'usd'
+        }
+      })
+
+      this.$store.dispatch('setFiatPrice', data);
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
   public mounted(): void {
     this.mountWasmCrypto();
+    this.getKsmPrice();
   }
 
   get isNavbarVisible() {

dashboard/src/components/landing/Landing.vue

@@ -186,6 +186,15 @@
                     {{ $t('Traverse to the prime show') }}
                   </a>
                 </h2>
+                <h2 class="title">
+                  <a href="https://medium.com/kodadot/client-first-nft-gallery-technical-examination-33db09dfdc97" target="_blank">
+                    <b-icon
+                      pack="fab"
+                      icon="medium">
+                    </b-icon>
+                    {{ $t('Client-first NFT gallery: Technical examination') }}
+                  </a>
+                </h2>
                 </div>
               </div>
 

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

@@ -27,13 +27,21 @@
                   <img
                     :src="placeholder"
                     :data-src="nft.image"
+                    :data-type="nft.type"
                     :alt="nft.name"
                     class="lazyload gallery__image"
                     @error="onError"
                   />
                 </figure>
-                <span v-if="nft.price" class="card-image__price">
-                  <Money :value="nft.price" inline />
+                <span
+                  v-if="nft.price"
+                  class="card-image__price"
+                >
+                    <Money
+                      :value="nft.price"
+                      showFiatValue="usd"
+                      inline
+                    />
                 </span>
               </div>
 
@@ -86,7 +94,6 @@ import GalleryCardList from './GalleryCardList.vue'
 import Search from './Search/SearchBar.vue'
 import Money from '@/components/shared/format/Money.vue'
 import { basicFilter, basicAggQuery, expandedFilter } from './Search/query'
-import axios from 'axios'
 import Freezeframe from 'freezeframe'
 import 'lazysizes'
 import { SearchQuery } from './Search/types';
@@ -112,7 +119,7 @@ export default class Gallery extends Vue {
   public async mounted() {
     const rmrkService = getInstance();
 
-    // this.setFreezeframe()
+    this.setFreezeframe()
 
     if (!rmrkService) {
       return;
@@ -123,6 +130,7 @@ export default class Gallery extends Vue {
       .then(sanitizeObjectArray)
       .then(mapPriceToNumber)
       .then(defaultSortBy);
+
       // this.collectionMeta();
     } catch (e) {
       console.warn(e);
@@ -141,9 +149,8 @@ export default class Gallery extends Vue {
   setFreezeframe() {
     document.addEventListener('lazybeforeunveil', async (e) => {
       const target = e.target as Image
-      const src = target.dataset.src as string
-      const image = await axios.head(src)
-      const isGif = image.headers['content-type'] === 'image/gif'
+      const type = target.dataset.type as string
+      const isGif = type === 'image/gif'
 
       if (isGif && !target.ffInitialized) {
         const ff = new Freezeframe(target, {

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

@@ -85,6 +85,7 @@ import 'markdown-it-vue/dist/markdown-it-vue-light.css'
 import { NFTWithMeta, NFT } from '../service/scheme';
 import { sanitizeIpfsUrl } from '../utils';
 import { emptyObject } from '@/utils/empty';
+import { formatBalance } from '@polkadot/util';
 
 import AvailableActions from './AvailableActions.vue';
 import { notificationTypes, showNotification } from '@/utils/notification';
@@ -104,6 +105,7 @@ type NFTType =  NFTWithMeta;
 
 @Component<GalleryItem>({
   metaInfo() {
+    const image = `https://og-image-green-seven.vercel.app/${encodeURIComponent(this.nft.name as string)}.png?price=${this.nft.price ? Vue.filter('formatBalance')(this.nft.price, 12, 'KSM') : ''}&image=${(this.nft.image as string)}`;
     return {
       meta: [
         {
@@ -114,13 +116,13 @@ type NFTType =  NFTWithMeta;
         { property: 'og:type', content: 'website'},
         { property: 'og:title', content: (this.nft.name as string) },
         { property: 'og:description', content: (this.nft.description as string) },
-        { property: 'og:image', content: (this.nft.image as string) },
+        { property: 'og:image', content: (image)},
         { property: 'og:video', content: (this.nft.image as string) },
         { property: 'twitter:card', content: 'summary_large_image' },
         { property: 'twitter:site', content: '@KodaDot' },
         { property: 'twitter:title', content: (this.nft.name as string) },
         { property: 'twitter:description', content: (this.nft.description as string) },
-        { property: 'twitter:image', content: (this.nft.image as string) },
+        { property: 'twitter:image', content: (image)},
       ]
     }
   },

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

@@ -25,7 +25,7 @@
         </template>
         <div class="card-content">
           <div class="content">
-            <p class="title is-size-4 has-text-success">
+            <p v-if="carbonlessBadge" class="title is-size-4 has-text-success">
               {{ $t('nft.carbonless') }} 「🌱」
             </p>
             <p class="title is-size-4">

dashboard/src/components/rmrk/Gallery/Search/query.ts

@@ -37,6 +37,7 @@ export const basicAggregation = (): Aggregator => {
         id: { $first: '$id' },
         image: { $first: '$image' },
         price: { $first: '$price' },
+        type: { $first: '$type' },
         count: { $sum: 1 }
       }
     }

dashboard/src/components/shared/format/Money.vue

@@ -42,14 +42,22 @@ export default class Money extends Vue {
 
   private async getFiatValue() {
     try {
-      const { data } = await coingecko.get(`/simple/price`, {
-        params: {
-          ids: this.coinId,
-          vs_currencies: this.showFiatValue
-        }
-      })
-      // 420 * 10 ** 12
-      this.fiatValue = data[this.coinId][this.showFiatValue] * Number(this.value)
+      const price = this.$store.state.fiatPrice[this.coinId][this.showFiatValue]
+
+      if (price) {
+        this.fiatValue = price * Number(this.value)
+      } else {
+        const { data } = await coingecko.get(`/simple/price`, {
+          params: {
+            ids: this.coinId,
+            vs_currencies: this.showFiatValue
+          }
+        })
+
+        // 420 * 10 ** 12
+        this.fiatValue = data[this.coinId][this.showFiatValue] * Number(this.value)
+        this.$store.dispatch('setFiatPrice', data);
+      }
     } catch (error) {
       console.log(error)
     }

dashboard/src/main.ts

@@ -20,6 +20,7 @@ import VueSocialSharing from 'vue-social-sharing'
 Vue.use(MetaInfo)
 Vue.use(AudioVisual)
 Vue.use(VueSocialSharing)
+
 import Connector from '@vue-polkadot/vue-api';
 import { client, keyInfo } from '@/textile'
 import { createInstance, getInstance, migrateCollection, migrateNFT } from '@/components/rmrk/service/RmrkService'

dashboard/src/store.ts

@@ -106,6 +106,11 @@ export default new Vuex.Store({
     explorerOptions: {},
     development: {},
     error: null,
+    fiatPrice: {
+      kusama: {
+        usd: null
+      }
+    }
   },
   mutations: {
     keyringLoaded(state: any) {
@@ -132,6 +137,14 @@ export default new Vuex.Store({
     setError(state: any, error: Error) {
       state.loading = false;
       state.error = error.message;
+    },
+    setFiatPrice(state: any, data) {
+      state.fiatPrice = Object.assign({}, state.fiatPrice, data)
+    }
+  },
+  actions: {
+    setFiatPrice({ commit }: any, data) {
+      commit('setFiatPrice', data);
     }
   },
   getters: {