feat: Add campaign module and banners

webapp/package.json

@@ -22,10 +22,10 @@
     "dcl-catalyst-commons": "^9.0.1",
     "decentraland-connect": "^7.3.2",
     "decentraland-crypto-fetch": "^1.0.3",
-    "decentraland-dapps": "^23.22.0",
+    "decentraland-dapps": "^23.24.0",
     "decentraland-transactions": "^2.18.1",
     "decentraland-ui": "^6.12.1",
-    "decentraland-ui2": "^0.8.7",
+    "decentraland-ui2": "^0.9.2",
     "ethers": "^5.6.8",
     "graphql": "^14.7.0",
     "history": "^4.10.1",
@@ -99,7 +99,7 @@
     "tslint": "^5.20.1",
     "tslint-react": "^4.1.0",
     "typechain": "^8.0.0",
-    "typescript": "^5.3.3",
+    "typescript": "5.4",
     "vite": "^5.0.11"
   },
   "scripts": {

webapp/src/components/BrowsePage/BrowsePage.container.ts

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux'
-import { getIsCampaignCollectionsBannerEnabled } from '../../modules/features/selectors'
+import { getIsCampaignCollectiblesBannerEnabled } from '../../modules/features/selectors'
 import { RootState } from '../../modules/reducer'
 import { getIsFullscreen, getAssetType, getSection, getVendor, getContracts } from '../../modules/routing/selectors'
 import BrowsePage from './BrowsePage'
@@ -9,7 +9,7 @@ const mapState = (state: RootState): MapStateProps => ({
   vendor: getVendor(state),
   assetType: getAssetType(state),
   section: getSection(state),
-  isCampaignCollectiblesBannerEnabled: getIsCampaignCollectionsBannerEnabled(state),
+  isCampaignCollectiblesBannerEnabled: getIsCampaignCollectiblesBannerEnabled(state),
   isFullscreen: getIsFullscreen(state),
   contracts: getContracts(state)
 })

webapp/src/components/BrowsePage/BrowsePage.module.css

@@ -0,0 +1,3 @@
+.banner {
+  margin-bottom: 24px;
+}

webapp/src/components/BrowsePage/BrowsePage.tsx

@@ -1,14 +1,16 @@
 import React from 'react'
+import { Banner } from 'decentraland-dapps/dist/containers/Banner'
 import { View } from '../../modules/ui/types'
 import { Section } from '../../modules/vendor/decentraland'
 import { VendorName } from '../../modules/vendor/types'
 import { isVendor } from '../../modules/vendor/utils'
 import { AssetBrowse } from '../AssetBrowse'
-import { CampaignCollectiblesBanner } from '../Campaign/banners/CampaignCollectiblesBanner'
-import { CampaignBanner } from '../Campaign/CampaignBanner'
 import { NavigationTab } from '../Navigation/Navigation.types'
 import { PageLayout } from '../PageLayout'
 import { Props } from './BrowsePage.types'
+import styles from './BrowsePage.module.css'
+
+const MARKETPLACE_COLLECTIBLES_BANNER_ID = 'marketplaceCollectiblesBanner'
 
 const BrowsePage = (props: Props) => {
   const { isFullscreen, section, isCampaignCollectiblesBannerEnabled, contracts } = props
@@ -19,9 +21,9 @@ const BrowsePage = (props: Props) => {
   return (
     <PageLayout activeTab={activeTab}>
       {isCampaignCollectiblesBannerEnabled ? (
-        <CampaignBanner>
-          <CampaignCollectiblesBanner />
-        </CampaignBanner>
+        <div className={styles.banner}>
+          <Banner id={MARKETPLACE_COLLECTIBLES_BANNER_ID} />
+        </div>
       ) : null}
       <AssetBrowse
         vendor={vendor}

webapp/src/components/Campaign/CampaignBadge/CampaignBadge.container.tsx

@@ -1,11 +1,13 @@
 import { connect } from 'react-redux'
+import { getMainTag } from 'decentraland-dapps/dist/modules/campaign/selectors'
 import { getIsCampaignBrowserEnabled } from '../../../modules/features/selectors'
 import { RootState } from '../../../modules/reducer'
 import CampaignBadge from './CampaignBadge'
 import { MapStateProps } from './CampaignBadge.types'
 
 const mapState = (state: RootState): MapStateProps => ({
-  isCampaignBrowserEnabled: getIsCampaignBrowserEnabled(state)
+  isCampaignBrowserEnabled: getIsCampaignBrowserEnabled(state),
+  campaignTag: getMainTag(state)
 })
 
 export default connect(mapState)(CampaignBadge)

webapp/src/components/Campaign/CampaignBadge/CampaignBadge.tsx

@@ -1,16 +1,14 @@
 import React, { useEffect, useMemo, useState } from 'react'
-import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { AssetType } from '../../../modules/asset/types'
 import { locations } from '../../../modules/routing/locations'
 import { SortBy } from '../../../modules/routing/types'
 import { VendorName } from '../../../modules/vendor'
 import * as decentraland from '../../../modules/vendor/decentraland'
 import { builderAPI } from '../../../modules/vendor/decentraland/builder/api'
 import IconBadge from '../../AssetPage/LinkedIconBadge'
-import { CAMPAIGN_TAG } from '../config'
 import { Props } from './CampaignBadge.types'
 
-const CampaignBadge = ({ contract, isCampaignBrowserEnabled }: Props) => {
+const CampaignBadge = ({ contract, isCampaignBrowserEnabled, campaignTag }: Props) => {
   const [showBadge, setShowBadge] = useState(false)
   const [contracts, setContracts] = useState<string[]>()
 
@@ -29,18 +27,18 @@ const CampaignBadge = ({ contract, isCampaignBrowserEnabled }: Props) => {
   useEffect(() => {
     void (async () => {
       try {
-        if (isCampaignBrowserEnabled) {
-          const addresses = await builderAPI.fetchAddressesByTag([CAMPAIGN_TAG])
+        if (isCampaignBrowserEnabled && campaignTag) {
+          const addresses = await builderAPI.fetchAddressesByTag([campaignTag])
           setContracts(addresses)
           setShowBadge(addresses.includes(contract))
         }
       } catch (error) {
         console.error(error)
       }
     })()
-  }, [contract, isCampaignBrowserEnabled])
+  }, [contract, isCampaignBrowserEnabled, campaignTag])
 
-  return showBadge ? <IconBadge text={t(`campaign.badge`)} icon="sparkles" href={href} /> : null
+  return showBadge && campaignTag ? <IconBadge text={campaignTag} icon="sparkles" href={href} /> : null
 }
 
 export default React.memo(CampaignBadge)

webapp/src/components/Campaign/CampaignBadge/CampaignBadge.types.ts

@@ -1,6 +1,7 @@
 export type Props = {
   isCampaignBrowserEnabled: boolean
+  campaignTag?: string
   contract: string
 }
 
-export type MapStateProps = Pick<Props, 'isCampaignBrowserEnabled'>
+export type MapStateProps = Pick<Props, 'isCampaignBrowserEnabled' | 'campaignTag'>

webapp/src/components/Campaign/CampaignBrowserPage/CampaignBrowserPage.container.ts

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux'
+import { getAdditionalTags, getMainTag } from 'decentraland-dapps/dist/modules/campaign/selectors'
 import { fetchEventRequest } from '../../../modules/event/actions'
 import { getData as getContracts } from '../../../modules/event/selectors'
 import { getIsCampaignBrowserEnabled } from '../../../modules/features/selectors'
@@ -13,7 +14,9 @@ const mapState = (state: RootState): MapStateProps => ({
   section: getSection(state),
   isFullscreen: getIsFullscreen(state),
   contracts: getContracts(state),
-  isCampaignBrowserEnabled: getIsCampaignBrowserEnabled(state)
+  campaignTag: getMainTag(state),
+  isCampaignBrowserEnabled: getIsCampaignBrowserEnabled(state),
+  additionalCampaignTags: getAdditionalTags(state)
 })
 
 const mapDispatch = (dispatch: MapDispatch) => ({

webapp/src/components/Campaign/CampaignBrowserPage/CampaignBrowserPage.css

@@ -1,4 +1,8 @@
-.CampaignBrowserPage {
+.CampaignBrowserPage .banner {
+  margin-bottom: 24px;
+}
+
+.CampaignBrowserPage .empty {
   width: 100%;
   height: calc(100vh - 360px);
   display: flex;