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 { artGenModeEnabled } = useArtGenMode()
 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 (artGenModeEnabled.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,

components/items/ItemsGrid/useItemsGrid.ts

@@ -19,6 +19,7 @@ const DEFAULT_RESET_SEARCH_QUERY_PARAMS = [
   'max',
   'owned',
   'collections',
+  'art_gen',
 ]
 
 const EXCLUDED_TOKEN_USE_PAGES = [
@@ -51,7 +52,7 @@ export function useFetchSearch({
       isAssetHub.value
       && !EXCLUDED_TOKEN_USE_PAGES.includes(route.name as string),
   )
-
+  const { artGenModeEnabled } = useArtGenMode()
   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,
+      ...(artGenModeEnabled.value ? { kind: 'genart' } : {}),
+
     }
 
     const nftQueryVariables = search?.length
@@ -177,6 +180,14 @@ export function useFetchSearch({
           priceMax: Number(route.query.max),
         }
 
+    if (artGenModeEnabled.value) {
+      nftQueryVariables.search.push({
+        collection: {
+          kind_eq: 'genart',
+        },
+      })
+    }
+
     const queryVariables = useTokens.value
       ? { ...defaultSearchVariables, ...tokenQueryVariables }
       : { ...defaultSearchVariables, ...nftQueryVariables }

components/profile/CollectionFilter.vue

@@ -112,7 +112,12 @@ const getProfileCollections = async () => {
   const { data } = await useAsyncQuery({
     query: collectionListWithSearch,
     variables: {
-      search: [collectionSearch],
+      search: [
+        collectionSearch,
+        {
+          kind_eq: 'genart',
+        },
+      ],
       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'),
+  art_gen: $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?.art_gen?.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, art_gen: artGen, ...restStatusFilters, ...priceRangeFilter })
   }
   emit('resetPage')
   closeFilterModal()

components/shared/filters/modules/AdvancedFilter.vue

@@ -14,6 +14,20 @@
           />
         </NeoCheckbox>
       </NeoField>
+      <NeoField v-if="artGenModeFeatureEnabled">
+        <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 { artGenModeFeatureEnabled } = useArtGenMode()
 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?.art_gen?.toString() === 'true',
+    set: value => applyToUrl({ art_gen: String(value) }),
+  })
+  : computed({
+    get: () => exploreFiltersStore.artGen,
+    set: value => exploreFiltersStore.setArtGen(value),
+  })
+
 const applyToUrl = (queryCondition: Record<string, string>) => {
   replaceURL(queryCondition)
   emit('resetPage')

composables/useArtGenMode.ts

@@ -0,0 +1,21 @@
+import { useExploreFiltersStore } from '@/stores/exploreFilters'
+
+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 exploreFiltersStore = useExploreFiltersStore()
+  const artGenModeFeatureEnabled = computed(() => isArtGenDomain && enabledPrefix.includes(urlPrefix.value) && enabledOnPages.includes(route.name as string ?? ''))
+  return {
+    artGenModeEnabled: computed(() =>
+      artGenModeFeatureEnabled.value && exploreFiltersStore.artGen,
+    ),
+    artGenModeFeatureEnabled,
+  }
+}

libs/static/src/indexers.ts

@@ -11,11 +11,16 @@ export const INDEXERS: Config<SquidEndpoint> = {
   rmrk: 'https://squid.subsquid.io/rubick/graphql',
   ksm: 'https://ksm.gql.api.kodadot.xyz/',
   ahk: 'https://ahk.gql.api.kodadot.xyz/',
-  ahp: 'https://ahp.gql.api.kodadot.xyz/',
+
+  // todo: all url should be changed back once deployed
+  ahp: 'https://kodadot.squids.live/speck/v/v14/graphql',
+  // 'https://ahp.gql.api.kodadot.xyz/',
   dot: 'https://squid.subsquid.io/rubick/graphql', // TODO: change to dot indexer when available
   imx: 'https://squid.subsquid.io/flick/graphql',
-  base: 'https://kodadot.squids.live/basick/graphql',
-  mnt: 'https://squid.subsquid.io/flock/graphql',
+  base: 'https://kodadot.squids.live/basick/v/v13/graphql',
+  // 'https://kodadot.squids.live/basick/graphql',
+  mnt: 'https://kodadot.squids.live/flock/v/v3/graphql',
+  // 'https://squid.subsquid.io/flock/graphql',
   // ahr: 'https://squid.subsquid.io/snack/graphql',
   // movr: 'https://squid.subsquid.io/antick/v/001-rc0/graphql',
   // glmr: 'https://squid.subsquid.io/click/v/002/graphql',

locales/en.json

@@ -1478,6 +1478,7 @@
     "mint": "Mint",
     "transfer": "Transfer",
     "artView": "Art View",
+    "artGen": "Generative Art",
     "offer": "Offer",
     "verified": "Verified",
     "onlyVerifiedIdentities": "Only Verified Identities",

pages/[prefix]/explore/items.vue

@@ -46,12 +46,18 @@ definePageMeta({
   layout: 'explore-layout',
   middleware: [
     function (to) {
-      if (to.query.listed === undefined) {
+      const extraQuery = ['listed', 'art_gen'].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

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/constants.ts

@@ -42,7 +42,7 @@ export const URLS = {
     rubick: 'https://squid.subsquid.io/rubick/graphql',
     marck: 'https://ksm.gql.api.kodadot.xyz/',
     stick: 'https://ahk.gql.api.kodadot.xyz/',
-    speck: 'https://ahp.gql.api.kodadot.xyz/',
+    speck: 'https://kodadot.squids.live/speck/v/v14/graphql', // todo: change back to ` 'https://ahp.gql.api.kodadot.xyz/',`
     polkassembly: 'https://squid.subsquid.io/polkadot-polkassembly/graphql',
     replicate: 'https://replicate.kodadot.workers.dev/',
     search: 'https://polysearch.w.kodadot.xyz',

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,
 )