Merge pull request #3082 from kodadot/main

🚑 Passion at explorer feed

README.md

@@ -30,6 +30,7 @@ Test out KodaDot's [Beta](https://beta.kodadot.xyz/)
 - Read about [our progress](https://github.com/kodadot/nft-gallery/discussions/categories/meta-hours) with KodaDot.
 - Read about KodaDot's [newest features](https://docs.kodadot.xyz/writings.html)
 - Read on the ever-evolving states of our [data storage](https://medium.com/kodadot/on-the-past-present-and-future-of-data-storage-at-kodadot-7634a0c32530)
+- Read up on our efforts to be a [public good](https://medium.com/kodadot/on-sustaining-open-source-as-a-public-good-a3e8c36e67d6)
 
 
 # Support KodaDot

components/rmrk/Gallery/Gallery.vue

@@ -5,6 +5,7 @@
     <Search v-bind.sync="searchQuery" @resetPage="resetPage" hideSearchInput>
       <template v-slot:next-filter>
         <b-switch
+          v-if="isLogIn"
           class="gallery-switch"
           v-model="hasPassionFeed"
           :rounded="false">
@@ -118,6 +119,7 @@ import { getSanitizer } from '../utils'
 import { SearchQuery } from './Search/types'
 import shouldUpdate from '~/utils/shouldUpdate'
 import { exist } from '@/components/rmrk/Gallery/Search/exist'
+import { notificationTypes, showNotification } from '@/utils/notification'
 
 import passionQuery from '@/queries/rmrk/subsquid/passionFeed.graphql'
 
@@ -152,11 +154,12 @@ export default class Gallery extends mixins(
     type: '',
     sortBy: 'BLOCK_NUMBER_DESC',
     listed: true,
+    owned: true,
     priceMin: undefined,
     priceMax: undefined,
   }
   private isLoading = true
-  private hasPassionFeed = true
+  private hasPassionFeed = false
   private passionList: string[] = []
 
   get showPriceValue(): boolean {
@@ -198,13 +201,26 @@ export default class Gallery extends mixins(
   }
 
   public async created() {
-    await this.fetchPageData(this.startPage)
-    exist(this.$route.query.hasPassionFeed, (val) => {
-      this.hasPassionFeed = val === 'true'
-    })
+    try {
+      await this.fetchPageData(this.startPage)
+    } catch (e) {
+      showNotification((e as Error).message, notificationTypes.danger)
+    }
     this.onResize()
   }
 
+  async mounted() {
+    // only fetch passionFeed if logged in
+    if (this.isLogIn) {
+      try {
+        this.hasPassionFeed = true
+        await this.fetchPassionList()
+      } catch (e) {
+        showNotification((e as Error).message, notificationTypes.danger)
+      }
+    }
+  }
+
   @Debounce(500)
   private resetPage() {
     this.gotoPage(1)
@@ -396,15 +412,12 @@ export default class Gallery extends mixins(
   }
 
   @Watch('hasPassionFeed')
-  protected onHasPassionFeed() {
-    this.gotoPage(1)
-    this.$router.replace({
-      path: String(this.$route.path),
-      query: {
-        ...this.$route.query,
-        hasPassionFeed: String(this.hasPassionFeed),
-      },
-    })
+  protected async onHasPassionFeed() {
+    try {
+      this.resetPage()
+    } catch (e) {
+      showNotification((e as Error).message, notificationTypes.danger)
+    }
   }
 
   @Watch('searchQuery', { deep: true })

styles/global.scss

@@ -128,7 +128,7 @@ body {
   }
 
   .message.is-primary {
-    background-color: #ffebfa !important;
+    background-color: $primary-light !important;
   }
 
   .button.is-text {

utils/mixins/txMixin.ts

@@ -23,7 +23,7 @@ export default class TransactionMixin extends Vue {
     }
 
     if (status.isFinalized) {
-      this.status = omitFinalized ? '' : 'loading.finalized'
+      this.status = omitFinalized ? '' : 'loader.finalized'
       return
     }