CRT marketplace related fixes

WRadoslaw · Apr 12, 2024 · e52efcd · e52efcd
1 parent b7841a9
commit e52efcd
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 24 deletions.
diff --git a/...mponents/NftCarousel/components/MarketplaceCarouselCard/MarketplaceCarouselCard.styles.ts b/...mponents/NftCarousel/components/MarketplaceCarouselCard/MarketplaceCarouselCard.styles.ts
@@ -13,6 +13,7 @@ export const InformationContainer = styled.div<{ isPaused: boolean }>`
 
   ${media.sm} {
     width: fit-content;
+    max-width: 90%;
     position: absolute;
     margin: 0;
     opacity: ${({ isPaused }) => (isPaused ? 1 : 0.25)};

diff --git a/packages/atlas/src/components/_crt/CrtCard/CrtCard.tsx b/packages/atlas/src/components/_crt/CrtCard/CrtCard.tsx
@@ -31,9 +31,18 @@ export type CrtCardProps = {
   size?: 'medium' | 'small'
   status?: CrtSaleTypes
   isLoading?: boolean
+  className?: string
 } & CrtMainInfoProps
 
-export const CrtCard = ({ channelRevenue, marketCap, size, status, isLoading, ...mainInfoProps }: CrtCardProps) => {
+export const CrtCard = ({
+  channelRevenue,
+  marketCap,
+  size,
+  status,
+  isLoading,
+  className,
+  ...mainInfoProps
+}: CrtCardProps) => {
   const isSmall = size === 'small'
   const details = useMemo(() => {
     const baseDetails: {
@@ -55,7 +64,7 @@ export const CrtCard = ({ channelRevenue, marketCap, size, status, isLoading, ..
           <FlexBox alignItems="center" width="fit-content">
             <SvgActionNotForSale />
             <Text variant="h300" as="h3" color="colorText">
-              No active sale
+              No sale
             </Text>
           </FlexBox>
         ),
@@ -156,7 +165,7 @@ export const CrtCard = ({ channelRevenue, marketCap, size, status, isLoading, ..
   }
 
   return (
-    <FlexBox flow="column" gap={0}>
+    <FlexBox className={className} flow="column" gap={0}>
       <CrtMainInfo size={size} {...mainInfoProps}>
         <AvatarBox width="100%" justifyContent="space-between">
           <Avatar

diff --git a/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.tsx b/packages/atlas/src/components/_crt/VideoPicker/VideoPicker.tsx
@@ -110,6 +110,12 @@ const SelectVideoDialog = ({ channelId, onVideoSelection, show, onClose }: Selec
         channel: {
           id_eq: channelId,
         },
+        media: {
+          isAccepted_eq: true,
+        },
+        thumbnailPhoto: {
+          isAccepted_eq: true,
+        },
       },
       limit: 5,
     },

diff --git a/packages/atlas/src/hooks/useCrtSectionFilters.tsx b/packages/atlas/src/hooks/useCrtSectionFilters.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useMemo, useState } from 'react'
 
 import { CreatorTokenOrderByInput, CreatorTokenWhereInput } from '@/api/queries/__generated__/baseTypes.generated'
-import { SvgActionSettings, SvgActionShoppingCart } from '@/assets/icons'
+import { SvgActionShoppingCart } from '@/assets/icons'
 import { FilterButtonOption, SectionFilter } from '@/components/FilterButton'
 
 export const CRT_STATUSES: FilterButtonOption[] = [
@@ -11,12 +11,12 @@ export const CRT_STATUSES: FilterButtonOption[] = [
     applied: false,
     label: 'On market',
   },
-  {
-    value: 'sale',
-    selected: false,
-    applied: false,
-    label: 'On sale',
-  },
+  // {
+  //   value: 'sale',
+  //   selected: false,
+  //   applied: false,
+  //   label: 'On sale',
+  // },
   {
     value: 'inactive',
     selected: false,
@@ -37,7 +37,7 @@ export const FILTERS: SectionFilter[] = [
     type: 'checkbox',
     options: CRT_STATUSES,
   },
-  { name: 'other', type: 'checkbox', options: OTHER_FILTERS, label: 'Other', icon: <SvgActionSettings /> },
+  // { name: 'other', type: 'checkbox', options: OTHER_FILTERS, label: 'Other', icon: <SvgActionSettings /> },
 ]
 
 export const SORTING_FILTERS = [

diff --git a/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtDashboardMainTab.tsx b/packages/atlas/src/views/studio/CrtDashboard/tabs/CrtDashboardMainTab.tsx
@@ -181,11 +181,18 @@ const DashboardTokenProgress = ({ token }: Pick<CrtDashboardMainTabProps, 'token
     : ''
 
   const currentMemberStep = useMemo((): number => {
-    if (!token.description) return 1
+    if (!(token.description || token.benefits.length || token.trailerVideo.length)) return 1
     if (!token.ammCurves.length && !token.sales.length) return 2
     if (!token.revenueShares.length) return 3
     return 4
-  }, [token.description, token.ammCurves.length, token.sales.length, token.revenueShares.length])
+  }, [
+    token.description,
+    token.benefits.length,
+    token.trailerVideo.length,
+    token.ammCurves.length,
+    token.sales.length,
+    token.revenueShares.length,
+  ])
 
   const getButtonForStep = useCallback(
     (stepNo: number) => {

diff --git a/packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeaturedNftsSection.tsx b/packages/atlas/src/views/viewer/MarketplaceView/FeaturedNftsSection/FeaturedNftsSection.tsx
@@ -1,3 +1,4 @@
+import styled from '@emotion/styled'
 import { FC, useState } from 'react'
 
 import { useNfts } from '@/api/hooks/nfts'
@@ -149,7 +150,11 @@ export const FeaturedNftsSection: FC = () => {
             }}
             contentProps={{
               type: 'carousel',
-              children: items.map((nft, idx) => <NftTileViewer isInCarousel nftId={nft.id} key={idx} />),
+              children: items.map((nft, idx) => (
+                <NftTileWrapper key={idx}>
+                  <NftTileViewer isInCarousel nftId={nft.id} />
+                </NftTileWrapper>
+              )),
               spaceBetween: mdMatch ? 24 : 16,
               breakpoints: responsive,
             }}
@@ -176,3 +181,8 @@ export const FeaturedNftsSection: FC = () => {
     </LimitedWidthContainer>
   )
 }
+
+const NftTileWrapper = styled.div`
+  min-height: 100%;
+  display: flex;
+`
diff --git a/packages/atlas/src/views/viewer/MarketplaceView/tabs/MarketplaceCrtTab.tsx b/packages/atlas/src/views/viewer/MarketplaceView/tabs/MarketplaceCrtTab.tsx
@@ -1,3 +1,4 @@
+import styled from '@emotion/styled'
 import BN from 'bn.js'
 
 import { CreatorTokenOrderByInput } from '@/api/queries/__generated__/baseTypes.generated'
@@ -20,19 +21,16 @@ export const MarketplaceCrtTab = () => {
     variables: {
       where: {
         isFeatured_eq: true,
-        trailerVideo_every: {
-          id_isNull: false,
-        },
       },
-      limit: 10,
       orderBy: CreatorTokenOrderByInput.CurrentAmmSaleMintedByAmmDesc,
     },
   })
 
+  const filteredTokens = data?.creatorTokens.filter((token) => !!token.trailerVideo.length).slice(0, 10) ?? []
+
   const featuredCrts =
-    data?.creatorTokens
-      .slice(5)
-      .map(({ id, symbol, channel, totalSupply, accountsNum, lastPrice, currentAmmSale, description, currentSale }) => {
+    filteredTokens.map(
+      ({ id, symbol, channel, totalSupply, accountsNum, lastPrice, currentAmmSale, description, currentSale }) => {
         const status: CrtSaleTypes = currentSale
           ? {
               type: 'sale' as const,
@@ -48,7 +46,7 @@ export const MarketplaceCrtTab = () => {
             }
 
         return (
-          <CrtCard
+          <StyledCrtCard
             key={id}
             status={status}
             symbol={symbol ?? 'N/A'}
@@ -63,11 +61,12 @@ export const MarketplaceCrtTab = () => {
             accountsNum={accountsNum}
           />
         )
-      }) ?? []
+      }
+    ) ?? []
 
   return (
     <>
-      <MarketplaceCarousel type="crt" crts={data?.creatorTokens.slice(6) ?? []} isLoading={loading} />
+      <MarketplaceCarousel type="crt" crts={filteredTokens ?? []} isLoading={loading} />
 
       {featuredCrts.length > 4 && (
         <Section
@@ -94,3 +93,7 @@ export const MarketplaceCrtTab = () => {
     </>
   )
 }
+
+const StyledCrtCard = styled(CrtCard)`
+  min-height: 100%;
+`