From 9f08c8876fb73ac4ad5bee7ba23c616c0b3d4d1c Mon Sep 17 00:00:00 2001
From: ismailToyran <ismailtoyran@gmail.com>
Date: Thu, 16 Nov 2023 17:41:56 +0300
Subject: [PATCH 1/9] Collection filter load more added

---
 components/Filter/FilterBy/Collection.tsx | 94 +++++++++++++++++------
 hooks/useSearchCollection.gql             |  8 +-
 2 files changed, 76 insertions(+), 26 deletions(-)

diff --git a/components/Filter/FilterBy/Collection.tsx b/components/Filter/FilterBy/Collection.tsx
index 8e50eff1..7fa50bd9 100644
--- a/components/Filter/FilterBy/Collection.tsx
+++ b/components/Filter/FilterBy/Collection.tsx
@@ -1,24 +1,29 @@
+import { NetworkStatus } from '@apollo/client'
 import {
   AccordionButton,
   AccordionIcon,
   AccordionItem,
   AccordionPanel,
+  Button,
   Heading,
   SkeletonCircle,
   SkeletonText,
   Stack,
   Text,
   VStack,
+  useToast,
 } from '@chakra-ui/react'
 import useTranslation from 'next-translate/useTranslation'
-import { FC, useMemo } from 'react'
+import { FC, useCallback, useMemo } from 'react'
 import { UseFormReturn } from 'react-hook-form'
+import { concatToQuery } from '../../../concat'
 import {
   CollectionFilter,
   StringFilter,
   useSearchCollectionQuery,
 } from '../../../graphql'
 import { Filter } from '../../../hooks/useAssetFilterFromQuery'
+import { formatError } from '../../../utils'
 import CollectionListItem from '../../Collection/ListItem'
 import List, { ListItem } from '../../List/List'
 import SearchInput from '../../SearchInput'
@@ -43,6 +48,8 @@ type Props = {
   onFilterChange: (data?: Partial<Filter>) => void
 }
 
