From a80a530797a866fe97da01b90926d5b4099ed798 Mon Sep 17 00:00:00 2001 From: ikprk <168457495+ikprk@users.noreply.github.com> Date: Mon, 3 Jun 2024 20:12:14 +0200 Subject: [PATCH] :twisted_rightwards_arrows: Separate marketplaces (#6364) * Remove old marketplace view * Create new views * Adjust sidebar and link to new paths --- .../SidenavViewer/SidenavViewer.tsx | 18 +++-- .../NotificationTile.hooks.tsx | 2 +- packages/atlas/src/config/routes.ts | 3 +- .../CrtMarketplaceView.tsx} | 34 +++++++-- .../views/viewer/CrtMarketplaceView/index.ts | 1 + .../MarketplaceView/MarketplaceView.styles.ts | 24 ------- .../MarketplaceView/MarketplaceView.tsx | 69 ------------------- .../src/views/viewer/MarketplaceView/index.ts | 1 - .../FeaturedNftsSection/FeatureNftModal.tsx | 0 .../FeaturedNftsSection.styles.ts | 0 .../FeaturedNftsSection.tsx | 0 .../NftMarketplaceView.tsx} | 34 +++++++-- .../views/viewer/NftMarketplaceView/index.ts | 1 + .../PortfolioView/tabs/PortfolioNftTab.tsx | 2 +- .../atlas/src/views/viewer/ViewerLayout.tsx | 10 ++- 15 files changed, 85 insertions(+), 114 deletions(-) rename packages/atlas/src/views/viewer/{MarketplaceView/tabs/MarketplaceCrtTab.tsx => CrtMarketplaceView/CrtMarketplaceView.tsx} (78%) create mode 100644 packages/atlas/src/views/viewer/CrtMarketplaceView/index.ts delete mode 100644 packages/atlas/src/views/viewer/MarketplaceView/MarketplaceView.styles.ts delete mode 100644 packages/atlas/src/views/viewer/MarketplaceView/MarketplaceView.tsx delete mode 100644 packages/atlas/src/views/viewer/MarketplaceView/index.ts rename packages/atlas/src/views/viewer/{MarketplaceView => NftMarketplaceView}/FeaturedNftsSection/FeatureNftModal.tsx (100%) rename packages/atlas/src/views/viewer/{MarketplaceView => NftMarketplaceView}/FeaturedNftsSection/FeaturedNftsSection.styles.ts (100%) rename packages/atlas/src/views/viewer/{MarketplaceView => NftMarketplaceView}/FeaturedNftsSection/FeaturedNftsSection.tsx (100%) rename packages/atlas/src/views/viewer/{MarketplaceView/tabs/MarketplaceNftTab.tsx => NftMarketplaceView/NftMarketplaceView.tsx} (54%) create mode 100644 packages/atlas/src/views/viewer/NftMarketplaceView/index.ts diff --git a/packages/atlas/src/components/_navigation/SidenavViewer/SidenavViewer.tsx b/packages/atlas/src/components/_navigation/SidenavViewer/SidenavViewer.tsx index f25aa3a13e..622a12a407 100644 --- a/packages/atlas/src/components/_navigation/SidenavViewer/SidenavViewer.tsx +++ b/packages/atlas/src/components/_navigation/SidenavViewer/SidenavViewer.tsx @@ -7,8 +7,9 @@ import { SvgActionMoney, SvgActionNewTab, SvgSidebarHome, - SvgSidebarMarketplace, + SvgSidebarNft, SvgSidebarReferrals, + SvgSidebarToken, } from '@/assets/icons' import { AppLogo } from '@/components/AppLogo' import { Button } from '@/components/_buttons/Button' @@ -35,10 +36,17 @@ export const viewerNavItems = [ bottomNav: true, }, { - icon: , - expandedName: 'Marketplace', - name: 'Market', - to: absoluteRoutes.viewer.marketplace(), + icon: , + expandedName: 'Tokens', + name: 'Tokens', + to: absoluteRoutes.viewer.crtMarketplace(), + bottomNav: true, + }, + { + icon: , + expandedName: 'NFTs', + name: 'NFTs', + to: absoluteRoutes.viewer.nftMarketplace(), bottomNav: true, }, ...(atlasConfig.features.ypp.googleConsoleClientId diff --git a/packages/atlas/src/components/_notifications/NotificationTile/NotificationTile.hooks.tsx b/packages/atlas/src/components/_notifications/NotificationTile/NotificationTile.hooks.tsx index b91789262a..8fed07555e 100644 --- a/packages/atlas/src/components/_notifications/NotificationTile/NotificationTile.hooks.tsx +++ b/packages/atlas/src/components/_notifications/NotificationTile/NotificationTile.hooks.tsx @@ -649,7 +649,7 @@ const getLink = (type: LinkType, params: string[] = []): string => { return absoluteRoutes.viewer.category(params[0]) case 'marketplace-page': - return absoluteRoutes.viewer.marketplace() + return absoluteRoutes.viewer.nftMarketplace() case 'payments-page': return absoluteRoutes.studio.payments() diff --git a/packages/atlas/src/config/routes.ts b/packages/atlas/src/config/routes.ts index d5d4de3cc8..eb987d401f 100644 --- a/packages/atlas/src/config/routes.ts +++ b/packages/atlas/src/config/routes.ts @@ -48,7 +48,8 @@ export const relativeRoutes = { memberById: (id = ':id', query?: { [QUERY_PARAMS.TAB]?: MemberTabs }) => withQueryParameters(`member/id/${id}`, query), memberNotifications: () => 'notifications/member', - marketplace: () => 'marketplace', + nftMarketplace: () => 'nft-marketplace', + crtMarketplace: () => 'crt-marketplace', ypp: (query?: { [QUERY_PARAMS.REFERRER_ID]?: string }) => withQueryParameters('ypp', query), yppTest: () => 'ypp/rewards', yppDashboard: () => 'ypp-dashboard', diff --git a/packages/atlas/src/views/viewer/MarketplaceView/tabs/MarketplaceCrtTab.tsx b/packages/atlas/src/views/viewer/CrtMarketplaceView/CrtMarketplaceView.tsx similarity index 78% rename from packages/atlas/src/views/viewer/MarketplaceView/tabs/MarketplaceCrtTab.tsx rename to packages/atlas/src/views/viewer/CrtMarketplaceView/CrtMarketplaceView.tsx index 76714134c1..f11c726d1a 100644 --- a/packages/atlas/src/views/viewer/MarketplaceView/tabs/MarketplaceCrtTab.tsx +++ b/packages/atlas/src/views/viewer/CrtMarketplaceView/CrtMarketplaceView.tsx @@ -9,13 +9,15 @@ import { Section } from '@/components/Section/Section' import { TopEarningChannels } from '@/components/TopEarningChannels' import { AllTokensSection } from '@/components/_crt/AllTokensSection' import { CrtCard, CrtSaleTypes } from '@/components/_crt/CrtCard/CrtCard' +import { useHeadTags } from '@/hooks/useHeadTags' import { useMediaMatch } from '@/hooks/useMediaMatch' import { hapiBnToTokenNumber } from '@/joystream-lib/utils' -import { TableFullWitdhtWrapper } from '@/views/viewer/MarketplaceView/MarketplaceView.styles' +import { cVar, media, sizes } from '@/styles' -import { responsive } from '../FeaturedNftsSection/FeaturedNftsSection' +import { responsive } from '../NftMarketplaceView/FeaturedNftsSection/FeaturedNftsSection' -export const MarketplaceCrtTab = () => { +export const CrtMarketplaceView = () => { + const headTags = useHeadTags('CRT - Marketplace') const mdMatch = useMediaMatch('md') const { data, loading } = useGetBasicCreatorTokensQuery({ variables: { @@ -66,7 +68,8 @@ export const MarketplaceCrtTab = () => { ) ?? [] return ( - <> + + {headTags} {featuredCrts.length > 4 && ( @@ -91,10 +94,31 @@ export const MarketplaceCrtTab = () => { - + ) } const StyledCrtCard = styled(CrtCard)` min-height: 100%; ` + +const MarketplaceWrapper = styled.div` + padding: ${sizes(4)} 0; + display: grid; + gap: ${sizes(8)}; + ${media.md} { + padding: ${sizes(8)} 0; + gap: ${sizes(16)}; + } +` + +const TableFullWitdhtWrapper = styled.div` + width: calc(100% + var(--size-global-horizontal-padding) * 2); + margin-left: calc(var(--size-global-horizontal-padding) * -1); + background-color: ${cVar('colorBackgroundMuted')}; + padding: ${sizes(8)} var(--size-global-horizontal-padding); + + ${media.md} { + padding: ${sizes(16)} var(--size-global-horizontal-padding); + } +` diff --git a/packages/atlas/src/views/viewer/CrtMarketplaceView/index.ts b/packages/atlas/src/views/viewer/CrtMarketplaceView/index.ts new file mode 100644 index 0000000000..d0764ec3cd --- /dev/null +++ b/packages/atlas/src/views/viewer/CrtMarketplaceView/index.ts @@ -0,0 +1 @@ +export * from './CrtMarketplaceView' diff --git a/packages/atlas/src/views/viewer/MarketplaceView/MarketplaceView.styles.ts b/packages/atlas/src/views/viewer/MarketplaceView/MarketplaceView.styles.ts deleted file mode 100644 index cba5c97eb8..0000000000 --- a/packages/atlas/src/views/viewer/MarketplaceView/MarketplaceView.styles.ts +++ /dev/null @@ -1,24 +0,0 @@ -import styled from '@emotion/styled' - -import { cVar, media, sizes } from '@/styles' - -export const MarketplaceWrapper = styled.div` - padding: ${sizes(4)} 0; - display: grid; - gap: ${sizes(8)}; - ${media.md} { - padding: ${sizes(8)} 0; - gap: ${sizes(16)}; - } -` - -export const TableFullWitdhtWrapper = styled.div` - width: calc(100% + var(--size-global-horizontal-padding) * 2); - margin-left: calc(var(--size-global-horizontal-padding) * -1); - background-color: ${cVar('colorBackgroundMuted')}; - padding: ${sizes(8)} var(--size-global-horizontal-padding); - - ${media.md} { - padding: ${sizes(16)} var(--size-global-horizontal-padding); - } -` diff --git a/packages/atlas/src/views/viewer/MarketplaceView/MarketplaceView.tsx b/packages/atlas/src/views/viewer/MarketplaceView/MarketplaceView.tsx deleted file mode 100644 index 1c65cea9ad..0000000000 --- a/packages/atlas/src/views/viewer/MarketplaceView/MarketplaceView.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { FC, useCallback } from 'react' -import { useSearchParams } from 'react-router-dom' - -import { SvgActionCreatorToken, SvgActionPlay } from '@/assets/icons' -import { useMediaMatch } from '@/hooks/useMediaMatch' -import { useMountEffect } from '@/hooks/useMountEffect' -import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics' -import { StyledPageTabs } from '@/views/viewer/PortfolioView' - -import { MarketplaceWrapper } from './MarketplaceView.styles' -import { MarketplaceCrtTab } from './tabs/MarketplaceCrtTab' -import { MarketplaceNftTab } from './tabs/MarketplaceNftTab' - -const TABS = [ - { - name: 'Creator Tokens', - description: 'Discover channels you can invest in', - icon: , - }, - { - name: 'Video NFTs', - description: 'Explore offers of non-fungible tokens for popular videos', - icon: , - }, -] as const -type TabsNames = (typeof TABS)[number]['name'] - -const getTabIndex = (tabName: TabsNames, allTabs: typeof TABS): number => - allTabs.findIndex((tab) => tab.name === tabName) - -export const MarketplaceView: FC = () => { - const smMatch = useMediaMatch('sm') - const [searchParams, setSearchParams] = useSearchParams() - const { trackPageView } = useSegmentAnalytics() - const currentTabName = searchParams.get('tab') as (typeof TABS)[number]['name'] | null - const currentTab = currentTabName ? getTabIndex(currentTabName, TABS) : 0 - - useMountEffect(() => { - if (currentTab === -1) { - setSearchParams({ 'tab': '0' }, { replace: true }) - } else { - trackPageView(`${TABS[currentTab].name} Marketplace`) - } - }) - - const handleChangeTab = useCallback( - (idx: number) => { - trackPageView(`${TABS[idx].name} Marketplace`) - setSearchParams({ tab: TABS[idx].name }) - }, - [setSearchParams, trackPageView] - ) - - return ( - <> - (smMatch ? tab : { ...tab, description: '' }))} - onSelectTab={handleChangeTab} - selected={currentTab} - /> - - - {currentTab === 0 && } - {currentTab === 1 && } - - - ) -} diff --git a/packages/atlas/src/views/viewer/MarketplaceView/index.ts b/packages/atlas/src/views/viewer/MarketplaceView/index.ts deleted file mode 100644 index 532bfd5251..0000000000 --- a/packages/atlas/src/views/viewer/MarketplaceView/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './MarketplaceView' diff --git a/packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeatureNftModal.tsx b/packages/atlas/src/views/viewer/NftMarketplaceView/FeaturedNftsSection/FeatureNftModal.tsx similarity index 100% rename from packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeatureNftModal.tsx rename to packages/atlas/src/views/viewer/NftMarketplaceView/FeaturedNftsSection/FeatureNftModal.tsx diff --git a/packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeaturedNftsSection.styles.ts b/packages/atlas/src/views/viewer/NftMarketplaceView/FeaturedNftsSection/FeaturedNftsSection.styles.ts similarity index 100% rename from packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeaturedNftsSection.styles.ts rename to packages/atlas/src/views/viewer/NftMarketplaceView/FeaturedNftsSection/FeaturedNftsSection.styles.ts diff --git a/packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeaturedNftsSection.tsx b/packages/atlas/src/views/viewer/NftMarketplaceView/FeaturedNftsSection/FeaturedNftsSection.tsx similarity index 100% rename from packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeaturedNftsSection.tsx rename to packages/atlas/src/views/viewer/NftMarketplaceView/FeaturedNftsSection/FeaturedNftsSection.tsx diff --git a/packages/atlas/src/views/viewer/MarketplaceView/tabs/MarketplaceNftTab.tsx b/packages/atlas/src/views/viewer/NftMarketplaceView/NftMarketplaceView.tsx similarity index 54% rename from packages/atlas/src/views/viewer/MarketplaceView/tabs/MarketplaceNftTab.tsx rename to packages/atlas/src/views/viewer/NftMarketplaceView/NftMarketplaceView.tsx index 740b743539..2c9c6b9297 100644 --- a/packages/atlas/src/views/viewer/MarketplaceView/tabs/MarketplaceNftTab.tsx +++ b/packages/atlas/src/views/viewer/NftMarketplaceView/NftMarketplaceView.tsx @@ -1,19 +1,22 @@ +import styled from '@emotion/styled' + import { useFeaturedNftsVideos } from '@/api/hooks/nfts' import { AllNftSection } from '@/components/AllNftSection' import { LimitedWidthContainer } from '@/components/LimitedWidthContainer' import { MarketplaceCarousel } from '@/components/NftCarousel/MarketplaceCarousel' import { TopSellingChannelsTable } from '@/components/TopSellingChannelsTable' import { useHeadTags } from '@/hooks/useHeadTags' -import { FeaturedNftsSection } from '@/views/viewer/MarketplaceView/FeaturedNftsSection/FeaturedNftsSection' -import { TableFullWitdhtWrapper } from '@/views/viewer/MarketplaceView/MarketplaceView.styles' +import { cVar, media, sizes } from '@/styles' + +import { FeaturedNftsSection } from './FeaturedNftsSection/FeaturedNftsSection' -export const MarketplaceNftTab = () => { +export const NftMarketplaceView = () => { const headTags = useHeadTags('NFT - Marketplace') const { nfts, loading } = useFeaturedNftsVideos() return ( - <> + {headTags} @@ -25,6 +28,27 @@ export const MarketplaceNftTab = () => { - + ) } + +const MarketplaceWrapper = styled.div` + padding: ${sizes(4)} 0; + display: grid; + gap: ${sizes(8)}; + ${media.md} { + padding: ${sizes(8)} 0; + gap: ${sizes(16)}; + } +` + +const TableFullWitdhtWrapper = styled.div` + width: calc(100% + var(--size-global-horizontal-padding) * 2); + margin-left: calc(var(--size-global-horizontal-padding) * -1); + background-color: ${cVar('colorBackgroundMuted')}; + padding: ${sizes(8)} var(--size-global-horizontal-padding); + + ${media.md} { + padding: ${sizes(16)} var(--size-global-horizontal-padding); + } +` diff --git a/packages/atlas/src/views/viewer/NftMarketplaceView/index.ts b/packages/atlas/src/views/viewer/NftMarketplaceView/index.ts new file mode 100644 index 0000000000..36e729502b --- /dev/null +++ b/packages/atlas/src/views/viewer/NftMarketplaceView/index.ts @@ -0,0 +1 @@ +export * from './NftMarketplaceView' diff --git a/packages/atlas/src/views/viewer/PortfolioView/tabs/PortfolioNftTab.tsx b/packages/atlas/src/views/viewer/PortfolioView/tabs/PortfolioNftTab.tsx index 40df727aa4..ff27b5fb23 100644 --- a/packages/atlas/src/views/viewer/PortfolioView/tabs/PortfolioNftTab.tsx +++ b/packages/atlas/src/views/viewer/PortfolioView/tabs/PortfolioNftTab.tsx @@ -60,7 +60,7 @@ export const PortfolioNftTab = () => { title="You don’t own any NFTs yet" subtitle="When you buy any NFTs you will be able to manage them and view from this page." button={ - } diff --git a/packages/atlas/src/views/viewer/ViewerLayout.tsx b/packages/atlas/src/views/viewer/ViewerLayout.tsx index 1d2bee806b..7914ca6633 100644 --- a/packages/atlas/src/views/viewer/ViewerLayout.tsx +++ b/packages/atlas/src/views/viewer/ViewerLayout.tsx @@ -36,7 +36,12 @@ const CategoryView = lazy(() => import('./CategoryView').then((module) => ({ def const ChannelView = lazy(() => import('./ChannelView').then((module) => ({ default: module.ChannelView }))) const ChannelsView = lazy(() => import('./ChannelsView').then((module) => ({ default: module.ChannelsView }))) const HomeView = lazy(() => import('./HomeView').then((module) => ({ default: module.HomeView }))) -const MarketplaceView = lazy(() => import('./MarketplaceView').then((module) => ({ default: module.MarketplaceView }))) +const NftMarketplaceView = lazy(() => + import('./NftMarketplaceView').then((module) => ({ default: module.NftMarketplaceView })) +) +const CrtMarketplaceView = lazy(() => + import('./CrtMarketplaceView').then((module) => ({ default: module.CrtMarketplaceView })) +) const MemberView = lazy(() => import('./MemberView').then((module) => ({ default: module.MemberView }))) const MembershipSettingsView = lazy(() => import('./MembershipSettingsView').then((module) => ({ default: module.MembershipSettingsView })) @@ -62,7 +67,8 @@ const viewerRoutes = [ { path: relativeRoutes.viewer.category(), element: }, { path: relativeRoutes.viewer.memberById(), element: }, { path: relativeRoutes.viewer.member(), element: }, - { path: relativeRoutes.viewer.marketplace(), element: }, + { path: relativeRoutes.viewer.crtMarketplace(), element: }, + { path: relativeRoutes.viewer.nftMarketplace(), element: }, ...(atlasConfig.features.ypp.googleConsoleClientId ? [ { path: relativeRoutes.viewer.ypp(), element: },