From 04acb03f323fb881feedca51c6f5671f1afb3596 Mon Sep 17 00:00:00 2001 From: imhson Date: Wed, 11 Sep 2024 16:16:23 +0700 Subject: [PATCH 1/4] update --- public/config.json | 30 +- src/components/pages/chapter/comicDetail.tsx | 363 ++++++++----------- src/components/pages/comic/NFTsList.tsx | 126 ++----- src/services/index.ts | 6 +- 4 files changed, 217 insertions(+), 308 deletions(-) diff --git a/public/config.json b/public/config.json index 446723c0..d96b8f62 100644 --- a/public/config.json +++ b/public/config.json @@ -1,26 +1,26 @@ { - "REDIRECT_URL": "https://punkga.me", - "CHAIN_ID": "aura_6322-2", + "REDIRECT_URL": "https://staging.punkga.me", + "CHAIN_ID": "aura_6321-3", "CHAIN_INFO": { - "chainId": "aura_6322-2", - "chainName": "Aura Mainnet", - "evmChainId": 6322, - "rpc": ["https://rpc.aura.network", "https://jsonrpc.aura.network"], - "indexerV2": "https://horoscope.aura.network/api/v2/graphql", + "chainId": "aura_6321-3", + "evmChainId": 6321, + "chainName": "Aura Euphoria TestNet", + "rpc": ["https://rpc.euphoria.aura.network", "https://jsonrpc.euphoria.aura.network"], + "indexerV2": "https://indexer-v2.staging.aurascan.io/api/v2/graphql", "nativeCurrency": { "name": "Aura", - "symbol": "AURA", + "symbol": "EAURA", "decimals": 18 }, - "explorer": "https://aurascan.io/" + "explorer": "https://euphoria.aurascan.io" }, - "API_URL": "https://hasura.punkga.me", - "AUTHORIZER_URL": "https://auth.punkga.me", + "API_URL": "https://hasura.staging.punkga.me", + "AUTHORIZER_URL": "https://auth.staging.punkga.me", "AUTHORIZER_CLIENT_ID": "06c9c437-15cd-4240-b435-5d16206b46c6", - "ADMIN_URL": "https://admin.punkga.me", - "REST_API_URL": "https://api.punkga.me", + "ADMIN_URL": "https://admin.staging.punkga.me", + "REST_API_URL": "https://api.staging.punkga.me", "IN_MAINTENANCE_MODE": false, - "GTM_ID": "GTM-5N2X4HSN", - "SEEKHYPE_URL": "https://seekhype.io/", + "GTM_ID": "GTM-MMT4K22K", + "SEEKHYPE_URL": "https://staging.seekhype.io/", "WALLET_CONNECT_PROJECT_ID": "ec40291093ad80fa0def54b1fb44c8ef" } diff --git a/src/components/pages/chapter/comicDetail.tsx b/src/components/pages/chapter/comicDetail.tsx index 31733c53..5b9ed6d7 100644 --- a/src/components/pages/chapter/comicDetail.tsx +++ b/src/components/pages/chapter/comicDetail.tsx @@ -1,29 +1,29 @@ -import { Tab } from '@headlessui/react'; -import { ArrowRightIcon, BellAlertIcon, BellIcon, EyeIcon, HeartIcon } from '@heroicons/react/20/solid'; -import { BellAlertIcon as BellAlertIconOutline } from '@heroicons/react/24/outline'; -import FilledButton from 'components/Button/FilledButton'; -import OutlineButton from 'components/Button/OutlineButton'; -import LazyImage from 'components/Image'; -import StatusLabel from 'components/Label/Status'; -import Tag from 'components/Label/Tag'; -import CalendarIcon from 'images/icons/solar_calendar-linear.svg'; -import Ninja from 'images/ninja-2.svg'; -import moment from 'moment'; -import { useTranslation } from 'next-i18next'; -import Image from 'next/image'; -import Link from 'next/link'; -import { Fragment, useContext, useEffect, useRef, useState } from 'react'; -import mockBanner from 'src/assets/images/mockup3.png'; -import mockAvar from 'src/assets/images/mockup4.png'; -import { CHAPTER_STATUS } from 'src/constants/chapter.constant'; -import { LanguageType } from 'src/constants/global.types'; -import { Context } from 'src/context'; -import { ModalContext } from 'src/context/modals'; -import { IComicDetail } from 'src/models/comic'; -import { subscribe, unsubscribe } from 'src/services'; -import Introduction from '../comic/Introduction'; -import NFTsList from '../comic/NFTsList'; -import ChapterList from './chapterList'; +import { Tab } from '@headlessui/react' +import { ArrowRightIcon, BellAlertIcon, BellIcon, EyeIcon, HeartIcon } from '@heroicons/react/20/solid' +import { BellAlertIcon as BellAlertIconOutline } from '@heroicons/react/24/outline' +import FilledButton from 'components/Button/FilledButton' +import OutlineButton from 'components/Button/OutlineButton' +import LazyImage from 'components/Image' +import StatusLabel from 'components/Label/Status' +import Tag from 'components/Label/Tag' +import CalendarIcon from 'images/icons/solar_calendar-linear.svg' +import Ninja from 'images/ninja-2.svg' +import moment from 'moment' +import { useTranslation } from 'next-i18next' +import Image from 'next/image' +import Link from 'next/link' +import { Fragment, useContext, useEffect, useRef, useState } from 'react' +import mockBanner from 'src/assets/images/mockup3.png' +import mockAvar from 'src/assets/images/mockup4.png' +import { CHAPTER_STATUS } from 'src/constants/chapter.constant' +import { LanguageType } from 'src/constants/global.types' +import { Context } from 'src/context' +import { ModalContext } from 'src/context/modals' +import { IComicDetail } from 'src/models/comic' +import { subscribe, unsubscribe } from 'src/services' +import Introduction from '../comic/Introduction' +import NFTsList from '../comic/NFTsList' +import ChapterList from './chapterList' export default function ComicDetail({ data, @@ -41,163 +41,143 @@ export default function ComicDetail({ setComicLikes, subscriptions, }: { - data: IComicDetail; - language: LanguageType; - setLanguage: any; - isSubscribe: boolean; - chapterIsLiked: boolean; - setIsSubscribe: any; - like: () => void; - unlike: () => void; - likeHandler: any; - setComicLikes: any; - chapterId: string; - comicLikes: number; - chapterLikes: number; - subscriptions: number; + data: IComicDetail + language: LanguageType + setLanguage: any + isSubscribe: boolean + chapterIsLiked: boolean + setIsSubscribe: any + like: () => void + unlike: () => void + likeHandler: any + setComicLikes: any + chapterId: string + comicLikes: number + chapterLikes: number + subscriptions: number }) { - const [expandDetail, setExpandDetail] = useState(false); - const [expandDescription, setExpandDescription] = useState(false); - const {setSignInOpen} = useContext(ModalContext) - const { t } = useTranslation(); - const { account } = useContext(Context); - const tabRef = useRef(); + const [expandDetail, setExpandDetail] = useState(false) + const [expandDescription, setExpandDescription] = useState(false) + const { setSignInOpen } = useContext(ModalContext) + const { t } = useTranslation() + const { account } = useContext(Context) + const tabRef = useRef() useEffect(() => { if (!expandDetail) { - tabRef.current?.click(); + tabRef.current?.click() } - }, [expandDetail]); - const [subChange, setSubChange] = useState(0); + }, [expandDetail]) + const [subChange, setSubChange] = useState(0) const subscribeHandler = (isSub: boolean) => { if (account?.verified && account?.name) { if (isSub) { - subscribe(data.id); - setSubChange(subChange + 1); + subscribe(data.id) + setSubChange(subChange + 1) } else { - unsubscribe(data.id); - setSubChange(subChange - 1); + unsubscribe(data.id) + setSubChange(subChange - 1) } - setIsSubscribe(isSub); + setIsSubscribe(isSub) //refetch data } else { setSignInOpen(true) } - }; + } if (typeof data == 'undefined') { - return <>; + return <> } if (!data) { - return
{t('No data to show')}
; + return
{t('No data to show')}
} const selectedLanguage = - data.languages.find((l) => l.shortLang == language) || - data.languages.find((l) => l.isMainLanguage); + data.languages.find((l) => l.shortLang == language) || data.languages.find((l) => l.isMainLanguage) return (
+ className={`${ + expandDetail ? ' z-10' : 'z-[1] delay-500 transition-all' + } absolute top-0 bottom-0 left-0 right-0 flex justify-end`}>
+ className={`relative flex-auto h-full duration-500 transition-all bg-white ${ + expandDetail ? 'pk-width__ml-opposite opacity-1 ' : ' opacity-0 w-3/4' + }`}>
-
+ className={`relative flex-auto h-full duration-500 transition-all ${ + expandDetail ? 'pk-width__ml bg-white' : 'w-1/4 overflow-auto bg-light-gray' + }`}> +
setExpandDetail(false)} - className="absolute bg-green-600 rounded-full w-11 h-11 flex items-center justify-center cursor-pointer top-1/2 left-0 -translate-x-1/2" - > - + className='absolute bg-green-600 rounded-full w-11 h-11 flex items-center justify-center cursor-pointer top-1/2 left-0 -translate-x-1/2'> +
-
-
+
+
-
-
-
+
+
+
{(data.subscriptions + subChange).toLocaleString('en-US')} - +
• -
+
{data.views.toLocaleString('en-US')} - +
• -
+
{comicLikes.toLocaleString('en-US')} - +
+ className={`px-[16px] flex flex-col gap-[10px] md:pl-[40px] 2xl:px-[40px] transition-all ${ + expandDetail ? 'mt-4' : 'mt-[10px]' + }`}>
-
+
+ className={`font-bold ${ + expandDetail ? 'text-black' : 'text-second-color' + } transition-all text-2xl -mb-[7px] flex items-start gap-[10px]`}> {data[selectedLanguage.shortLang]?.title} - {expandDetail && ( - - {t(data.status?.text)} - - )} + {expandDetail && {t(data.status?.text)}}

+ className={`${ + expandDetail ? 'opacity-100 max-h-[100px]' : 'opacity-0 max-h-0 mt-[-10px]' + } font-semibold text-xl leading-6 duration-500 transition-all text-second-color overflow-auto`}> {data.authors.map((author, index) => ( - - ,{' '} - - + , + {author.slug ? ( - + {t(author.name)} ) : ( @@ -207,14 +187,14 @@ export default function ComicDetail({ ))}

-
+
by{' '} {data.authors.map((author, index) => ( - + {author.slug ? ( - + {t(author.name)} ) : ( @@ -242,28 +222,19 @@ export default function ComicDetail({ {comicLikes?.toLocaleString('en-US')}{' '} {comicLikes > 1 ? t('likes') : t('like')}

*/} -
+
{isSubscribe ? ( -
subscribeHandler(false)} - className="h-5 flex items-start" - > - +
subscribeHandler(false)} className='h-5 flex items-start'> + {t('Subscribed')}
) : ( - -
subscribeHandler(true)} - className="flex items-start " - > - + +
subscribeHandler(true)} className='flex items-start '> + {t('Subscribe')}
@@ -272,53 +243,42 @@ export default function ComicDetail({
-
+
{data.releaseDate && !moment().diff(moment(data.releaseDate)) && (
+ className={` text-subtle-dark transition-all whitespace-nowrap overflow-hidden ${ + expandDetail ? 'max-w-[300px] min-w-[260px] max-h-[50px]' : 'max-w-[0px] min-w-[0px] max-h-0' + } `}> {t('Release date')}:{' '} - - {moment(data.releaseDate).format('DD/MM/yyyy')} - + {moment(data.releaseDate).format('DD/MM/yyyy')}
)} {!account && ( -

+

- setSignInOpen(true) - } - > + className='text-second-color underline font-semibold cursor-pointer' + onClick={() => setSignInOpen(true)}> {t('Sign in')} {' '} {t('to unlock special chapters')}!

)}
- {data.chapters.find( - (chapter) => chapter.status === CHAPTER_STATUS.UPCOMING, - )?.date && ( -
- {' '} -
- {`${t('New chapter arrives on')} - ${moment( - data.chapters.find( - (chapter) => chapter.status === CHAPTER_STATUS.UPCOMING, - )?.date, - ).format('dddd, DD/MM/yyyy')}. + {data.chapters.find((chapter) => chapter.status === CHAPTER_STATUS.UPCOMING)?.date && ( +
+ {' '} +
+ {`${t('New chapter arrives on')} + ${moment(data.chapters.find((chapter) => chapter.status === CHAPTER_STATUS.UPCOMING)?.date).format( + 'dddd, DD/MM/yyyy' + )}. ${t('Don’t miss latest update, subscribe now')}!`} -
- )} +
+ )} {/*
{data.tags.map((tag, index) => { return {tag[selectedLanguage.shortLang]}; @@ -329,43 +289,41 @@ export default function ComicDetail({ {data[selectedLanguage.shortLang]?.description}{' '}

*/} -
+
{data.languages.map((language, index) => { return ( setLanguage(language.shortLang)} - > + onClick={() => setLanguage(language.shortLang)}> {t(language.shortLang)} - ); + ) })}
-
+
-
{t('Chapters')}
+ className='ui-selected:text-second-color w-1/3 text-medium-gray z-10 relative ui-selected:font-extrabold ui-selected:border-b-[2px] border-second-color py-[5px] text-lg leading-6 font-medium'> +
{t('Chapters')}
 - -
NFTs
+ +
NFTs
 - -
{t('Introduction')}
+ +
{t('Introduction')}
 - - + + - - {/* {!!data.collections.length ? ( - - - ) : ( */} -
- -
- {t('Artist Composing')} + + {/* {!!data.collections.length ? ( */} + + {/* ) : ( +
+ +
{t('Artist Composing')}
-
- {/* )} */} + )} */} - + @@ -411,5 +362,5 @@ export default function ComicDetail({
- ); + ) } diff --git a/src/components/pages/comic/NFTsList.tsx b/src/components/pages/comic/NFTsList.tsx index cc64eaf6..172abfbe 100644 --- a/src/components/pages/comic/NFTsList.tsx +++ b/src/components/pages/comic/NFTsList.tsx @@ -1,32 +1,25 @@ -import Howater from 'images/authors/howater.png'; -import Next from 'images/icons/arrow-next.svg'; -import Prev from 'images/icons/arrow-prev.svg'; -import Image from 'next/image'; -import { EffectCoverflow, Navigation, Pagination } from 'swiper/modules'; -import { Swiper, SwiperSlide } from 'swiper/react'; +import Howater from 'images/authors/howater.png' +import Next from 'images/icons/arrow-next.svg' +import Prev from 'images/icons/arrow-prev.svg' +import Image from 'next/image' +import { EffectCoverflow, Navigation, Pagination } from 'swiper/modules' +import { Swiper, SwiperSlide } from 'swiper/react' -import 'swiper/css'; -import 'swiper/css/effect-coverflow'; -import 'swiper/css/pagination'; -import 'swiper/css/navigation'; +import 'swiper/css' +import 'swiper/css/effect-coverflow' +import 'swiper/css/pagination' -export default function NFTsList() { +export default function NFTsList({ collections }: { collections: any[] }) { return ( -
-
-
+
+
+
- - + className='z-10 relative'> + + - - + + - - + + - - + + - - + + - - + + - - + + -
-
- +
+
+
-
- +
+
+
- -
- ); + ) } diff --git a/src/services/index.ts b/src/services/index.ts index 11f7bf14..b65831a0 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -210,7 +210,11 @@ export const getComicDetail = async (comicSlug: string, accountId: string) => { const collections = [] let collectionsData = [] - data?.contract_addresses?.forEach((address) => (collections.includes(address) ? null : collections.push(address))) + data?.manga_collections?.forEach((cl) => + collections.includes(cl?.manga_collection?.contract_address) + ? null + : collections.push(cl?.manga_collection?.contract_address) + ) if (collections.length) { const { data } = await axios.post(`${getConfig().CHAIN_INFO.indexerV2}`, { query: `query QueryCw721Tokens($contract_addresses: [String!]) { From 0ca6a8523a4b043e86b9214c8c9d642a28ac9356 Mon Sep 17 00:00:00 2001 From: imhson Date: Wed, 11 Sep 2024 17:52:55 +0700 Subject: [PATCH 2/4] update --- .../pages/chapter/readingSection.tsx | 126 +++++++++--------- src/components/pages/comic/NFTsList.tsx | 58 ++++---- src/models/chapter.ts | 1 + .../chapter/[chapterNumber]/with-api.tsx | 1 + src/pages/comic/[comicSlug]/comic.tsx | 10 +- src/services/index.ts | 54 ++------ 6 files changed, 121 insertions(+), 129 deletions(-) diff --git a/src/components/pages/chapter/readingSection.tsx b/src/components/pages/chapter/readingSection.tsx index d7a618a3..973ff836 100644 --- a/src/components/pages/chapter/readingSection.tsx +++ b/src/components/pages/chapter/readingSection.tsx @@ -162,33 +162,34 @@ export default function ReadingSection({ } if (!data || !chapterData) { - return <>{chapterData.type == CHAPTER_TYPE.NFTS_ONLY ? ( -
- -
- {t('This chapter requires NFT to read')} -
-
- - {t('Get NFT')} - -
-
- - ) : - (
- {t('No data to show')} -
) - } + return ( + <> + {chapterData.type == CHAPTER_TYPE.NFTS_ONLY ? ( +
+ +
{t('This chapter requires NFT to read')}
+
+ router.push(`/collections/${chapterData.collectionSlug}`)}> + {t('Get NFT')} + +
+
+ ) : ( +
{t('No data to show')}
+ )} + + ) } const currentChapIndex = data.chapters.findIndex((chap) => chap.id == chapterData.id) chapterLengthRef.current = chapterData[chapterLocale]?.length return (
+ className={`w-full h-full overflow-hidden ${ + mode == 'minscreen' ? 'relative' : 'fixed bg-black z-20 top-0 bottom-0' + }`}> {!account && chapterData.type == CHAPTER_TYPE.ACCOUNT_ONLY ? (
@@ -207,16 +208,17 @@ export default function ReadingSection({
+ className={`${mode == 'minscreen' ? '' : ''} ${ + readingMode == 'onePage' ? 'w-[90%] max-w-[940px] mx-auto' : 'flex h-full items-center justify-center' + }`}> {chapterData[chapterLocale] ?.slice( readingMode == 'onePage' ? 0 : currentPage, readingMode == 'onePage' ? chapterLengthRef.current : currentPage + 2 > chapterLengthRef.current - ? chapterLengthRef.current - : currentPage + 4 + ? chapterLengthRef.current + : currentPage + 4 ) ?.map((page, index) => window.innerWidth < 1280 ? null : ( @@ -225,10 +227,11 @@ export default function ReadingSection({ key={index} id={`page_${index}`} alt='' - className={`${readingMode == 'onePage' - ? 'mx-auto' - : `h-full w-1/2 [&>img]:!w-fit ${index % 2 == 0 ? '[&>img]:ml-auto' : '[&>img]:mr-auto'}` - } ${readingMode != 'onePage' && index > 1 && 'hidden'}`} + className={`${ + readingMode == 'onePage' + ? 'mx-auto' + : `h-full w-1/2 [&>img]:!w-fit ${index % 2 == 0 ? '[&>img]:ml-auto' : '[&>img]:mr-auto'}` + } ${readingMode != 'onePage' && index > 1 && 'hidden'}`} width={1900} height={1000} priority={index < 4} @@ -243,30 +246,26 @@ export default function ReadingSection({ {chapterData.type == CHAPTER_TYPE.NFTS_ONLY ? (
-
- {t('This chapter requires NFT to read')} -
+
{t('This chapter requires NFT to read')}
+ className='w-full' + onClick={() => router.push(`/collections/${chapterData.collectionSlug}`)}> {t('Get NFT')}
- - ) : - (
- {t('No data to show')} -
) - } + ) : ( +
{t('No data to show')}
+ )}
- ) - } + )}
+ className={`peer bg-[#F0F0F0] absolute bottom-0 right-0 left-0 w-full flex items-center px-[40px] py-[6px] ${ + mode == 'minscreen' ? 'visible' : 'invisible -z-10' + }`}>
{`${t('Chapter')} ${chapterData.number} • ${chapterData.name}`}
@@ -347,8 +346,9 @@ export default function ReadingSection({
+ className={`peer bg-[#F0F0F0] absolute bottom-0 right-0 left-0 w-full flex items-center px-[40px] py-[6px] duration-300 transition-opacity ${ + mode != 'minscreen' ? 'visible' : 'invisible -z-10' + } opacity-100`}>
{`${t('Chapter')} ${chapterData.number} • ${chapterData.name}`} @@ -377,8 +377,9 @@ export default function ReadingSection({ )} goToChap('Prev')} src={SquareArrowLeftIcon} alt='' @@ -386,16 +387,19 @@ export default function ReadingSection({
setShowChapterList(!showChapterList)} - className='text-second-color w-full text-sm leading-5 whitespace-nowrap'>{`${t('Chapter')} ${chapterData.number}`} + className='text-second-color w-full text-sm leading-5 whitespace-nowrap'>{`${t('Chapter')} ${ + chapterData.number + }`} setShowChapterList(!showChapterList)} className={`h-6 w-6 text-second-color transition-all ${showChapterList ? 'rotate-180' : 'rotate-0'}`} />
+ className={`absolute bg-light-gray bottom-[120%] left-0 px-[10px] py-[6px] border-[1.5px] border-second-color rounded-xl w-full flex gap-[10px] flex-col-reverse transition-all ${ + showChapterList + ? 'max-h-[135px] overflow-auto opacity-100' + : 'max-h-[0px] overflow-hidden opacity-0 pointer-events-none' + }`}> {data?.chapters ?.filter((chapter) => chapter.status == 'Published') ?.map((chapter, index) => { @@ -403,8 +407,9 @@ export default function ReadingSection({
router.push(`/comic/${data.slug}/chapter/${chapter?.number}`)} key={index} - className={`cursor-pointer text-xs hover:bg-light-medium-gray ${currentChapIndex == index ? 'text-second-color' : '' - }`}> + className={`cursor-pointer text-xs hover:bg-light-medium-gray ${ + currentChapIndex == index ? 'text-second-color' : '' + }`}> {t('Chapter')} {chapter.number}
) @@ -412,10 +417,11 @@ export default function ReadingSection({
goToChap('Next')} src={SquareArrowRightIcon} alt='' @@ -470,6 +476,6 @@ export default function ReadingSection({
-
+
) } diff --git a/src/components/pages/comic/NFTsList.tsx b/src/components/pages/comic/NFTsList.tsx index 172abfbe..38f0645b 100644 --- a/src/components/pages/comic/NFTsList.tsx +++ b/src/components/pages/comic/NFTsList.tsx @@ -8,11 +8,37 @@ import { Swiper, SwiperSlide } from 'swiper/react' import 'swiper/css' import 'swiper/css/effect-coverflow' import 'swiper/css/pagination' +import { useState } from 'react' +import Select from 'components/Select' +import { useRouter } from 'next/router' +import Link from 'next/link' export default function NFTsList({ collections }: { collections: any[] }) { + console.log(collections) + const { locale } = useRouter() + const [selected, setSelected] = useState({ + key: collections[0].slug, + value: collections[0].name[locale], + }) return ( -
-
+
+
+
+