feat: Apply genart filter for Collections on koda.art

components/collection/CollectionGrid.vue

@@ -75,7 +75,7 @@ const route = useRoute()
 const { accountId } = useAuth()
 const { urlPrefix, client } = usePrefix()
 const preferencesStore = usePreferencesStore()
-
+const { genArtModeEnabled } = useGenArtMode()
 const isProfilePage = route.name === 'prefix-u-id'
 const collections = ref<Collection[]>([])
 const loadedPages = ref<number[]>([])
@@ -122,17 +122,22 @@ const getQueryVariables = (page: number) => {
     Object.assign(searchParams, { nftCount_not_eq: 0 })
   }
 
+  const commonParams = {}
+  if (genArtModeEnabled.value) {
+    Object.assign(commonParams, { kind_eq: 'genart' })
+  }
+
   return props.id
     ? {
-        search: [searchParams],
+        search: [{ ...searchParams, ...commonParams }],
         first: first.value,
         offset: (page - 1) * first.value,
         orderBy: searchQuery.sortBy,
       }
     : {
         denyList: getDenyList(urlPrefix.value),
         orderBy: searchQuery.sortBy,
-        search: buildSearchParam(),
+        search: [...buildSearchParam(), commonParams],
         listed: searchQuery.listed ? [{ price: { greaterThan: '0' } }] : [],
         first: first.value,
         offset: (page - 1) * first.value,
@@ -244,7 +249,7 @@ watch(
   { immediate: true },
 )
 
-watch(searchQuery, () => resetPage())
+watch([searchQuery, () => route.query.gen_art], () => resetPage())
 </script>
 
 <style lang="scss" scoped>

components/items/ItemsGrid/useItemsGrid.ts

@@ -19,6 +19,7 @@ const DEFAULT_RESET_SEARCH_QUERY_PARAMS = [
   'max',
   'owned',
   'collections',
+  'gen_art',
 ]
 
 const EXCLUDED_TOKEN_USE_PAGES = [
@@ -51,7 +52,7 @@ export function useFetchSearch({
       isAssetHub.value
       && !EXCLUDED_TOKEN_USE_PAGES.includes(route.name as string),
   )
-
+  const { genArtModeEnabled } = useGenArtMode()
   const items = ref<(NFTWithMetadata | TokenEntity)[]>([])
   const loadedPages = ref([] as number[])
 
@@ -167,6 +168,8 @@ export function useFetchSearch({
       denyList: getDenyList(urlPrefix.value),
       price_lte: Number(route.query.max) || undefined,
       price_gte: Number(route.query.min) || undefined,
+      ...(genArtModeEnabled.value ? { kind: 'genart' } : {}),
+
     }
 
     const nftQueryVariables = search?.length
@@ -177,6 +180,14 @@ export function useFetchSearch({
           priceMax: Number(route.query.max),
         }
 
+    if (genArtModeEnabled.value) {
+      nftQueryVariables.search.push({
+        collection: {
+          kind_eq: 'genart',
+        },
+      })
+    }
+
     const queryVariables = useTokens.value
       ? { ...defaultSearchVariables, ...tokenQueryVariables }
       : { ...defaultSearchVariables, ...nftQueryVariables }

components/profile/CollectionFilter.vue

@@ -112,7 +112,9 @@ const getProfileCollections = async () => {
   const { data } = await useAsyncQuery({
     query: collectionListWithSearch,
     variables: {
-      search: [collectionSearch],
+      search: [
+        collectionSearch,
+      ],
       denyList: getDenyList(urlPrefix.value),
       first: 100,
       offset: 0,

components/shared/BreadcrumbsFilter.vue

@@ -131,6 +131,7 @@ const queryMapTranslation = {
   listed: $i18n.t('sort.listed'),
   owned: $i18n.t('sort.own'),
   art_view: $i18n.t('filters.artView'),
+  gen_art: $i18n.t('filters.artGen'),
   sale: $i18n.t('filters.sale'),
   offer: $i18n.t('filters.offer'),
   listing: $i18n.t('filters.listing'),

components/shared/filters/MobileFilter.vue

@@ -116,11 +116,13 @@ const syncFromUrlOnGrid = () => {
   const listed = route.query?.listed?.toString() === 'true',
     owned = route.query?.owned?.toString() === 'true',
     artView = route.query?.art_view?.toString() === 'true',
+    artGen = route.query?.gen_art?.toString() === 'true',
     collections = getCollectionIds()
 
   exploreFiltersStore.setListed(listed)
   exploreFiltersStore.setOwned(owned)
   exploreFiltersStore.setArtView(artView)
+  exploreFiltersStore.setArtGen(artGen)
   exploreFiltersStore.setCollections(collections)
 }
 
@@ -168,12 +170,14 @@ const resetFilters = () => {
       listed: false,
       owned: false,
       artView: false,
+      artGen: false,
       collections: undefined,
     }
 
     exploreFiltersStore.setListed(statusDefaults.listed)
     exploreFiltersStore.setOwned(statusDefaults.owned)
     exploreFiltersStore.setArtView(statusDefaults.artView)
+    exploreFiltersStore.setArtGen(statusDefaults.artGen)
     exploreFiltersStore.setCollections(statusDefaults.collections)
 
     // price
@@ -195,7 +199,7 @@ const resetFilters = () => {
 
 const applyFilters = () => {
   // status filters
-  const { artView, ...restStatusFilters } = exploreFiltersStore.getStatusFilters
+  const { artView, artGen, ...restStatusFilters } = exploreFiltersStore.getStatusFilters
   const priceRangeFilter = exploreFiltersStore.getPriceRange
   const eventTypeFilter = activityFiltersStore.getEventTypeFilters
 
@@ -204,7 +208,7 @@ const applyFilters = () => {
     replaceUrl({ ...eventTypeFilter, ...priceRangeFilter })
   }
   else {
-    replaceUrl({ art_view: artView, ...restStatusFilters, ...priceRangeFilter })
+    replaceUrl({ art_view: artView, gen_art: artGen, ...restStatusFilters, ...priceRangeFilter })
   }
   emit('resetPage')
   closeFilterModal()

components/shared/filters/modules/AdvancedFilter.vue

@@ -14,6 +14,20 @@
           />
         </NeoCheckbox>
       </NeoField>
+      <NeoField v-if="genArtModeFeatureEnabled">
+        <NeoCheckbox
+          v-model="artGen"
+          data-testid="filter-artgen-checkbox"
+        >
+          <span>{{ $t('filters.artGen') }}</span>
+          <NeoIcon
+            class="ml-2"
+            size="small"
+            icon="puzzle-piece"
+            pack="fal"
+          />
+        </NeoCheckbox>
+      </NeoField>
     </div>
   </div>
 </template>
@@ -38,7 +52,7 @@ const props = withDefaults(
     fluidPadding: false,
   },
 )
-
+const { genArtModeFeatureEnabled } = useGenArtMode()
 const emit = defineEmits(['resetPage'])
 
 const artView
@@ -52,6 +66,16 @@ const artView
       set: value => exploreFiltersStore.setArtView(value),
     })
 
+const artGen = props.dataModel === 'query'
+  ? computed({
+    get: () => route.query?.gen_art?.toString() === 'true',
+    set: value => applyToUrl({ gen_art: String(value) }),
+  })
+  : computed({
+    get: () => exploreFiltersStore.artGen,
+    set: value => exploreFiltersStore.setArtGen(value),
+  })
+
 const applyToUrl = (queryCondition: Record<string, string>) => {
   replaceURL(queryCondition)
   emit('resetPage')

composables/useGenArtMode.ts

@@ -0,0 +1,19 @@
+const enabledOnPages = [
+  'prefix-explore-items', // explore items page
+  'prefix-explore-collectibles', // explore collections page
+]
+
+const enabledPrefix = ['ahp', 'base', 'mnt']
+
+export default function () {
+  const route = useRoute()
+  const { urlPrefix } = usePrefix()
+  const genArtModeFeatureEnabled = computed(() => isArtGenDomain && enabledPrefix.includes(urlPrefix.value) && enabledOnPages.includes(route.name?.toString() ?? ''))
+  const genArtModeEnabled = computed(() =>
+    genArtModeFeatureEnabled.value && route.query.gen_art?.toString() === 'true',
+  )
+  return {
+    genArtModeEnabled,
+    genArtModeFeatureEnabled,
+  }
+}

locales/en.json

@@ -573,6 +573,7 @@
   },
   "filters": {
     "acceptedOffer": "Accepted offer",
+    "artGen": "Generative Art",
     "artView": "Art View",
     "buy": "Buy",
     "identityVerification": "Identity Verification",

pages/[prefix]/explore/collectibles.vue

@@ -40,11 +40,30 @@ definePageMeta({
   layout: 'explore-layout',
   middleware: [
     function (to) {
-      if (to.query.listed !== undefined) {
+      const extraQuery = useGenArtMode().genArtModeFeatureEnabled.value
+        ? ['gen_art'].reduce((acc, key) => {
+            if (to.query[key] === undefined) {
+              acc[key] = 'true'
+            }
+            return acc
+          }, {})
+        : {}
+
+      const excludeQuery = ['listed'].reduce((acc, key) => {
+        if (to.query[key] !== undefined) {
+          acc[key] = undefined
+        }
+        return acc
+      }, {})
+
+      if (Object.keys(extraQuery).length > 0 || Object.keys(excludeQuery).length > 0) {
         return navigateTo({
           path: to.path,
-          query: { ...to.query, listed: undefined },
-        })
+          query: {
+            ...to.query,
+            ...extraQuery,
+            ...excludeQuery,
+          } })
       }
     },
   ],

pages/[prefix]/explore/items.vue

@@ -45,13 +45,21 @@ onBeforeMount(() => checkRouteAvailability())
 definePageMeta({
   layout: 'explore-layout',
   middleware: [
+
     function (to) {
-      if (to.query.listed === undefined) {
+      const extraQuery = (['listed'].concat(useGenArtMode().genArtModeFeatureEnabled.value ? ['gen_art'] : [])).reduce((acc, key) => {
+        if (to.query[key] === undefined) {
+          acc[key] = 'true'
+        }
+        return acc
+      }, {})
+
+      if (Object.keys(extraQuery).length > 0) {
         return navigateTo({
           path: to.path,
           query: {
             ...to.query,
-            listed: 'true',
+            ...extraQuery,
           } })
       }
     },

queries/fragments/collection.graphql

@@ -4,4 +4,5 @@ fragment collection on CollectionEntity {
   issuer
   currentOwner
   blockNumber
+  kind
 }

queries/subsquid/general/tokenListWithSearch.graphql

@@ -9,7 +9,8 @@ query tokenListWithSearch(
   $issuer: String
   $denyList: [String!]
   $collections: [String!]
-  $name: String
+  $name: String,
+  $kind: String
 ) {
   tokenEntities: tokenEntityList(
     owner: $owner
@@ -23,6 +24,7 @@ query tokenListWithSearch(
     price_lte: $price_lte
     collections: $collections
     name: $name
+    kind: $kind
   ) {
     id
     name
@@ -55,6 +57,7 @@ query tokenListWithSearch(
     price_lte: $price_lte
     collections: $collections
     name: $name
+    kind: $kind
   ) {
     totalCount
   }

stores/exploreFilters.ts

@@ -5,6 +5,7 @@ interface State {
   listed: boolean
   owned: boolean
   artView: boolean
+  artGen: boolean
   // price
   min: number | undefined
   max: number | undefined
@@ -18,13 +19,15 @@ export const useExploreFiltersStore = defineStore('exploreFilters', {
     min: undefined,
     max: undefined,
     artView: false,
+    artGen: false,
     collections: undefined,
   }),
   getters: {
     getStatusFilters: state => ({
       listed: state.listed,
       owned: state.owned,
       artView: state.artView,
+      artGen: state.artGen,
       collections: state.collections?.toString(),
     }),
     getPriceRange: state => ({ min: state.min, max: state.max }),
@@ -39,6 +42,9 @@ export const useExploreFiltersStore = defineStore('exploreFilters', {
     setArtView(payload) {
       this.artView = payload
     },
+    setArtGen(payload) {
+      this.artGen = payload
+    },
     setMin(payload) {
       this.min = payload
     },

utils/env.ts

@@ -1,3 +1,10 @@
+// todo: const isArtGenDomain = ['koda.art'].includes(
+// window.location.hostname,
+// )
+export const isArtGenDomain = location.hostname.startsWith('deploy-preview-') || ['koda.art', 'localhost'].includes(
+  window.location.hostname,
+)
+
 export const isProduction = ['kodadot.xyz', 'koda.art'].includes(
   window.location.hostname,
 )