+const PAGINATION_LIMIT = 8
+
 const FilterByCollection: FC<Props> = ({
   formValues: { setValue, watch },
   selectedCollection,
@@ -50,13 +57,18 @@ const FilterByCollection: FC<Props> = ({
   onFilterChange,
 }) => {
   const { t } = useTranslation('components')
+  const toast = useToast()
 
   const filterResult = watch()
 
-  const { data: collectionData } = useSearchCollectionQuery({
+  const {
+    data: collectionData,
+    fetchMore,
+    networkStatus,
+  } = useSearchCollectionQuery({
     variables: {
-      limit: 8,
-      offset: 0,
+      cursor: null,
+      limit: PAGINATION_LIMIT,
       filter: {
         name: {
           includesInsensitive: filterResult.collectionSearch || '',
@@ -66,10 +78,28 @@ const FilterByCollection: FC<Props> = ({
           : {}),
       } as CollectionFilter,
     },
+    notifyOnNetworkStatusChange: true,
     skip: !!selectedCollection,
-    ssr: false,
   })
   const collections = collectionData?.collections?.nodes
+  const hasNextPage = collectionData?.collections?.pageInfo.hasNextPage
+  const endCursor = collectionData?.collections?.pageInfo.endCursor
+
+  const loadMore = useCallback(async () => {
+    try {
+      await fetchMore({
+        variables: {
+          cursor: endCursor,
+        },
+        updateQuery: concatToQuery('collections'),
+      })
+    } catch (e) {
+      toast({
+        title: formatError(e),
+        status: 'error',
+      })
+    }
+  }, [endCursor, fetchMore, toast])
 
   const collection = useMemo(() => {
     if (selectedCollection) return selectedCollection
@@ -145,7 +175,7 @@ const FilterByCollection: FC<Props> = ({
           />
           <List>
             {!collections ? (
-              new Array(8)
+              new Array(PAGINATION_LIMIT)
                 .fill(0)
                 .map((_, index) => (
                   <ListItem
@@ -158,24 +188,40 @@ const FilterByCollection: FC<Props> = ({
                   />
                 ))
             ) : collections.length > 0 ? (
-              collections.map((collection) => (
-                <CollectionListItem
-                  key={`${collection.chainId}-${collection.address}`}
-                  cursor={'pointer'}
-                  rounded="xl"
-                  transition={'background-color 0.3s ease-in-out'}
-                  _hover={{
-                    bgColor: 'brand.50',
-                  }}
-                  onClick={() =>
-                    onFilterChange({
-                      collection: `${collection.chainId}-${collection.address}`,
-                      traits: [],
-                    })
-                  }
-                  collection={collection}
-                />
-              ))
+              <>
+                {collections.map((collection) => (
+                  <CollectionListItem
+                    key={`${collection.chainId}-${collection.address}`}
+                    cursor={'pointer'}
+                    rounded="xl"
+                    transition={'background-color 0.3s ease-in-out'}
+                    _hover={{
+                      bgColor: 'brand.50',
+                    }}
+                    onClick={() =>
+                      onFilterChange({
+                        collection: `${collection.chainId}-${collection.address}`,
+                        traits: [],
+                      })
+                    }
+                    collection={collection}
+                  />
+                ))}
+                {hasNextPage && (
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    isLoading={networkStatus === NetworkStatus.fetchMore}
+                    onClick={loadMore}
+                    width="fit-content"
+                    mx="auto"
+                  >
+                    <Text as="span" isTruncated>
+                      Load more collections
+                    </Text>
+                  </Button>
+                )}
+              </>
             ) : (
               <VStack spacing={1}>
                 <Text variant="subtitle2" color="gray.800" as="span">
diff --git a/hooks/useSearchCollection.gql b/hooks/useSearchCollection.gql
index cba9f7f8..df0209f9 100644
--- a/hooks/useSearchCollection.gql
+++ b/hooks/useSearchCollection.gql
@@ -1,14 +1,18 @@
 query SearchCollection(
   $filter: CollectionFilter!
   $limit: Int!
-  $offset: Int!
+  $cursor: Cursor
 ) {
   collections(
     orderBy: TOTAL_VOLUME_DESC
     first: $limit
-    offset: $offset
     filter: $filter
+    after: $cursor
   ) {
+    pageInfo {
+      hasNextPage
+      endCursor
+    }
     nodes {
       chainId
       address

From a301d5398b890f3870744b7e65d0a2e0a900dd8c Mon Sep 17 00:00:00 2001
From: ismailToyran <ismailtoyran@gmail.com>
Date: Thu, 16 Nov 2023 20:17:32 +0300
Subject: [PATCH 2/9] Split collection and traits

---
 components/Filter/FilterAsset.tsx         |  51 ++--
 components/Filter/FilterBy/Collection.tsx |  69 ++----
 components/Filter/FilterBy/Trait.tsx      | 284 ++++++++++++++--------
 hooks/useFetchCollectionTraits.gql        |  18 +-
 4 files changed, 250 insertions(+), 172 deletions(-)

diff --git a/components/Filter/FilterAsset.tsx b/components/Filter/FilterAsset.tsx
index 2c8183ab..976a63b3 100644
--- a/components/Filter/FilterAsset.tsx
+++ b/components/Filter/FilterAsset.tsx
@@ -7,6 +7,7 @@ import {
   Button,
   Checkbox,
   CheckboxGroup,
+  Divider,
   Flex,
   Heading,
   Stack,
@@ -15,7 +16,7 @@ import {
 } from '@chakra-ui/react'
 import { NextPage } from 'next'
 import useTranslation from 'next-translate/useTranslation'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import { FormProvider, useForm } from 'react-hook-form'
 import { Filter, OfferFilter } from '../../hooks/useAssetFilterFromQuery'
 import useEnvironment from '../../hooks/useEnvironment'
@@ -85,15 +86,28 @@ const FilterAsset: NextPage<Props> = ({
   } = formValues
   const filterResult = watch()
 
+  const collection = useMemo(() => {
+    if (currentCollection) {
+      return {
+        chainId: currentCollection.chainId,
+        address: currentCollection.address,
+      }
+    }
+    if (filterResult.collection) {
+      const [chainId, address] = filterResult.collection.split('-')
+      if (!chainId || !address) return
+      return {
+        chainId: parseInt(chainId, 10),
+        address,
+      }
+    }
+  }, [currentCollection, filterResult.collection])
+
   useEffect(() => {
     reset(filter)
     return () => reset(NoFilter)
   }, [reset, filter])
 
-  const [collection, setCollection] = useState<
-    { chainId: number; address: string } | undefined
-  >(currentCollection)
-
   const propagateFilter = useCallback(
     (data: Partial<Filter> = {}) =>
       onFilterChange({ ...filterResult, ...data }),
@@ -196,18 +210,21 @@ const FilterAsset: NextPage<Props> = ({
             formValues={formValues}
             onFilterChange={propagateFilter}
           />
-          <FilterByCollection
-            formValues={formValues}
-            selectedCollection={currentCollection}
-            onCollectionChange={setCollection}
-            onFilterChange={propagateFilter}
-          />
-          <FilterByTrait
-            collection={collection}
-            filter={filter}
-            formValues={formValues}
-            onFilterChange={onFilterChange}
-          />
+          {!currentCollection && (
+            <FilterByCollection
+              formValues={formValues}
+              onFilterChange={propagateFilter}
+            />
+          )}
+          {currentCollection && <Divider mb={4} />}
+          {collection && (
+            <FilterByTrait
+              collection={collection}
+              filter={filter}
+              formValues={formValues}
+              onFilterChange={onFilterChange}
+            />
+          )}
         </FormProvider>
       </Accordion>
     </Stack>
diff --git a/components/Filter/FilterBy/Collection.tsx b/components/Filter/FilterBy/Collection.tsx
index 7fa50bd9..f0ec47ad 100644
--- a/components/Filter/FilterBy/Collection.tsx
+++ b/components/Filter/FilterBy/Collection.tsx
@@ -30,21 +30,6 @@ import SearchInput from '../../SearchInput'
 
 type Props = {
   formValues: UseFormReturn<Filter, any, undefined>
-  selectedCollection?: {
-    chainId: number
-    address: string
-    name: string
-    image: string | null
-    floorPrice: {
-      valueInRef: string
-      refCode: string
-    } | null
-    totalVolume: {
-      valueInRef: string
-      refCode: string
-    }
-  }
-  onCollectionChange: (data?: { chainId: number; address: string }) => void
   onFilterChange: (data?: Partial<Filter>) => void
 }
 
@@ -52,8 +37,6 @@ const PAGINATION_LIMIT = 8
 
 const FilterByCollection: FC<Props> = ({
   formValues: { setValue, watch },
-  selectedCollection,
-  onCollectionChange,
   onFilterChange,
 }) => {
   const { t } = useTranslation('components')
@@ -79,7 +62,6 @@ const FilterByCollection: FC<Props> = ({
       } as CollectionFilter,
     },
     notifyOnNetworkStatusChange: true,
-    skip: !!selectedCollection,
   })
   const collections = collectionData?.collections?.nodes
   const hasNextPage = collectionData?.collections?.pageInfo.hasNextPage
@@ -102,58 +84,37 @@ const FilterByCollection: FC<Props> = ({
   }, [endCursor, fetchMore, toast])
 
   const collection = useMemo(() => {
-    if (selectedCollection) return selectedCollection
-    if (!filterResult.collection) {
-      onCollectionChange(undefined)
-      return
-    }
+    if (!filterResult.collection) return
     const [chainId, address] = filterResult.collection.split('-')
     if (!chainId || !address) return
     const collection = collections?.find(
       (x) => x.address === address && x.chainId === parseInt(chainId, 10),
     )
-    onCollectionChange(
-      collection ? { chainId: collection.chainId, address } : undefined,
-    )
     return collection
-  }, [
-    collections,
-    filterResult.collection,
-    selectedCollection,
-    onCollectionChange,
-  ])
+  }, [collections, filterResult.collection])
 
   return collection ? (
     <AccordionItem>
       <AccordionButton>
         <Heading variant="heading2" flex="1" textAlign="left">
-          {selectedCollection
-            ? t('filters.assets.properties.label')
-            : t('filters.assets.properties.labelWithCollection')}
+          {t('filters.assets.properties.labelWithCollection')}
         </Heading>
         <AccordionIcon />
       </AccordionButton>
       <AccordionPanel>
         <Stack spacing={3}>
-          {!selectedCollection && (
-            <CollectionListItem
-              width="full"
-              borderColor="brand.500"
-              bgColor="brand.50"
-              borderWidth="1px"
-              borderRadius="md"
-              padding={2}
-              textAlign="left"
-              cursor="pointer"
-              onClick={() => onFilterChange({ collection: null, traits: [] })}
-              collection={collection}
-              closable
-            />
-          )}
-          <SearchInput
-            placeholder={t('filters.assets.properties.search.placeholder')}
-            name="propertySearch"
-            onReset={() => setValue('propertySearch', '')}
+          <CollectionListItem
+            width="full"
+            borderColor="brand.500"
+            bgColor="brand.50"
+            borderWidth="1px"
+            borderRadius="md"
+            padding={2}
+            textAlign="left"
+            cursor="pointer"
+            onClick={() => onFilterChange({ collection: null, traits: [] })}
+            collection={collection}
+            closable
           />
         </Stack>
       </AccordionPanel>
diff --git a/components/Filter/FilterBy/Trait.tsx b/components/Filter/FilterBy/Trait.tsx
index bd9221a5..57dd9e36 100644
--- a/components/Filter/FilterBy/Trait.tsx
+++ b/components/Filter/FilterBy/Trait.tsx
@@ -1,8 +1,11 @@
+import { NetworkStatus } from '@apollo/client'
 import {
+  Accordion,
   AccordionButton,
   AccordionIcon,
   AccordionItem,
   AccordionPanel,
+  Button,
   Checkbox,
   CheckboxGroup,
   Flex,
@@ -11,54 +14,98 @@ import {
   Stack,
   Text,
   VStack,
+  useToast,
 } from '@chakra-ui/react'
+import SearchInput from 'components/SearchInput'
 import useTranslation from 'next-translate/useTranslation'
-import { FC, useCallback, useMemo } from 'react'
+import { FC, useCallback } from 'react'
 import { UseFormReturn } from 'react-hook-form'
-import { useFetchCollectionTraitsQuery } from '../../../graphql'
+import {
+  CollectionTraitFilter,
+  StringFilter,
+  useFetchCollectionTraitsQuery,
+} from '../../../graphql'
 import { Filter } from '../../../hooks/useAssetFilterFromQuery'
+import { formatError } from '../../../utils'
 
 type Props = {
-  collection:
-    | {
-        chainId: number
-        address: string
-      }
-    | undefined
+  collection: {
+    chainId: number
+    address: string
+  }
   filter: Filter
   formValues: UseFormReturn<Filter, any, undefined>
   onFilterChange: (filter: Filter) => void
 }
 
+const PAGINATION_LIMIT = 8
+
 const FilterByTrait: FC<Props> = ({
   collection,
   filter,
-  formValues: { watch },
+  formValues: { setValue, watch },
   onFilterChange,
 }) => {
   const { t } = useTranslation('components')
+  const toast = useToast()
 
   const filterResult = watch()
 
-  const { data } = useFetchCollectionTraitsQuery({
+  const { data, fetchMore, networkStatus } = useFetchCollectionTraitsQuery({
     variables: {
-      address: (collection && collection.address) || '',
-      chainId: (collection && collection.chainId) || 0,
+      address: collection.address,
+      chainId: collection.chainId,
+      cursor: null,
+      limit: PAGINATION_LIMIT,
+      filter: {
+        type: {
+          includesInsensitive: filterResult.propertySearch || '',
+        } as StringFilter,
+      } as CollectionTraitFilter,
     },
-    skip: !collection,
-    ssr: false,
+    notifyOnNetworkStatusChange: true,
   })
 
   const traitsData = data?.collection?.traitsOfCollection.nodes
+  const hasNextPage = data?.collection?.traitsOfCollection.pageInfo.hasNextPage
+  const endCursor = data?.collection?.traitsOfCollection.pageInfo.endCursor
 
-  const traits = useMemo(() => {
-    if (!traitsData) return
-    const propertySearch = filterResult.propertySearch
-    if (!propertySearch) return traitsData
-    return traitsData.filter(({ type }) =>
-      type.toLowerCase().includes(propertySearch.toLowerCase()),
-    )
-  }, [filterResult, traitsData])
+  const loadMore = useCallback(async () => {
+    try {
+      await fetchMore({
+        variables: {
+          cursor: endCursor,
+        },
+        // Cannot use concatToQuery function because of nested cache
+        // Nested cache comes from the shape of FetchCollectionTraits query above
+        updateQuery: (prevResult, { fetchMoreResult }) => {
+          if (
+            !fetchMoreResult ||
+            !fetchMoreResult.collection?.traitsOfCollection
+          )
+            return prevResult
+          return {
+            ...fetchMoreResult,
+            collection: {
+              ...fetchMoreResult.collection,
+              traitsOfCollection: {
+                ...fetchMoreResult.collection.traitsOfCollection,
+                nodes: [
+                  ...(prevResult?.collection?.traitsOfCollection.nodes || []),
+                  ...fetchMoreResult.collection.traitsOfCollection.nodes,
+                ],
+              },
+            },
+          }
+        },
+      })
+    } catch (e) {
+      toast({
+        title: formatError(e),
+        status: 'error',
+      })
+    }
+  }, [endCursor, fetchMore, toast])
 
   const addTrait = useCallback(
     (type: string, value: string) => {
@@ -104,88 +151,129 @@ const FilterByTrait: FC<Props> = ({
     [onFilterChange, filterResult],
   )
 
-  if (!collection) return null
-  return !traits ? (
-    new Array(10).fill(0).map((_, index) => (
-      <AccordionItem
-        display="flex"
-        alignItems="center"
-        justifyContent="space-between"
-        key={index}
-      >
-        <SkeletonText noOfLines={1} width="80%" />
-        <AccordionIcon />
-      </AccordionItem>
-    ))
-  ) : traits.length > 0 ? (
-    traits.map(({ type, values, numberOfValues }, i) => (
-      <AccordionItem key={i}>
-        <AccordionButton gap={4}>
-          <Heading
-            variant="heading2"
-            flex="1"
-            textAlign="left"
-            noOfLines={1}
-            wordBreak="break-word"
-            title={type}
-          >
-            {type}
+  return (
+    <Accordion allowMultiple defaultIndex={[0]}>
+      <AccordionItem>
+        <AccordionButton>
+          <Heading variant="heading2" flex="1" textAlign="left">
+            {t('filters.assets.properties.label')}
           </Heading>
-          <Flex gap="4" alignItems="center">
-            <Heading variant="heading2" color="gray.500">
-              {numberOfValues}
-            </Heading>
-            <AccordionIcon />
-          </Flex>
+          <AccordionIcon />
         </AccordionButton>
-        <AccordionPanel maxHeight="400px" overflow="auto">
-          <CheckboxGroup
-            defaultValue={
-              filter?.traits?.find((trait) => trait.type === type)?.values
-            }
-          >
-            <Stack spacing={1}>
-              {values.nodes.map(({ value, numberOfAssets }, i) => (
-                <Checkbox
-                  key={i}
-                  value={value}
-                  name={type}
-                  onChange={(e) =>
-                    e.target.checked
-                      ? addTrait(type, value)
-                      : removeTrait(type, value)
-                  }
+        <AccordionPanel>
+          <Stack spacing={4}>
+            <SearchInput
+              placeholder={t('filters.assets.properties.search.placeholder')}
+              name="propertySearch"
+              onReset={() => setValue('propertySearch', '')}
+            />
+            {!traitsData ? (
+              new Array(PAGINATION_LIMIT).fill(0).map((_, index) => (
+                <AccordionItem
+                  display="flex"
+                  alignItems="center"
+                  justifyContent="space-between"
+                  key={index}
                 >
-                  <Flex justifyContent="space-between" gap={3}>
-                    <Text
-                      variant="subtitle2"
-                      color="black"
-                      noOfLines={1}
-                      wordBreak="break-word"
-                      title={value}
-                    >
-                      {value}
-                    </Text>
-                    <Text variant="subtitle2" color="black">
-                      {numberOfAssets}
+                  <SkeletonText noOfLines={1} width="80%" />
+                  <AccordionIcon />
+                </AccordionItem>
+              ))
+            ) : traitsData.length > 0 ? (
+              <>
+                <div>
+                  {traitsData.map(({ type, values, numberOfValues }, i) => (
+                    <AccordionItem key={i}>
+                      <AccordionButton gap={4}>
+                        <Heading
+                          variant="heading2"
+                          flex="1"
+                          textAlign="left"
+                          noOfLines={1}
+                          wordBreak="break-word"
+                          title={type}
+                        >
+                          {type}
+                        </Heading>
+                        <Flex gap="4" alignItems="center">
+                          <Heading variant="heading2" color="gray.500">
+                            {numberOfValues}
+                          </Heading>
+                          <AccordionIcon />
+                        </Flex>
+                      </AccordionButton>
+                      <AccordionPanel maxHeight="400px" overflow="auto">
+                        <CheckboxGroup
+                          defaultValue={
+                            filter?.traits?.find((trait) => trait.type === type)
+                              ?.values
+                          }
+                        >
+                          <Stack spacing={1}>
+                            {values.nodes.map(
+                              ({ value, numberOfAssets }, i) => (
+                                <Checkbox
+                                  key={i}
+                                  value={value}
+                                  name={type}
+                                  onChange={(e) =>
+                                    e.target.checked
+                                      ? addTrait(type, value)
+                                      : removeTrait(type, value)
+                                  }
+                                >
+                                  <Flex justifyContent="space-between" gap={3}>
+                                    <Text
+                                      variant="subtitle2"
+                                      color="black"
+                                      noOfLines={1}
+                                      wordBreak="break-word"
+                                      title={value}
+                                    >
+                                      {value}
+                                    </Text>
+                                    <Text variant="subtitle2" color="black">
+                                      {numberOfAssets}
+                                    </Text>
+                                  </Flex>
+                                </Checkbox>
+                              ),
+                            )}
+                          </Stack>
+                        </CheckboxGroup>
+                      </AccordionPanel>
+                    </AccordionItem>
+                  ))}
+                </div>
+                {hasNextPage && (
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    isLoading={networkStatus === NetworkStatus.fetchMore}
+                    onClick={loadMore}
+                    width="fit-content"
+                    mx="auto"
+                  >
+                    <Text as="span" isTruncated>
+                      Load more traits
                     </Text>
-                  </Flex>
-                </Checkbox>
-              ))}
-            </Stack>
-          </CheckboxGroup>
+                  </Button>
+                )}
+              </>
+            ) : (
+              <VStack spacing={1}>
+                <Text variant="subtitle2" color="gray.800" as="span">
+                  {t('filters.traits.empty.title')}
+                </Text>
+                <Text variant="caption" as="span">
+                  {t('filters.traits.empty.description')}
+                </Text>
+              </VStack>
+            )}
+          </Stack>
         </AccordionPanel>
       </AccordionItem>
-    ))
-  ) : (
-    <VStack spacing={1}>
-      <Text variant="subtitle2" color="gray.800" as="span">
-        {t('filters.traits.empty.title')}
-      </Text>
-      <Text variant="caption" as="span">
-        {t('filters.traits.empty.description')}
-      </Text>
-    </VStack>
+    </Accordion>
   )
 }
 
diff --git a/hooks/useFetchCollectionTraits.gql b/hooks/useFetchCollectionTraits.gql
index 000bcc44..ff865039 100644
--- a/hooks/useFetchCollectionTraits.gql
+++ b/hooks/useFetchCollectionTraits.gql
@@ -1,11 +1,23 @@
-query FetchCollectionTraits($chainId: Int!, $address: Address!) {
+query FetchCollectionTraits(
+  $chainId: Int!
+  $address: Address!
+  $filter: CollectionTraitFilter!
+  $limit: Int!
+  $cursor: Cursor
+) {
   collection(chainId: $chainId, address: $address) {
     chainId
     address
     traitsOfCollection(
-      first: 50 # TODO: implement pagination
-      orderBy: [TYPE_ASC]
+      orderBy: [NUMBER_OF_VALUES_DESC]
+      first: $limit
+      filter: $filter
+      after: $cursor
     ) {
+      pageInfo {
+        hasNextPage
+        endCursor
+      }
       nodes {
         type
         numberOfValues

From 3d79e9cab5753699a0eeda0e81c80950f36e6d72 Mon Sep 17 00:00:00 2001
From: ismailToyran <ismailtoyran@gmail.com>
Date: Thu, 16 Nov 2023 20:17:42 +0300
Subject: [PATCH 3/9] Locale changes

---
 locales/en/components.json    | 2 +-
 locales/es-mx/components.json | 2 +-
 locales/ja/components.json    | 2 +-
 locales/zh-cn/components.json | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/locales/en/components.json b/locales/en/components.json
index 06e4a821..9d522471 100644
--- a/locales/en/components.json
+++ b/locales/en/components.json
@@ -192,7 +192,7 @@
       },
       "properties": {
         "label": "Properties",
-        "labelWithCollection": "Collection & properties",
+        "labelWithCollection": "Collection",
         "search": {
           "placeholder": "Filter properties"
         }
diff --git a/locales/es-mx/components.json b/locales/es-mx/components.json
index 0421aa18..2fbb6cb2 100644
--- a/locales/es-mx/components.json
+++ b/locales/es-mx/components.json
@@ -192,7 +192,7 @@
       },
       "properties": {
         "label": "Propiedades",
-        "labelWithCollection": "Colección y propiedades",
+        "labelWithCollection": "Colección",
         "search": {
           "placeholder": "Propiedades del filtro"
         }
diff --git a/locales/ja/components.json b/locales/ja/components.json
index c7c496b5..85449feb 100644
--- a/locales/ja/components.json
+++ b/locales/ja/components.json
@@ -192,7 +192,7 @@
       },
       "properties": {
         "label": "プロパティ",
-        "labelWithCollection": "コレクションとプロパティ",
+        "labelWithCollection": "コレクション",
         "search": {
           "placeholder": "フィルターのプロパティ"
         }
diff --git a/locales/zh-cn/components.json b/locales/zh-cn/components.json
index 81632756..1f0e6f54 100644
--- a/locales/zh-cn/components.json
+++ b/locales/zh-cn/components.json
@@ -192,7 +192,7 @@
       },
       "properties": {
         "label": "性能",
-        "labelWithCollection": "集合和属性",
+        "labelWithCollection": "收藏",
         "search": {
           "placeholder": "筛选器属性"
         }

From 311b955e33d2b26b1bf810796fa7f48e4274a182 Mon Sep 17 00:00:00 2001
From: ismailToyran <ismailtoyran@gmail.com>
Date: Mon, 20 Nov 2023 10:08:13 +0300
Subject: [PATCH 4/9] Remove not needed filter prop passing

---
 components/Filter/FilterAsset.tsx    | 1 -
 components/Filter/FilterBy/Trait.tsx | 7 +++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/components/Filter/FilterAsset.tsx b/components/Filter/FilterAsset.tsx
index 976a63b3..d01a0d9b 100644
--- a/components/Filter/FilterAsset.tsx
+++ b/components/Filter/FilterAsset.tsx
@@ -220,7 +220,6 @@ const FilterAsset: NextPage<Props> = ({
           {collection && (
             <FilterByTrait
               collection={collection}
-              filter={filter}
               formValues={formValues}
               onFilterChange={onFilterChange}
             />
diff --git a/components/Filter/FilterBy/Trait.tsx b/components/Filter/FilterBy/Trait.tsx
index 57dd9e36..f4b0183e 100644
--- a/components/Filter/FilterBy/Trait.tsx
+++ b/components/Filter/FilterBy/Trait.tsx
@@ -33,7 +33,6 @@ type Props = {
     chainId: number
     address: string
   }
-  filter: Filter
   formValues: UseFormReturn<Filter, any, undefined>
   onFilterChange: (filter: Filter) => void
 }
@@ -42,7 +41,6 @@ const PAGINATION_LIMIT = 8
 
 const FilterByTrait: FC<Props> = ({
   collection,
-  filter,
   formValues: { setValue, watch },
   onFilterChange,
 }) => {
@@ -205,8 +203,9 @@ const FilterByTrait: FC<Props> = ({
                       <AccordionPanel maxHeight="400px" overflow="auto">
                         <CheckboxGroup
                           defaultValue={
-                            filter?.traits?.find((trait) => trait.type === type)
-                              ?.values
+                            filterResult?.traits?.find(
+                              (trait) => trait.type === type,
+                            )?.values
                           }
                         >
                           <Stack spacing={1}>

From 097630100158ac1c04ca5c1e8259bfbf2c988f26 Mon Sep 17 00:00:00 2001
From: ismailToyran <ismailtoyran@gmail.com>
Date: Mon, 20 Nov 2023 12:27:00 +0300
Subject: [PATCH 5/9] Collection load more locale added

---
 components/Filter/FilterBy/Collection.tsx | 2 +-
 locales/en/components.json                | 1 +
 locales/es-mx/components.json             | 1 +
 locales/ja/components.json                | 1 +
 locales/zh-cn/components.json             | 1 +
 5 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/Filter/FilterBy/Collection.tsx b/components/Filter/FilterBy/Collection.tsx
index f0ec47ad..056593f4 100644
--- a/components/Filter/FilterBy/Collection.tsx
+++ b/components/Filter/FilterBy/Collection.tsx
@@ -178,7 +178,7 @@ const FilterByCollection: FC<Props> = ({
                     mx="auto"
                   >
                     <Text as="span" isTruncated>
-                      Load more collections
+                      {t('filters.collections.more')}
                     </Text>
                   </Button>
                 )}
diff --git a/locales/en/components.json b/locales/en/components.json
index 9d522471..f5d909ca 100644
--- a/locales/en/components.json
+++ b/locales/en/components.json
@@ -135,6 +135,7 @@
       "clear": "Clear filters"
     },
     "collections": {
+      "more:": "Load more",
       "chains": {
         "label": "Chain"
       },
diff --git a/locales/es-mx/components.json b/locales/es-mx/components.json
index 2fbb6cb2..c64268ca 100644
--- a/locales/es-mx/components.json
+++ b/locales/es-mx/components.json
@@ -135,6 +135,7 @@
       "clear": "Borrar filtros"
     },
     "collections": {
+      "more:": "Carga más",
       "chains": {
         "label": "Cadena"
       },
diff --git a/locales/ja/components.json b/locales/ja/components.json
index 85449feb..25bfa681 100644
--- a/locales/ja/components.json
+++ b/locales/ja/components.json
@@ -135,6 +135,7 @@
       "clear": "フィルターをクリアする"
     },
     "collections": {
+      "more:": "もっと読み込む",
       "chains": {
         "label": "鎖"
       },
diff --git a/locales/zh-cn/components.json b/locales/zh-cn/components.json
index 1f0e6f54..613216da 100644
--- a/locales/zh-cn/components.json
+++ b/locales/zh-cn/components.json
@@ -135,6 +135,7 @@
       "clear": "清除过滤器"
     },
     "collections": {
+      "more:": "装载更多",
       "chains": {
         "label": "链"
       },

From ee54a215b81a1f5b82e486932719d37fa57f56be Mon Sep 17 00:00:00 2001
From: ismailToyran <ismailtoyran@gmail.com>
Date: Mon, 20 Nov 2023 12:27:47 +0300
Subject: [PATCH 6/9] Trait load more locale added

---
 components/Filter/FilterBy/Trait.tsx | 2 +-
 locales/en/components.json           | 1 +
 locales/es-mx/components.json        | 1 +
 locales/ja/components.json           | 1 +
 locales/zh-cn/components.json        | 1 +
 5 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/Filter/FilterBy/Trait.tsx b/components/Filter/FilterBy/Trait.tsx
index f4b0183e..eafde04e 100644
--- a/components/Filter/FilterBy/Trait.tsx
+++ b/components/Filter/FilterBy/Trait.tsx
@@ -254,7 +254,7 @@ const FilterByTrait: FC<Props> = ({
                     mx="auto"
                   >
                     <Text as="span" isTruncated>
-                      Load more traits
+                      {t('filters.traits.more')}
                     </Text>
                   </Button>
                 )}
diff --git a/locales/en/components.json b/locales/en/components.json
index f5d909ca..9ffc1938 100644
--- a/locales/en/components.json
+++ b/locales/en/components.json
@@ -145,6 +145,7 @@
       }
     },
     "traits": {
+      "more:": "Load more",
       "empty": {
         "title": "No Traits Found",
         "description": "Update your filters to find more traits."
diff --git a/locales/es-mx/components.json b/locales/es-mx/components.json
index c64268ca..16ce306b 100644
--- a/locales/es-mx/components.json
+++ b/locales/es-mx/components.json
@@ -145,6 +145,7 @@
       }
     },
     "traits": {
+      "more:": "Carga más",
       "empty": {
         "title": "No se encontraron rasgos",
         "description": "Actualiza tus filtros para encontrar más rasgos."
diff --git a/locales/ja/components.json b/locales/ja/components.json
index 25bfa681..a5a50b29 100644
--- a/locales/ja/components.json
+++ b/locales/ja/components.json
@@ -145,6 +145,7 @@
       }
     },
     "traits": {
+      "more:": "もっと読み込む",
       "empty": {
         "title": "特性が見つかりません",
         "description": "フィルターを更新して、より多くの特性を見つけてください。"
diff --git a/locales/zh-cn/components.json b/locales/zh-cn/components.json
index 613216da..11b8195d 100644
--- a/locales/zh-cn/components.json
+++ b/locales/zh-cn/components.json
@@ -145,6 +145,7 @@
       }
     },
     "traits": {
+      "more:": "装载更多",
       "empty": {
         "title": "未发现特征",
         "description": "更新您的过滤器以发现更多特征。"

From db287c78c52ff0b977ed79243c2890fa88559575 Mon Sep 17 00:00:00 2001
From: ismailToyran <ismailtoyran@gmail.com>
Date: Mon, 20 Nov 2023 12:28:29 +0300
Subject: [PATCH 7/9] Revert orderBy of collections traits

---
 hooks/useFetchCollectionTraits.gql | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/hooks/useFetchCollectionTraits.gql b/hooks/useFetchCollectionTraits.gql
index ff865039..58f247e0 100644
--- a/hooks/useFetchCollectionTraits.gql
+++ b/hooks/useFetchCollectionTraits.gql
@@ -9,7 +9,7 @@ query FetchCollectionTraits(
     chainId
     address
     traitsOfCollection(
-      orderBy: [NUMBER_OF_VALUES_DESC]
+      orderBy: [TYPE_ASC]
       first: $limit
       filter: $filter
       after: $cursor

From a454cc2898ef55b309f51040e7f7af70e59a736a Mon Sep 17 00:00:00 2001
From: ismailToyran <ismailtoyran@gmail.com>
Date: Mon, 20 Nov 2023 17:38:13 +0300
Subject: [PATCH 8/9] use offset instead of cursor

---
 components/Filter/FilterBy/Collection.tsx | 14 +++++++-------
 components/Filter/FilterBy/Trait.tsx      | 14 +++++++-------
 hooks/useFetchCollectionTraits.gql        |  5 ++---
 hooks/useSearchCollection.gql             |  5 ++---
 4 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/components/Filter/FilterBy/Collection.tsx b/components/Filter/FilterBy/Collection.tsx
index 056593f4..b5b1e2f7 100644
--- a/components/Filter/FilterBy/Collection.tsx
+++ b/components/Filter/FilterBy/Collection.tsx
@@ -14,7 +14,7 @@ import {
   useToast,
 } from '@chakra-ui/react'
 import useTranslation from 'next-translate/useTranslation'
-import { FC, useCallback, useMemo } from 'react'
+import { FC, useCallback, useMemo, useState } from 'react'
 import { UseFormReturn } from 'react-hook-form'
 import { concatToQuery } from '../../../concat'
 import {
@@ -41,6 +41,7 @@ const FilterByCollection: FC<Props> = ({
 }) => {
   const { t } = useTranslation('components')
   const toast = useToast()
+  const [offset, setOffset] = useState(0)
 
   const filterResult = watch()
 
@@ -50,7 +51,7 @@ const FilterByCollection: FC<Props> = ({
     networkStatus,
   } = useSearchCollectionQuery({
     variables: {
-      cursor: null,
+      offset: 0, // the offset change must be done when calling the fetchMore function to concat queries' results
       limit: PAGINATION_LIMIT,
       filter: {
         name: {
@@ -65,23 +66,22 @@ const FilterByCollection: FC<Props> = ({
   })
   const collections = collectionData?.collections?.nodes
   const hasNextPage = collectionData?.collections?.pageInfo.hasNextPage
-  const endCursor = collectionData?.collections?.pageInfo.endCursor
 
   const loadMore = useCallback(async () => {
+    const newOffset = offset + PAGINATION_LIMIT
     try {
       await fetchMore({
-        variables: {
-          cursor: endCursor,
-        },
+        variables: { offset: newOffset },
         updateQuery: concatToQuery('collections'),
       })
+      setOffset(newOffset)
     } catch (e) {
       toast({
         title: formatError(e),
         status: 'error',
       })
     }
-  }, [endCursor, fetchMore, toast])
+  }, [fetchMore, offset, toast])
 
   const collection = useMemo(() => {
     if (!filterResult.collection) return
diff --git a/components/Filter/FilterBy/Trait.tsx b/components/Filter/FilterBy/Trait.tsx
index eafde04e..9452817b 100644
--- a/components/Filter/FilterBy/Trait.tsx
+++ b/components/Filter/FilterBy/Trait.tsx
@@ -18,7 +18,7 @@ import {
 } from '@chakra-ui/react'
 import SearchInput from 'components/SearchInput'
 import useTranslation from 'next-translate/useTranslation'
-import { FC, useCallback } from 'react'
+import { FC, useCallback, useState } from 'react'
 import { UseFormReturn } from 'react-hook-form'
 import {
   CollectionTraitFilter,
@@ -46,6 +46,7 @@ const FilterByTrait: FC<Props> = ({
 }) => {
   const { t } = useTranslation('components')
   const toast = useToast()
+  const [offset, setOffset] = useState(0)
 
   const filterResult = watch()
 
@@ -53,7 +54,7 @@ const FilterByTrait: FC<Props> = ({
     variables: {
       address: collection.address,
       chainId: collection.chainId,
-      cursor: null,
+      offset: 0, // the offset change must be done when calling the fetchMore function to concat queries' results
       limit: PAGINATION_LIMIT,
       filter: {
         type: {
@@ -66,14 +67,12 @@ const FilterByTrait: FC<Props> = ({
 
   const traitsData = data?.collection?.traitsOfCollection.nodes
   const hasNextPage = data?.collection?.traitsOfCollection.pageInfo.hasNextPage
-  const endCursor = data?.collection?.traitsOfCollection.pageInfo.endCursor
 
   const loadMore = useCallback(async () => {
+    const newOffset = offset + PAGINATION_LIMIT
     try {
       await fetchMore({
-        variables: {
-          cursor: endCursor,
-        },
+        variables: { offset: newOffset },
         // Cannot use concatToQuery function because of nested cache
         // Nested cache comes from the shape of FetchCollectionTraits query above
         updateQuery: (prevResult, { fetchMoreResult }) => {
@@ -97,13 +96,14 @@ const FilterByTrait: FC<Props> = ({
           }
         },
       })
+      setOffset(newOffset)
     } catch (e) {
       toast({
         title: formatError(e),
         status: 'error',
       })
     }
-  }, [endCursor, fetchMore, toast])
+  }, [fetchMore, offset, toast])
 
   const addTrait = useCallback(
     (type: string, value: string) => {
diff --git a/hooks/useFetchCollectionTraits.gql b/hooks/useFetchCollectionTraits.gql
index 58f247e0..bed95bfe 100644
--- a/hooks/useFetchCollectionTraits.gql
+++ b/hooks/useFetchCollectionTraits.gql
@@ -3,7 +3,7 @@ query FetchCollectionTraits(
   $address: Address!
   $filter: CollectionTraitFilter!
   $limit: Int!
-  $cursor: Cursor
+  $offset: Int!
 ) {
   collection(chainId: $chainId, address: $address) {
     chainId
@@ -12,11 +12,10 @@ query FetchCollectionTraits(
       orderBy: [TYPE_ASC]
       first: $limit
       filter: $filter
-      after: $cursor
+      offset: $offset
     ) {
       pageInfo {
         hasNextPage
-        endCursor
       }
       nodes {
         type
diff --git a/hooks/useSearchCollection.gql b/hooks/useSearchCollection.gql
index df0209f9..c5b60e3c 100644
--- a/hooks/useSearchCollection.gql
+++ b/hooks/useSearchCollection.gql
@@ -1,17 +1,16 @@
 query SearchCollection(
   $filter: CollectionFilter!
   $limit: Int!
-  $cursor: Cursor
+  $offset: Int!
 ) {
   collections(
     orderBy: TOTAL_VOLUME_DESC
     first: $limit
     filter: $filter
-    after: $cursor
+    offset: $offset
   ) {
     pageInfo {
       hasNextPage
-      endCursor
     }
     nodes {
       chainId

From eea86a20c9d7ca7332f1ace3b9b7bbe2b204c78d Mon Sep 17 00:00:00 2001
From: ismailToyran <ismailtoyran@gmail.com>
Date: Mon, 20 Nov 2023 17:38:23 +0300
Subject: [PATCH 9/9] Fix locale naming

---
 locales/en/components.json    | 4 ++--
 locales/es-mx/components.json | 4 ++--
 locales/ja/components.json    | 4 ++--
 locales/zh-cn/components.json | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/locales/en/components.json b/locales/en/components.json
index 9ffc1938..8fe96d6a 100644
--- a/locales/en/components.json
+++ b/locales/en/components.json
@@ -135,7 +135,7 @@
       "clear": "Clear filters"
     },
     "collections": {
-      "more:": "Load more",
+      "more": "Load more",
       "chains": {
         "label": "Chain"
       },
@@ -145,7 +145,7 @@
       }
     },
     "traits": {
-      "more:": "Load more",
+      "more": "Load more",
       "empty": {
         "title": "No Traits Found",
         "description": "Update your filters to find more traits."
diff --git a/locales/es-mx/components.json b/locales/es-mx/components.json
index 16ce306b..9a2974f8 100644
--- a/locales/es-mx/components.json
+++ b/locales/es-mx/components.json
@@ -135,7 +135,7 @@
       "clear": "Borrar filtros"
     },
     "collections": {
-      "more:": "Carga más",
+      "more": "Carga más",
       "chains": {
         "label": "Cadena"
       },
@@ -145,7 +145,7 @@
       }
     },
     "traits": {
-      "more:": "Carga más",
+      "more": "Carga más",
       "empty": {
         "title": "No se encontraron rasgos",
         "description": "Actualiza tus filtros para encontrar más rasgos."
diff --git a/locales/ja/components.json b/locales/ja/components.json
index a5a50b29..4a8be713 100644
--- a/locales/ja/components.json
+++ b/locales/ja/components.json
@@ -135,7 +135,7 @@
       "clear": "フィルターをクリアする"
     },
     "collections": {
-      "more:": "もっと読み込む",
+      "more": "もっと読み込む",
       "chains": {
         "label": "鎖"
       },
@@ -145,7 +145,7 @@
       }
     },
     "traits": {
-      "more:": "もっと読み込む",
+      "more": "もっと読み込む",
       "empty": {
         "title": "特性が見つかりません",
         "description": "フィルターを更新して、より多くの特性を見つけてください。"
diff --git a/locales/zh-cn/components.json b/locales/zh-cn/components.json
index 11b8195d..781daa40 100644
--- a/locales/zh-cn/components.json
+++ b/locales/zh-cn/components.json
@@ -135,7 +135,7 @@
       "clear": "清除过滤器"
     },
     "collections": {
-      "more:": "装载更多",
+      "more": "装载更多",
       "chains": {
         "label": "链"
       },
@@ -145,7 +145,7 @@
       }
     },
     "traits": {
-      "more:": "装载更多",
+      "more": "装载更多",
       "empty": {
         "title": "未发现特征",
         "description": "更新您的过滤器以发现更多特征。"