Skip to content

Commit

Permalink
🔀 Separate marketplaces (#6364)
Browse files Browse the repository at this point in the history
* Remove old marketplace view

* Create new views

* Adjust sidebar and link to new paths
  • Loading branch information
ikprk authored Jun 3, 2024
1 parent 5ad4851 commit cc48d35
Show file tree
Hide file tree
Showing 15 changed files with 85 additions and 114 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
3 changes: 2 additions & 1 deletion packages/atlas/src/config/routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -66,7 +68,8 @@ export const MarketplaceCrtTab = () => {
) ?? []

return (
<>
<MarketplaceWrapper>
{headTags}
<MarketplaceCarousel type="crt" crts={filteredTokens ?? []} isLoading={loading} />

{featuredCrts.length > 4 && (
Expand All @@ -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);
}
`
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './CrtMarketplaceView'

This file was deleted.

This file was deleted.

1 change: 0 additions & 1 deletion packages/atlas/src/views/viewer/MarketplaceView/index.ts

This file was deleted.

Original file line number Diff line number Diff line change
@@ -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 />
Expand All @@ -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);
}
`
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './NftMarketplaceView'
Original file line number Diff line number Diff line change
Expand Up @@ -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>
}
Expand Down
10 changes: 8 additions & 2 deletions packages/atlas/src/views/viewer/ViewerLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 }))
Expand All @@ -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 /> },
Expand Down

0 comments on commit cc48d35

Please sign in to comment.