🔀 Separate marketplaces (Joystream#6364)

* Remove old marketplace view

* Create new views

* Adjust sidebar and link to new paths

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: <SvgSidebarMarketplace />,
-    expandedName: 'Marketplace',
-    name: 'Market',
-    to: absoluteRoutes.viewer.marketplace(),
+    icon: <SvgSidebarToken />,
+    expandedName: 'Tokens',
+    name: 'Tokens',
+    to: absoluteRoutes.viewer.crtMarketplace(),
+    bottomNav: true,
+  },
+  {
+    icon: <SvgSidebarNft />,
+    expandedName: 'NFTs',
+    name: 'NFTs',
+    to: absoluteRoutes.viewer.nftMarketplace(),
     bottomNav: true,
   },
   ...(atlasConfig.features.ypp.googleConsoleClientId

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()

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',

packages/atlas/src/views/viewer/MarketplaceView/tabs/MarketplaceCrtTab.tsx → 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 (
-    <>
+    <MarketplaceWrapper>
+      {headTags}
       <MarketplaceCarousel type="crt" crts={filteredTokens ?? []} isLoading={loading} />
 
       {featuredCrts.length > 4 && (
@@ -91,10 +94,31 @@ export const MarketplaceCrtTab = () => {
         </LimitedWidthContainer>
       </TableFullWitdhtWrapper>
       <AllTokensSection />
-    </>
+    </MarketplaceWrapper>
   )
 }
 
 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);
+  }
+`

packages/atlas/src/views/viewer/CrtMarketplaceView/index.ts

@@ -0,0 +1 @@
+export * from './CrtMarketplaceView'

packages/atlas/src/views/viewer/MarketplaceView/tabs/MarketplaceNftTab.tsx → 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 (
-    <>
+    <MarketplaceWrapper>
       {headTags}
       <MarketplaceCarousel type="nft" nfts={nfts ?? []} isLoading={loading} />
       <FeaturedNftsSection />
@@ -25,6 +28,27 @@ export const MarketplaceNftTab = () => {
       <LimitedWidthContainer big noBottomPadding fullWidth>
         <AllNftSection />
       </LimitedWidthContainer>
-    </>
+    </MarketplaceWrapper>
   )
 }
+
+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);
+  }
+`

packages/atlas/src/views/viewer/NftMarketplaceView/index.ts

@@ -0,0 +1 @@
+export * from './NftMarketplaceView'

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={
-              <Button size="large" variant="secondary" to={absoluteRoutes.viewer.marketplace()}>
+              <Button size="large" variant="secondary" to={absoluteRoutes.viewer.nftMarketplace()}>
                 Explore NFTs
               </Button>
             }

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: <CategoryView /> },
   { path: relativeRoutes.viewer.memberById(), element: <MemberView /> },
   { path: relativeRoutes.viewer.member(), element: <MemberView /> },
-  { path: relativeRoutes.viewer.marketplace(), element: <MarketplaceView /> },
+  { path: relativeRoutes.viewer.crtMarketplace(), element: <CrtMarketplaceView /> },
+  { path: relativeRoutes.viewer.nftMarketplace(), element: <NftMarketplaceView /> },
   ...(atlasConfig.features.ypp.googleConsoleClientId
     ? [
         { path: relativeRoutes.viewer.ypp(), element: <YppLandingView /> },