feat: Use MVMF collections in the mvmf event page

webapp/src/components/AssetBrowse/AssetBrowse.tsx

@@ -206,7 +206,7 @@ const AssetBrowse = (props: Props) => {
               </Container>
             </div>
           ) : (
-            <NFTFilters isMap={Boolean(isMap)} />
+            <NFTFilters isMap={Boolean(isMap)} contracts={contracts} />
           )}
           {isMap ? (
             <div className="Atlas">

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

@@ -14,12 +14,28 @@ import {
 } from 'decentraland-ui'
 import { WearableGender } from '../../../../modules/nft/wearable/types'
 import { contracts } from '../../../../modules/contract/utils'
+import { Contract } from '../../../../modules/vendor/services'
 import { ArrayFilter } from '../ArrayFilter'
 import { SelectFilter } from '../SelectFilter'
 import { Props } from './FiltersMenu.types'
 
 export const ALL_FILTER_OPTION = 'ALL'
 
+const getContracts = (availableContracts: string[] | undefined): Contract[] => {
+  if (availableContracts && availableContracts.length > 0) {
+    let filteredContracts = []
+    for (const contract of contracts) {
+      if (availableContracts.some(address => contract.address === address)) {
+        filteredContracts.push(contract)
+      }
+    }
+
+    return filteredContracts
+  }
+
+  return contracts
+}
+
 const FiltersMenu = (props: Props) => {
   const {
     selectedCollection,
@@ -28,6 +44,7 @@ const FiltersMenu = (props: Props) => {
     selectedNetwork,
     selectedEmotePlayMode,
     isOnlySmart,
+    availableContracts,
     onCollectionsChange,
     onRaritiesChange,
     onGendersChange,
@@ -42,14 +59,14 @@ const FiltersMenu = (props: Props) => {
         value: ALL_FILTER_OPTION,
         text: t('nft_filters.all_collections')
       },
-      ...contracts
+      ...getContracts(availableContracts)
         .filter(contract => contract.category === NFTCategory.WEARABLE)
         .map(contract => ({
           value: contract.address,
           text: contract.name
         }))
     ]
-  }, [])
+  }, [availableContracts])
 
   const rarityOptions = useMemo(() => {
     const options = Object.values(Rarity)

webapp/src/components/Vendor/NFTFilters/FiltersMenu/FiltersMenu.types.ts

@@ -8,6 +8,7 @@ export type Props = {
   selectedGenders?: string[]
   selectedNetwork?: Network
   selectedEmotePlayMode?: string
+  availableContracts?: string[]
   isOnlySmart?: boolean
   onCollectionsChange: (contract?: string) => void
   onGendersChange?: (options: string[]) => void

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

@@ -7,12 +7,18 @@ import './NFTFilters.css'
 
 // TODO: Code on each NFTFilters can be extracted
 const NFTFilters = (props: Props) => {
-  const { vendor, isMap, onBrowse } = props
+  const { vendor, contracts, isMap, onBrowse } = props
 
   switch (vendor) {
     case VendorName.DECENTRALAND:
     default:
-      return <DecentralandNFTFilters isMap={isMap} onBrowse={onBrowse} />
+      return (
+        <DecentralandNFTFilters
+          isMap={isMap}
+          availableContracts={contracts}
+          onBrowse={onBrowse}
+        />
+      )
   }
 }
 

webapp/src/components/Vendor/NFTFilters/NFTFilters.types.ts

@@ -6,9 +6,10 @@ export type Props = {
   vendor?: string
   onBrowse: typeof browse
   isMap: boolean
+  contracts?: string[]
 }
 
 export type MapStateProps = Pick<Props, 'vendor'>
 export type MapDispatchProps = Pick<Props, 'onBrowse'>
 export type MapDispatch = Dispatch<BrowseAction>
-export type OwnProps = Pick<Props, 'isMap'>
+export type OwnProps = Pick<Props, 'isMap' | 'contracts'>

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

@@ -46,7 +46,8 @@ const NFTFilters = (props: Props) => {
     assetType,
     hasFiltersEnabled,
     onClearFilters,
-    isRentalsEnabled
+    isRentalsEnabled,
+    availableContracts
   } = props
 
   const category = section ? getCategoryFromSection(section) : undefined
@@ -360,6 +361,7 @@ const NFTFilters = (props: Props) => {
             selectedRarities={rarities}
             selectedGenders={isWearableCategory ? wearableGenders : undefined}
             selectedEmotePlayMode={isEmoteCategory ? emotePlayMode : undefined}
+            availableContracts={availableContracts}
             isOnlySmart={isWearableCategory ? !!onlySmart : undefined}
             onCollectionsChange={handleCollectionsChange}
             onGendersChange={
@@ -421,6 +423,7 @@ const NFTFilters = (props: Props) => {
                   isEmoteCategory ? emotePlayMode : undefined
                 }
                 isOnlySmart={isWearableCategory ? !!onlySmart : undefined}
+                availableContracts={availableContracts}
                 onCollectionsChange={handleCollectionsChange}
                 onGendersChange={
                   isWearableCategory ? handleGendersChange : undefined

webapp/src/components/Vendor/decentraland/NFTFilters/NFTFilters.types.ts

@@ -25,6 +25,7 @@ export type Props = {
   contracts: string[]
   network?: Network
   emotePlayMode?: EmotePlayMode
+  availableContracts?: string[]
   hasFiltersEnabled: boolean
   isRentalsEnabled: boolean
   onBrowse: typeof browse
@@ -52,4 +53,4 @@ export type MapStateProps = Pick<
 >
 export type MapDispatchProps = Pick<Props, 'onClearFilters'>
 export type MapDispatch = Dispatch<ClearFiltersAction>
-export type OwnProps = Pick<Props, 'onBrowse' | 'isMap'>
+export type OwnProps = Pick<Props, 'onBrowse' | 'isMap' | 'availableContracts'>

webapp/src/modules/routing/sagas.ts

@@ -157,7 +157,10 @@ export function* handleBrowse(action: BrowseAction) {
   yield call(fetchAssetsFromRoute, {
     ...options,
     ...(isAnEventRoute && {
-      contracts: isAnEventRoute ? eventsContracts[pathname.slice(1)] : undefined
+      contracts:
+        options.contracts && options.contracts.length > 0
+          ? options.contracts
+          : eventsContracts[pathname.slice(1)]
     })
   })
   yield put(push(buildBrowseURL(pathname, options)))