diff --git a/packages/atlas/src/api/client/index.ts b/packages/atlas/src/api/client/index.ts index 276fad64f1..f8e236cd6e 100644 --- a/packages/atlas/src/api/client/index.ts +++ b/packages/atlas/src/api/client/index.ts @@ -3,12 +3,20 @@ import { GraphQLWsLink } from '@apollo/client/link/subscriptions' import { getMainDefinition } from '@apollo/client/utilities' import { createClient } from 'graphql-ws' -import { ORION_GRAPHQL_URL, QUERY_NODE_GRAPHQL_SUBSCRIPTION_URL } from '@/config/env' +import { + FAUCET_URL, + ORION_AUTH_URL, + ORION_GRAPHQL_URL, + QUERY_NODE_GRAPHQL_SUBSCRIPTION_URL, + YPP_FAUCET_URL, +} from '@/config/env' import { useUserLocationStore } from '@/providers/userLocation' import { UserEventsLogger } from '@/utils/logs' import { cache } from './cache' +const followedRequests = [YPP_FAUCET_URL, ORION_GRAPHQL_URL, ORION_AUTH_URL, FAUCET_URL] + const initializePerformanceObserver = () => { try { const observer = new PerformanceObserver((list) => { @@ -17,6 +25,12 @@ const initializePerformanceObserver = () => { const queryString = entry.name.split('?')?.[1] const params = new URLSearchParams(queryString) const queryType = params.get('queryName') + + // Only follow requests to Atlas infra + if (!queryType && !followedRequests.some((allowedUrl) => entry.name.includes(allowedUrl))) { + return + } + UserEventsLogger.logUserEvent('request-response-time', { requestName: queryType ?? entry.name, timeToComplete: entry.duration, diff --git a/packages/atlas/src/components/_crt/CrtPortfolioTable/CrtPortfolioTable.tsx b/packages/atlas/src/components/_crt/CrtPortfolioTable/CrtPortfolioTable.tsx index a0b572ad5f..4e8be4f796 100644 --- a/packages/atlas/src/components/_crt/CrtPortfolioTable/CrtPortfolioTable.tsx +++ b/packages/atlas/src/components/_crt/CrtPortfolioTable/CrtPortfolioTable.tsx @@ -209,7 +209,12 @@ export const TokenPortfolioUtils = ({ const [ref, setRef] = useState(null) return ( - + { + e.stopPropagation() + e.preventDefault() + }} + > - ) : ( - - ) - ) : ( - - )} - - - - - - - - - {hasAnotherUnsyncedChannel && selectedChannelTitle && ( - <> - Your channel "{selectedChannelTitle}" is already part of the YouTube Partner Program.{' '} - - Select a different channel - {' '} - to apply again. - - )} - {yppAtlasStatus !== 'ypp-signed' && 'It takes under 1 minute and is 100% free.'} - - - - - - - - - {items && items.length >= 7 && ( - - )} - - ) -} diff --git a/packages/atlas/src/views/global/YppLandingView/oldSections/YppRewardSection.styles.ts b/packages/atlas/src/views/global/YppLandingView/oldSections/YppRewardSection.styles.ts deleted file mode 100644 index 4f74261f00..0000000000 --- a/packages/atlas/src/views/global/YppLandingView/oldSections/YppRewardSection.styles.ts +++ /dev/null @@ -1,58 +0,0 @@ -import styled from '@emotion/styled' - -import { GridItem } from '@/components/LayoutGrid' -import { Button } from '@/components/_buttons/Button' -import { cVar, media, sizes } from '@/styles' -import { Anchor } from '@/views/global/YppLandingView/YppAuthorizationModal/YppAuthorizationModal.styles' - -export const BenefitsCardButton = styled(Button)` - border-radius: 999px; -` - -export const BenefitsCardsButtonsGroup = styled.div` - text-align: center; - display: grid; - overflow-x: auto; - white-space: nowrap; - margin: ${sizes(16)} 0 ${sizes(8)} 0; - - ::-webkit-scrollbar { - display: none; - } - - gap: ${sizes(2)}; - - ${media.sm} { - grid-template-columns: repeat(2, 1fr); - } - - ${media.md} { - grid-template-columns: repeat(3, 1fr); - } - - ${media.lg} { - grid-template-columns: repeat(6, 1fr); - } -` - -export const BenefitsCardsContainerGridItem = styled(GridItem)` - display: grid; - gap: ${sizes(2)}; -` - -export const ColorAnchor = styled(Anchor)` - color: ${cVar('colorTextPrimary')}; -` - -export const RewardsSubtitleGridItem = styled(GridItem)` - display: grid; - gap: ${sizes(4)}; - margin-top: ${sizes(8)}; -` - -export const RewardsSubtitleWrapper = styled.div` - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-end; -` diff --git a/packages/atlas/src/views/global/YppLandingView/oldSections/YppRewardSection.tsx b/packages/atlas/src/views/global/YppLandingView/oldSections/YppRewardSection.tsx deleted file mode 100644 index b1b2907e96..0000000000 --- a/packages/atlas/src/views/global/YppLandingView/oldSections/YppRewardSection.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import { FC, useRef } from 'react' - -import { Information } from '@/components/Information' -import { FlexGridItem, GridItem, LayoutGrid } from '@/components/LayoutGrid' -import { Text } from '@/components/Text' -import { TooltipText } from '@/components/Tooltip/Tooltip.styles' -import { TierCard } from '@/components/_ypp/TierCard' -import { atlasConfig } from '@/config' -import { useMediaMatch } from '@/hooks/useMediaMatch' -import { getTierRewards } from '@/utils/ypp' -import { useSectionTextVariants } from '@/views/global/YppLandingView/sections/useSectionTextVariants' - -import { ColorAnchor } from './YppRewardSection.styles' - -import { - BackgroundContainer, - CenteredLayoutGrid, - RewardsSubText, - StyledLimitedWidthContainer, - TierCardWrapper, -} from '../YppLandingView.styles' - -export const calculateReward = ( - amount: number | number[] | { min: number | null; max: number } | null, - multiplier: number | number[], - tier: number -) => { - if (amount === null) { - return null - } else if (typeof amount === 'number') { - return { - type: 'number' as const, - amount: amount * (typeof multiplier === 'number' ? multiplier : multiplier[tier]), - } - } else if (Array.isArray(amount)) { - return { - type: 'number' as const, - amount: amount[tier], - } - } else { - return { type: 'range' as const, min: amount.min, max: amount.max } - } -} - -export const YppRewardSection: FC = () => { - const mdMatch = useMediaMatch('md') - const tiers = atlasConfig.features.ypp.tiersDefinition - const [titleVariant, subtitleVariant] = useSectionTextVariants() - const ref = useRef(null) - - if (!tiers?.length) { - return null - } - - return ( - - - - - - Rewards based on quality and popularity - - - - - Each participating channel is reviewed by the verification team and assigned to one of the reward tiers - below - - - - - - {tiers.map((tier) => { - const signupMultiplier = tier.tier === 'bronze' ? 1 : atlasConfig.features.ypp.tierBoostMultiplier || 1 - const referralMultiplier = atlasConfig.features.ypp.tierBoostMultiplier || 1 - const modifiedRewards = [ - tier.rewards[0] * signupMultiplier, - tier.rewards[1], - (getTierRewards('diamond')?.referral || 0) * referralMultiplier, - ] - return - })} - - *Referral rewards depend on the tier of the invited channel. - - - - - Payments are made in {atlasConfig.joystream.tokenTicker} tokens - - - {atlasConfig.joystream.tokenTicker} token is a native crypto asset of Joystream blockchain which - powers {atlasConfig.general.appName}. It is used for trading Creator Tokens, NFTs and covering - blockchain processing fees. It is also used for voting on proposals and partaking in council - elections.{' '} - - Purchase {atlasConfig.joystream.tokenTicker} - - - } - multiline - reference={ref.current} - /> - - - - - ) -} diff --git a/packages/atlas/src/views/global/YppLandingView/oldSections/YppSignupVideo.tsx b/packages/atlas/src/views/global/YppLandingView/oldSections/YppSignupVideo.tsx deleted file mode 100644 index d43a96c59f..0000000000 --- a/packages/atlas/src/views/global/YppLandingView/oldSections/YppSignupVideo.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import styled from '@emotion/styled' - -import { GridItem } from '@/components/LayoutGrid' -import { Text } from '@/components/Text' -import { SkeletonLoader } from '@/components/_loaders/SkeletonLoader' -import { useMediaMatch } from '@/hooks/useMediaMatch' -import { - BackgroundContainer, - CenteredLayoutGrid, - StyledLimitedWidthContainerVideo, -} from '@/views/global/YppLandingView/YppLandingView.styles' -import { useSectionTextVariants } from '@/views/global/YppLandingView/sections/useSectionTextVariants' - -export const YppSignupVideo = () => { - const mdMatch = useMediaMatch('md') - const [titleVariant, subtitleVariant] = useSectionTextVariants() - - return ( - - - - - - Sign up in 60 seconds - - - Watch the sign up demo by one of Joystream members. - - - - - - - - - - - ) -} - -const PlayerContainer = styled.div` - width: 100%; - position: relative; - aspect-ratio: 16/9; -` - -export const PlayerSkeletonLoader = styled(SkeletonLoader)` - position: absolute; - top: 0; -` - -const IframeVideo = styled.iframe` - border: none; - width: 640px; - height: 364px; - max-width: 100%; - max-height: 55vw; -` diff --git a/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx b/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx index 5b89c27aa4..98758fbc1d 100644 --- a/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx +++ b/packages/atlas/src/views/global/YppLandingView/sections/YppHero.tsx @@ -158,6 +158,7 @@ export const YppHero: FC = ({ onSignUpClick, yppAtlasStatus, onVie fullWidth={!xsMatch} size={xxsMatch && !xsMatch ? 'large' : smMatch ? 'large' : 'medium'} variant="secondary" + id="rewards-new-channel-button" > Create New Channel diff --git a/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardMainTab.tsx b/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardMainTab.tsx index f1f4d57979..abe6917fd0 100644 --- a/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardMainTab.tsx +++ b/packages/atlas/src/views/studio/YppDashboard/tabs/YppDashboardMainTab.tsx @@ -53,7 +53,7 @@ const benefitsMetadata = { }, twitterPost: { title: 'Post on X', - description: `Follow JoystreamDAO on X and post about why you signed up to ${atlasConfig.general.appName} using hashtag #${atlasConfig.general.appName}Web3Creators mentioning @JoystreamDAO to get a chance of weekly reward.`, + description: `Follow JoystreamDAO on X and post about why you signed up to ${atlasConfig.general.appName} using hashtag #${atlasConfig.general.appName}Web3Creators mentioning @JoystreamDAO and your ${atlasConfig.general.appName} Channel Name to get a chance of weekly reward.`, reward: '10 USD', actionLink: 'https://twitter.com/joystreamdao?lang=en', tooltipLink: @@ -491,7 +491,7 @@ export const YppDashboardMainTab: FC = () => { rewardNode={benefitsMetadata.shareNft.reward} description={ <> - Drop the link of your post to{' '} + Share NFT from Gleev on social media of your choice and drop the link of your post to{' '} #shared-NFTs on Discord to participate in rewards. @@ -518,7 +518,7 @@ export const YppDashboardMainTab: FC = () => { rewardNode={benefitsMetadata.shareToken.reward} description={ <> - Drop the link of your post to{' '} + Share your CRT page from Gleev on social media of your choice and drop the link of your post to{' '} #shared-CRTs on Discord to participate in rewards. @@ -595,7 +595,7 @@ const SilverTierWrapper = styled(TierWrapper)` export const BenefitsContainer = ({ children, title }: { children: ReactNode[] | ReactNode; title: string }) => { const drawer = useRef(null) - const [isDrawerActive, setDrawerActive] = useState(true) + const [isDrawerActive, setDrawerActive] = useState(false) return ( diff --git a/packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx b/packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx index 73b10e6035..b3c5fe17e9 100644 --- a/packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx +++ b/packages/atlas/src/views/viewer/ChannelView/ChannelView.tsx @@ -24,6 +24,7 @@ import { CollectorsBox } from '@/components/_channel/CollectorsBox' import { ContextMenu } from '@/components/_overlays/ContextMenu' import { ReportModal } from '@/components/_overlays/ReportModal' import { atlasConfig } from '@/config' +import { getPublicCryptoVideoFilter } from '@/config/contentFilter' import { absoluteRoutes } from '@/config/routes' import { NFT_SORT_OPTIONS, VIDEO_SORT_OPTIONS } from '@/config/sorting' import { useGetAssetUrl } from '@/hooks/useGetAssetUrl' @@ -92,20 +93,12 @@ export const ChannelView: FC = () => { tab === 'Token' ? !!tab && (isChannelOwner || !!channel?.creatorToken?.token.id) : !!tab ) const { videoCount } = useVideoCount({ - where: { + where: getPublicCryptoVideoFilter({ channel: { id_eq: id, }, - isPublic_eq: true, createdAt_lt: USER_TIMESTAMP, - isCensored_eq: false, - thumbnailPhoto: { - isAccepted_eq: true, - }, - media: { - isAccepted_eq: true, - }, - }, + }), }) const { data: nftCountData } = useGetNftsCountQuery({ variables: { diff --git a/packages/atlas/src/views/viewer/ChannelView/ChannelViewTabs/ChannelVideos.tsx b/packages/atlas/src/views/viewer/ChannelView/ChannelViewTabs/ChannelVideos.tsx index f3d82771b7..6472716bb6 100644 --- a/packages/atlas/src/views/viewer/ChannelView/ChannelViewTabs/ChannelVideos.tsx +++ b/packages/atlas/src/views/viewer/ChannelView/ChannelViewTabs/ChannelVideos.tsx @@ -7,6 +7,7 @@ import { EmptyFallback } from '@/components/EmptyFallback' import { Grid } from '@/components/Grid' import { ViewErrorFallback } from '@/components/ViewErrorFallback' import { VideoTileViewer } from '@/components/_video/VideoTileViewer' +import { getPublicCryptoVideoFilter } from '@/config/contentFilter' import { transitions } from '@/styles' import { createPlaceholderData } from '@/utils/data' import { SentryLogger } from '@/utils/logs' @@ -49,21 +50,12 @@ export const ChannelVideos: FC = ({ orderBy: sortVideosBy, limit: tilesPerPage, offset: currentPage * tilesPerPage, - where: { + where: getPublicCryptoVideoFilter({ channel: { id_eq: channelId, }, - isPublic_eq: true, createdAt_lt: USER_TIMESTAMP, - isCensored_eq: false, - isShort_eq: false, - thumbnailPhoto: { - isAccepted_eq: true, - }, - media: { - isAccepted_eq: true, - }, - }, + }), }, }) 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..2069d02a3b 100644 --- a/packages/atlas/src/views/viewer/ViewerLayout.tsx +++ b/packages/atlas/src/views/viewer/ViewerLayout.tsx @@ -22,12 +22,8 @@ import { useUser } from '@/providers/user/user.hooks' import { media, transitions } from '@/styles' import { RoutingState } from '@/types/routing' -// Currently the newest version is at main file and the old one was moved to new file -const YppLandingViewTest = lazy(() => - import('@/views/global/YppLandingView').then((module) => ({ default: module.YppLandingView })) -) const YppLandingView = lazy(() => - import('@/views/global/YppLandingView/YppLandingViewOld').then((module) => ({ default: module.YppLandingViewOld })) + import('@/views/global/YppLandingView').then((module) => ({ default: module.YppLandingView })) ) const MemberNotificationsView = lazy(() => import('@/views/notifications').then((module) => ({ default: module.MemberNotificationsView })) @@ -36,7 +32,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,12 +63,10 @@ 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: }, - { path: relativeRoutes.viewer.yppTest(), element: }, - ] + ? [{ path: relativeRoutes.viewer.ypp(), element: }] : []), { path: relativeRoutes.viewer.referrals(), element: }, ]