diff --git a/webapp/src/components/AssetList/AssetList.css b/webapp/src/components/AssetList/AssetList.css index 12f686f20d..96d9bfc069 100644 --- a/webapp/src/components/AssetList/AssetList.css +++ b/webapp/src/components/AssetList/AssetList.css @@ -29,6 +29,10 @@ background-size: cover; } +.AssetsList .empty-text { + max-width: 600px; +} + .AssetsList .empty .logo { background-image: url('../../images/empty-list.svg'); background-repeat: no-repeat; diff --git a/webapp/src/components/AssetList/AssetList.tsx b/webapp/src/components/AssetList/AssetList.tsx index a1c8cea629..164c89093c 100644 --- a/webapp/src/components/AssetList/AssetList.tsx +++ b/webapp/src/components/AssetList/AssetList.tsx @@ -1,10 +1,12 @@ import React, { useCallback, useMemo, useEffect } from 'react' +import { Link, useLocation } from 'react-router-dom' import { Card, Loader } from 'decentraland-ui' import { NFTCategory } from '@dcl/schemas' import { t, T } from 'decentraland-dapps/dist/modules/translation/utils' import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils' import { getCategoryFromSection } from '../../modules/routing/search' import { getMaxQuerySize, MAX_PAGE } from '../../modules/vendor/api' +import { locations } from '../../modules/routing/locations' import * as events from '../../utils/events' import { InfiniteScroll } from '../InfiniteScroll' import { AssetCard } from '../AssetCard' @@ -29,6 +31,8 @@ const AssetList = (props: Props) => { onClearFilters } = props + const location = useLocation() + useEffect(() => { if (visitedLocations.length > 1) { const [currentLocation, previousLocation] = visitedLocations @@ -69,18 +73,22 @@ const AssetList = (props: Props) => { NFTCategory.WEARABLE ].includes(getCategoryFromSection(section)!) + if (location.pathname === locations.campaign()) { + return 'nft_list.empty_campaign' + } + if (isEmoteOrWearableSection) { return search ? 'nft_list.empty_search' : 'nft_list.empty' } } return 'nft_list.empty' - }, [assets.length, search, section, isManager]) + }, [assets.length, search, section, isManager, location]) const renderEmptyState = useCallback(() => { return (