feat: Filter collections by category (#840)

* feat: Filter items using contracts that contains wearables or emotes

* feat: Add emotes contracts to wallet authorizations

* refactor: Reduce two ifs to one

* feat: Avoid add twice the contracts for categories: wearables and emotes

* fix: Clear filters when selecting emote play mode

* refactor: Nested conditional

Author: cyaiox

webapp/src/components/Vendor/NFTFilters/FiltersMenu/FiltersMenu.tsx

@@ -53,20 +53,24 @@ const FiltersMenu = (props: Props) => {
     onOnlySmartChange
   } = props
 
+  // Emote category sends this param undefined
+  const category =
+    isOnlySmart !== undefined ? NFTCategory.WEARABLE : NFTCategory.EMOTE
+
   const collectionOptions = useMemo(() => {
     return [
       {
         value: ALL_FILTER_OPTION,
         text: t('nft_filters.all_collections')
       },
       ...getContracts(availableContracts)
-        .filter(contract => contract.category === NFTCategory.WEARABLE)
+        .filter(contract => contract.category === category)
         .map(contract => ({
           value: contract.address,
           text: contract.name
         }))
     ]
-  }, [availableContracts])
+  }, [availableContracts, category])
 
   const rarityOptions = useMemo(() => {
     const options = Object.values(Rarity)

webapp/src/modules/routing/sagas.spec.ts

@@ -1,4 +1,10 @@
-import { ItemSortBy, Network, NFTCategory, Rarity } from '@dcl/schemas'
+import {
+  EmotePlayMode,
+  ItemSortBy,
+  Network,
+  NFTCategory,
+  Rarity
+} from '@dcl/schemas'
 import { getLocation, push } from 'connected-react-router'
 import { expectSaga } from 'redux-saga-test-plan'
 import { call, select } from 'redux-saga/effects'
@@ -45,7 +51,8 @@ describe('when handling the clear filters request action', () => {
       rarities: [Rarity.EPIC],
       wearableGenders: [WearableGender.FEMALE],
       contracts: ['aContract'],
-      network: Network.ETHEREUM
+      network: Network.ETHEREUM,
+      emotePlayMode: EmotePlayMode.SIMPLE
     }
 
     const browseOptionsWithoutFilters: BrowseOptions = { ...browseOptions }
@@ -54,6 +61,7 @@ describe('when handling the clear filters request action', () => {
     delete browseOptionsWithoutFilters.network
     delete browseOptionsWithoutFilters.contracts
     delete browseOptionsWithoutFilters.page
+    delete browseOptionsWithoutFilters.emotePlayMode
 
     const pathname = 'aPath'
 

webapp/src/modules/routing/sagas.ts

@@ -137,6 +137,7 @@ function* handleClearFilters() {
     'wearableGenders',
     'network',
     'contracts',
+    'emotePlayMode',
     'page'
   ])
 

webapp/src/modules/routing/selectors.ts

@@ -252,22 +252,26 @@ export const hasFiltersEnabled = createSelector<
   WearableGender[],
   Rarity[],
   string[],
+  string | undefined,
   boolean
 >(
   getNetwork,
   getWearableGenders,
   getRarities,
   getContracts,
-  (network, genders, rarities, contracts) => {
+  getEmotePlayMode,
+  (network, genders, rarities, contracts, playMode) => {
     const hasNetworkFilter = network !== undefined
     const hasGenderFilter = genders.length > 0
     const hasRarityFilter = rarities.length > 0
     const hasContractsFilter = contracts.length > 0
+    const hasEmotePlayModeFilter = playMode !== undefined
     return (
       hasNetworkFilter ||
       hasGenderFilter ||
       hasRarityFilter ||
-      hasContractsFilter
+      hasContractsFilter ||
+      hasEmotePlayModeFilter
     )
   }
 )

webapp/src/modules/wallet/sagas.ts

@@ -156,18 +156,25 @@ function* handleWallet(
       network: contract.network
     })
 
-    authorizations.push({
-      address,
-      authorizedAddress: marketplace.address,
-      contractAddress: contract.address,
-      contractName:
-        contract.category === NFTCategory.WEARABLE &&
-        contract.network === Network.MATIC
-          ? ContractName.ERC721CollectionV2
-          : ContractName.ERC721,
-      chainId: contract.chainId,
-      type: AuthorizationType.APPROVAL
-    })
+    if (
+      (contract.category === NFTCategory.WEARABLE ||
+        contract.category === NFTCategory.EMOTE) &&
+      !authorizations.some(
+        authorization => authorization.contractAddress === contract.address
+      )
+    ) {
+      authorizations.push({
+        address,
+        authorizedAddress: marketplace.address,
+        contractAddress: contract.address,
+        contractName:
+          contract.network === Network.MATIC
+            ? ContractName.ERC721CollectionV2
+            : ContractName.ERC721,
+        chainId: contract.chainId,
+        type: AuthorizationType.APPROVAL
+      })
+    }
 
     // add authorizations for the rentals contract for the land and estate registries
     if (