From 17d1345b52b17aad90be8d96bad2a23315220d14 Mon Sep 17 00:00:00 2001 From: lauchness Date: Thu, 31 Aug 2023 10:49:29 -0300 Subject: [PATCH] feat: post festival page --- src/app/page.tsx | 48 +++------- .../BasedChallenge/BasedChallenge.tsx | 40 +++++++++ .../PageContainer/PageContainer.tsx | 10 +++ .../PostFestivalPage/PostFestivalPage.tsx | 87 +++++++++++++++++++ src/components/Tabs/Tabs.tsx | 8 +- src/components/Tabs/TabsListItems.tsx | 27 +++--- src/components/Trending/Trending.tsx | 4 +- 7 files changed, 172 insertions(+), 52 deletions(-) create mode 100644 src/components/BasedChallenge/BasedChallenge.tsx create mode 100644 src/components/PostFestivalPage/PostFestivalPage.tsx diff --git a/src/app/page.tsx b/src/app/page.tsx index 8f1c4718..0ada5daa 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -19,24 +19,19 @@ import { getNow } from '@/utils/getNow' import { getArweaveById } from '@/utils/getArweaveById' import { getDropDate } from '@/utils/getDropDate' import { siteDataSuffix } from '@/components/MintDialog/types' -import { Drop } from '@/config/partners/types' +import { Drop, Partner } from '@/config/partners/types' import { Gift } from '@/components/icons/Gift' import { DropCardList } from '@/components/DropCard/DropCardList' import { getCollections } from '@/utils/getCollections' import { ArrowRight } from '@/components/icons/ArrowRight' import { CBSubscribeDialog } from '@/components/CBSubscribeDialog' +import { PostFestivalPage } from '@/components/PostFestivalPage/PostFestivalPage' +import { BasedChallenge } from '@/components/BasedChallenge/BasedChallenge' type Props = { searchParams: { [key: string]: string | string[] | undefined } } -const CHALLENGE_IMAGES = [ - { url: '/challenge/1.png', alt: 'Based NFT Drop' }, - { url: '/challenge/2.png', alt: '' }, - { url: '/challenge/3.png', alt: '' }, - { url: '/challenge/4.png', alt: '' }, -] - const Home = async ({ searchParams }: Props) => { const spoofDateParam = searchParams.spoofDate const spoofDate = Array.isArray(spoofDateParam) @@ -44,7 +39,7 @@ const Home = async ({ searchParams }: Props) => { : spoofDateParam const { partner, tabs, article, tweets, activeDrops } = await getPageData(spoofDate) - const { drops, name, icon } = partner + const { drops, name, icon } = partner || { drops: [], name: '', icon: '' } const dropAddressParam = searchParams.drop @@ -55,6 +50,10 @@ const Home = async ({ searchParams }: Props) => { const { featuredDrop, remainingDrops } = getDrops(drops, dropAddress) const collections = await getCollections(drops) + if (!partner) { + return + } + return (
@@ -64,29 +63,8 @@ const Home = async ({ searchParams }: Props) => { staticHeadline={!!dropAddress} floorAsk={collections[featuredDrop.address.toLowerCase()]?.floorAsk} /> -
-
-

Join the Based Challenge

-

- Claim your free onchain art, then watch it evolve as you mint more - on Base during Onchain Summer. Scan the QR code to get started. -

- - - -
-
- {CHALLENGE_IMAGES.map(({ url, alt }) => ( -
- {alt} -
- ))} -
-
+ + {remainingDrops?.length > 0 || article?.content ? (
@@ -243,7 +221,7 @@ const INITIAL_TABS: TabsComponentProps = { pastDrops: [], } -interface DropWithPartnerData extends Drop { +export interface DropWithPartnerData extends Drop { partner: string partnerIcon: string } @@ -252,7 +230,7 @@ async function getPageData(spoofDate?: string) { const now = getNow(spoofDate) const today = getDropDate(spoofDate) - const featuredPartner = schedule[today] || schedule[Object.keys(schedule)[0]] + const featuredPartner = (schedule[today] || null) as Partner | null const tabs: TabsComponentProps = Object.keys(schedule).reduce((acc, date) => { const scheduleDate = new Date(date) @@ -314,7 +292,7 @@ async function getPageData(spoofDate?: string) { .sort((a, b) => (a?.sequence ?? 0) - (b?.sequence ?? 0)) const [article, tweets] = await Promise.all([ - getArweaveById(featuredPartner.aarweaveDigest), + getArweaveById(featuredPartner?.aarweaveDigest ?? ''), getTweets(), ]) diff --git a/src/components/BasedChallenge/BasedChallenge.tsx b/src/components/BasedChallenge/BasedChallenge.tsx new file mode 100644 index 00000000..6862213b --- /dev/null +++ b/src/components/BasedChallenge/BasedChallenge.tsx @@ -0,0 +1,40 @@ +import { FC } from 'react' +import { CBSubscribeDialog } from '../CBSubscribeDialog' +import { Button } from '../Button' +import { ArrowRight } from '../icons/ArrowRight' +import Image from 'next/image' + +const CHALLENGE_IMAGES = [ + { url: '/challenge/1.png', alt: 'Based NFT Drop' }, + { url: '/challenge/2.png', alt: '' }, + { url: '/challenge/3.png', alt: '' }, + { url: '/challenge/4.png', alt: '' }, +] + +export const BasedChallenge: FC = ({}) => { + return ( +
+
+

Join the Based Challenge

+

+ Claim your free onchain art, then watch it evolve as you mint more on + Base during Onchain Summer. Scan the QR code to get started. +

+ + + +
+
+ {CHALLENGE_IMAGES.map(({ url, alt }) => ( +
+ {alt} +
+ ))} +
+
+ ) +} diff --git a/src/components/PageContainer/PageContainer.tsx b/src/components/PageContainer/PageContainer.tsx index b64394f0..4191aaa7 100644 --- a/src/components/PageContainer/PageContainer.tsx +++ b/src/components/PageContainer/PageContainer.tsx @@ -8,12 +8,14 @@ interface PageContainerProps { children: ReactNode subNavBgColor?: string subNavOverlap?: boolean + postFestival?: boolean } export const PageContainer: React.FC = ({ children, subNavBgColor, subNavOverlap = false, + postFestival = false, }) => { const isMismatched = useIsMisMatched() @@ -26,6 +28,14 @@ export const PageContainer: React.FC = ({ return ( <> + {postFestival ? ( +
+
+

+ Summer Never Ends +

+
+ ) : null}
{children}
diff --git a/src/components/PostFestivalPage/PostFestivalPage.tsx b/src/components/PostFestivalPage/PostFestivalPage.tsx new file mode 100644 index 00000000..ea209613 --- /dev/null +++ b/src/components/PostFestivalPage/PostFestivalPage.tsx @@ -0,0 +1,87 @@ +'use client' + +import { FC } from 'react' +import { PageContainer } from '../PageContainer' +import { Gift } from '../icons/Gift' +import { DropCardList } from '../DropCard/DropCardList' +import { DropWithPartnerData } from '@/app/page' +import { DropCard } from '../DropCard' +import { siteDataSuffix } from '@/components/MintDialog/types' +import { Trending, TrendingQueryResult } from '../Trending' +import { Tabs, TabsComponentProps } from '../Tabs' +import { BasedChallenge } from '../BasedChallenge/BasedChallenge' +import { useAccount } from 'wagmi' +import { l2 } from '@/config/chain' +import { useQuery } from 'react-query' +import { getTrendingData } from '@/utils/getTrendingData' + +interface PostFestivalPageProps { + activeDrops: DropWithPartnerData[] + tabs: TabsComponentProps +} + +export const PostFestivalPage: FC = ({ + activeDrops, + tabs, +}) => { + const { address: connectedWallet } = useAccount() + const chainId = l2.id + + const { data, error, isLoading } = useQuery({ + queryKey: [connectedWallet, chainId], + queryFn: ({ queryKey }) => { + const [connectedWallet, chainId] = queryKey + + return getTrendingData(connectedWallet as string, chainId as number) + }, + }) + + const hasActiveSection = + activeDrops.length > 0 || + (!isLoading && (data?.collections.length ?? 0) > 0) + + return ( + +
+ {hasActiveSection ? ( +
+
+
+ +
+
+

Active Mints

+
+
+ +
+ + {activeDrops.map((drop) => ( + + ))} + +
+ + +
+ ) : null} + +
+ +
+ +
+ + ) +} diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx index 9a9b3fbb..020a1624 100644 --- a/src/components/Tabs/Tabs.tsx +++ b/src/components/Tabs/Tabs.tsx @@ -13,9 +13,11 @@ export interface TabsComponentProps { } export const Tabs: FC = ({ upcomingDrops, pastDrops }) => { + const hasUpcomingDrops = upcomingDrops.length > 0 + return (
- + = ({ upcomingDrops, pastDrops }) => { pastLength={pastDrops.length} /> - + {upcomingDrops.map( ({ name, drops, banner, description, slug, brandColor }) => (
@@ -43,7 +45,7 @@ export const Tabs: FC = ({ upcomingDrops, pastDrops }) => { ) )} - + {pastDrops.map( ({ name, drops, banner, description, slug, brandColor }) => (
diff --git a/src/components/Tabs/TabsListItems.tsx b/src/components/Tabs/TabsListItems.tsx index c971f44b..5f5bce67 100644 --- a/src/components/Tabs/TabsListItems.tsx +++ b/src/components/Tabs/TabsListItems.tsx @@ -13,25 +13,28 @@ export const TabsListItems: FC = ({ upcomingLength, pastLength, }) => { + const hasUpcomingDrops = upcomingLength > 0 return ( <> - -
- upcoming{' '} -
- {upcomingLength} + {hasUpcomingDrops ? ( + +
+ upcoming{' '} +
+ {upcomingLength} +
-
- + + ) : null}
- active{' '} + {hasUpcomingDrops ? 'active' : 'mints'}{' '}
{pastLength}
diff --git a/src/components/Trending/Trending.tsx b/src/components/Trending/Trending.tsx index b26f2f87..70d4d197 100644 --- a/src/components/Trending/Trending.tsx +++ b/src/components/Trending/Trending.tsx @@ -24,7 +24,7 @@ import { MintType, siteDataSuffix } from '@/components/MintDialog/types' export interface TrendingComponentProps {} -interface QueryResult { +export interface TrendingQueryResult { collections: Collection[] } @@ -32,7 +32,7 @@ export const Trending: FC = () => { const { address: connectedWallet } = useAccount() const chainId = l2.id - const { data, error, isLoading } = useQuery({ + const { data, error, isLoading } = useQuery({ queryKey: [connectedWallet, chainId], queryFn: ({ queryKey }) => { const [connectedWallet, chainId] = queryKey