diff --git a/components/HomeSection/Assets.tsx b/components/HomeSection/Assets.tsx index 638f84ac..e1643b2b 100644 --- a/components/HomeSection/Assets.tsx +++ b/components/HomeSection/Assets.tsx @@ -74,6 +74,7 @@ const AssetsHomeSection: FC = ({ date }) => { address: address || '', }, skip: assetIds === undefined, + ssr: false, }) useHandleQueryError(assetsQuery) const assetData = assetsQuery.data diff --git a/components/HomeSection/Auctions.tsx b/components/HomeSection/Auctions.tsx index c63989a7..cfe307ce 100644 --- a/components/HomeSection/Auctions.tsx +++ b/components/HomeSection/Auctions.tsx @@ -20,6 +20,7 @@ const AuctionsHomeSection: FC = ({ date }) => { const { t } = useTranslation('templates') const auctionAssetsQuery = useFetchAuctionsQuery({ variables: { now: date, address: address || '' }, + ssr: false, }) useHandleQueryError(auctionAssetsQuery) return ( diff --git a/components/HomeSection/Featured.tsx b/components/HomeSection/Featured.tsx index 87f32821..d0171bf5 100644 --- a/components/HomeSection/Featured.tsx +++ b/components/HomeSection/Featured.tsx @@ -40,6 +40,7 @@ const FeaturedHomeSection: FC = ({ date }) => { address: address || '', }, skip: !FEATURED_TOKEN.length, + ssr: false, }) useHandleQueryError(featureAssetsQuery) diff --git a/pages/_app.tsx b/pages/_app.tsx index 1f128f4d..e5458d06 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -170,7 +170,6 @@ function AccountProvider({ export type MyAppProps = { jwt: string | null - now: Date environment: Environment } @@ -277,15 +276,11 @@ MyApp.getInitialProps = async ( appContext, )) as AppInitialProps<{}> // force type of props to empty object instead of any so TS will properly require MyAppProps to be returned by this function const jwt = appContext.ctx.req?.cookies?.[COOKIE_JWT_TOKEN] || null - // Generate the now time, rounded to the second to avoid re-rendering on the client - // TOFIX: find a better way to share the time between the app and document - const now = new Date(Math.floor(Date.now() / 1000) * 1000) return { ...initialProps, pageProps: { ...initialProps.pageProps, jwt, - now, environment: await getEnvironment(), }, } diff --git a/pages/_document.tsx b/pages/_document.tsx index 48244465..afb31b3a 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -73,14 +73,11 @@ class MyDocument extends Document { true, console.error, ) - // Generate the now time, rounded to the second to avoid re-rendering on the client - // TOFIX: find a better way to share the time between the app and document - const now = new Date(Math.floor(Date.now() / 1000) * 1000) // properly type the AppTree with the props from MyApp const AppTree = context.AppTree as typeof context.AppTree & ComponentType> // This renders the page and wait for all requests to be resolved - await getDataFromTree() // This `defaultGetInitialProps` should be as late as possible and after the data are resolved by `getDataFromTree` + await getDataFromTree() // This `defaultGetInitialProps` should be as late as possible and after the data are resolved by `getDataFromTree` const initialProps = await context.defaultGetInitialProps(context) return { ...initialProps, diff --git a/pages/checkout/[id].gql b/pages/checkout/[id].gql index 353b6d29..267dd6e1 100644 --- a/pages/checkout/[id].gql +++ b/pages/checkout/[id].gql @@ -3,9 +3,26 @@ query Checkout($id: UUID!) { id type asset { + id chainId collectionAddress tokenId + image + name + creator { + address + name + image + verification { + status + } + } + collection { + chainId + address + name + standard + } } maker { address @@ -42,11 +59,18 @@ query FetchAssetForCheckout( chainId collectionAddress tokenId + creator { + address + name + image + verification { + status + } + } collection { chainId address name - standard } name image @@ -55,14 +79,6 @@ query FetchAssetForCheckout( mimetype } animationUrl - creator { - address - name - image - verification { - status - } - } owned: ownership(ownerAddress: $address) { quantity } diff --git a/pages/checkout/[id].tsx b/pages/checkout/[id].tsx index c075a745..164548e6 100644 --- a/pages/checkout/[id].tsx +++ b/pages/checkout/[id].tsx @@ -6,6 +6,7 @@ import { Heading, Skeleton, Stack, + useConst, useToast, } from '@chakra-ui/react' import { BigNumber } from '@ethersproject/bignumber' @@ -36,11 +37,7 @@ import useRequiredQueryParamSingle from '../../hooks/useRequiredQueryParamSingle import useSigner from '../../hooks/useSigner' import SmallLayout from '../../layouts/small' -type Props = { - now: string -} - -const CheckoutPage: NextPage = ({ now }) => { +const CheckoutPage: NextPage = () => { const signer = useSigner() const { t } = useTranslation('templates') const { back, push } = useRouter() @@ -49,19 +46,20 @@ const CheckoutPage: NextPage = ({ now }) => { const { address } = useAccount() - const date = useMemo(() => new Date(now), [now]) + const mountTime = useConst(() => new Date()) const { data: offerData } = useCheckoutQuery({ variables: { id: offerId } }) const offer = offerData?.offer const { data: assetData } = useFetchAssetForCheckoutQuery({ variables: { - now: date, + now: mountTime, address: address || '', chainId: offer?.asset.chainId || 0, collectionAddress: offer?.asset.collectionAddress || '', tokenId: offer?.asset.tokenId || '', }, skip: !offer, + ssr: false, }) const asset = assetData?.asset @@ -70,20 +68,20 @@ const CheckoutPage: NextPage = ({ now }) => { [offer], ) const isSingle = useMemo( - () => asset?.collection.standard === 'ERC721', - [asset], + () => offer?.asset.collection.standard === 'ERC721', + [offer?.asset.collection.standard], ) - const blockExplorer = useBlockExplorer(asset?.chainId) + const blockExplorer = useBlockExplorer(offer?.asset.chainId) const onPurchased = useCallback(async () => { - if (!asset) return + if (!offer) return toast({ title: t('offers.checkout.notifications.purchased'), status: 'success', }) - await push(`/tokens/${asset.id}`) - }, [asset, toast, t, push]) + await push(`/tokens/${offer.asset.id}`) + }, [offer, toast, t, push]) if (offer === null || asset === null) { return @@ -91,15 +89,15 @@ const CheckoutPage: NextPage = ({ now }) => { return ( diff --git a/pages/collection/[chainId]/[id].tsx b/pages/collection/[chainId]/[id].tsx index 9d893b87..2a4ca979 100644 --- a/pages/collection/[chainId]/[id].tsx +++ b/pages/collection/[chainId]/[id].tsx @@ -11,11 +11,13 @@ import { ModalHeader, SimpleGrid, useBreakpointValue, + useConst, } from '@chakra-ui/react' +import { NextPage } from 'next' import useTranslation from 'next-translate/useTranslation' import Error from 'next/error' import { useRouter } from 'next/router' -import { FC, useCallback, useMemo } from 'react' +import { useCallback, useMemo } from 'react' import CollectionHeader from '../../../components/Collection/CollectionHeader' import CollectionHeaderSkeleton from '../../../components/Collection/CollectionHeaderSkeleton' import CollectionMetrics from '../../../components/Collection/CollectionMetrics' @@ -57,11 +59,7 @@ import useRequiredQueryParamSingle from '../../../hooks/useRequiredQueryParamSin import LargeLayout from '../../../layouts/large' import { removeEmptyFromObject } from '../../../utils' -type Props = { - now: string -} - -const CollectionPage: FC = ({ now }) => { +const CollectionPage: NextPage = () => { const { REPORT_EMAIL, PAGINATION_LIMIT } = useEnvironment() const { query, push, pathname } = useRouter() const chainId = useRequiredQueryParamSingle('chainId', { @@ -73,7 +71,7 @@ const CollectionPage: FC = ({ now }) => { { fallback: 'md' }, ) const { t } = useTranslation('templates') - const date = useMemo(() => new Date(now), [now]) + const mountTime = useConst(() => new Date()) const { address } = useAccount() const { data: collectionData } = useFetchCollectionDetailsQuery({ variables: { @@ -98,14 +96,15 @@ const CollectionPage: FC = ({ now }) => { const { data: assetData } = useFetchCollectionAssetsQuery({ variables: { collectionAddress, - now: date, + now: mountTime, currentAccount: address || '', limit, offset, orderBy, chainId: chainId, - filter: convertFilterToAssetFilter(filter, date), + filter: convertFilterToAssetFilter(filter, mountTime), }, + ssr: false, }) const { showFilters, toggleFilters, close, count } = diff --git a/pages/explore/explore.tsx b/pages/explore/explore.tsx index d91049c2..120685d6 100644 --- a/pages/explore/explore.tsx +++ b/pages/explore/explore.tsx @@ -11,11 +11,12 @@ import { ModalHeader, SimpleGrid, useBreakpointValue, + useConst, } from '@chakra-ui/react' import { NextPage } from 'next' import useTranslation from 'next-translate/useTranslation' import { useRouter } from 'next/router' -import { useCallback, useMemo } from 'react' +import { useCallback } from 'react' import Empty from '../../components/Empty/Empty' import ExploreTemplate from '../../components/Explore' import FilterAsset, { NoFilter } from '../../components/Filter/FilterAsset' @@ -45,11 +46,7 @@ import usePaginate from '../../hooks/usePaginate' import usePaginateQuery from '../../hooks/usePaginateQuery' import { removeEmptyFromObject } from '../../utils' -type Props = { - now: string -} - -const ExplorePage: NextPage = ({ now }) => { +const ExplorePage: NextPage = () => { const { PAGINATION_LIMIT } = useEnvironment() const { query, pathname, push } = useRouter() const isSmall = useBreakpointValue( @@ -57,20 +54,21 @@ const ExplorePage: NextPage = ({ now }) => { { fallback: 'md' }, ) const { t } = useTranslation('templates') - const date = useMemo(() => new Date(now), [now]) + const mountTime = useConst(() => new Date()) const { address } = useAccount() const filter = useAssetFilterFromQuery() const orderBy = useOrderByQuery('CREATED_AT_DESC') const { page, limit, offset } = usePaginateQuery() const { data: assetsData } = useFetchAllErc721And1155Query({ variables: { - now: date, + now: mountTime, address: address || '', limit, offset, orderBy, - filter: convertFilterToAssetFilter(filter, date), + filter: convertFilterToAssetFilter(filter, mountTime), }, + ssr: false, }) const { showFilters, toggleFilters, close, count } = diff --git a/pages/index.tsx b/pages/index.tsx index 2c73074b..6a821b70 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,4 +1,4 @@ -import { Stack } from '@chakra-ui/react' +import { Stack, useConst } from '@chakra-ui/react' import AssetsHomeSection from 'components/HomeSection/Assets' import AuctionsHomeSection from 'components/HomeSection/Auctions' import CollectionsHomeSection from 'components/HomeSection/Collections' @@ -6,24 +6,20 @@ import FeaturedHomeSection from 'components/HomeSection/Featured' import ResourcesHomeSection from 'components/HomeSection/Resources' import UsersHomeSection from 'components/HomeSection/Users' import { NextPage } from 'next' -import { useMemo } from 'react' import Head from '../components/Head' import LargeLayout from '../layouts/large' -type Props = { - now: number -} -const HomePage: NextPage = ({ now }) => { - const date = useMemo(() => new Date(now), [now]) +const HomePage: NextPage = () => { + const mountTime = useConst(() => new Date()) return ( - + - - + + diff --git a/pages/tokens/[id]/bid.tsx b/pages/tokens/[id]/bid.tsx index 7f665468..85773075 100644 --- a/pages/tokens/[id]/bid.tsx +++ b/pages/tokens/[id]/bid.tsx @@ -6,6 +6,7 @@ import { Heading, Icon, Stack, + useConst, useToast, } from '@chakra-ui/react' import { BigNumber } from '@ethersproject/bignumber' @@ -41,11 +42,7 @@ import useRequiredQueryParamSingle from '../../../hooks/useRequiredQueryParamSin import useSigner from '../../../hooks/useSigner' import SmallLayout from '../../../layouts/small' -type Props = { - now: string -} - -const BidPage: NextPage = ({ now }) => { +const BidPage: NextPage = () => { const { OFFER_VALIDITY_IN_SECONDS, AUCTION_VALIDITY_IN_SECONDS } = useEnvironment() const signer = useSigner() @@ -60,13 +57,13 @@ const BidPage: NextPage = ({ now }) => { ) invariant(chainId && collectionAddress && tokenId, 'Invalid asset id') - const date = useMemo(() => new Date(now), [now]) + const mountTime = useConst(() => new Date()) const { data } = useBidOnAssetQuery({ variables: { chainId: parseInt(chainId, 10), collectionAddress: collectionAddress, tokenId: tokenId, - now: date, + now: mountTime, address: address || '', }, }) diff --git a/pages/tokens/[id]/index.tsx b/pages/tokens/[id]/index.tsx index 052a0cdc..8179da15 100644 --- a/pages/tokens/[id]/index.tsx +++ b/pages/tokens/[id]/index.tsx @@ -21,6 +21,7 @@ import { Tabs, Text, Tooltip, + useConst, useToast, } from '@chakra-ui/react' import { BigNumber } from '@ethersproject/bignumber' @@ -61,10 +62,6 @@ import useSigner from '../../../hooks/useSigner' import LargeLayout from '../../../layouts/large' import { formatError } from '../../../utils' -type Props = { - now: string -} - enum AssetTabs { bids = 'bids', history = 'history', @@ -72,7 +69,7 @@ enum AssetTabs { const tabs = [AssetTabs.bids, AssetTabs.history] -const DetailPage: NextPage = ({ now: nowProp }) => { +const DetailPage: NextPage = () => { const { CHAINS, REPORT_EMAIL } = useEnvironment() const signer = useSigner() const { t } = useTranslation('templates') @@ -87,13 +84,13 @@ const DetailPage: NextPage = ({ now: nowProp }) => { invariant(tokenId, 'tokenId is required') const chainId = parseInt(_chainId, 10) - const date = useMemo(() => new Date(nowProp), [nowProp]) + const mountTime = useConst(() => new Date()) const { data, refetch } = useFetchAssetQuery({ variables: { chainId, collectionAddress, tokenId, - now: date, + now: mountTime, address: address || '', }, }) diff --git a/pages/tokens/[id]/offer.tsx b/pages/tokens/[id]/offer.tsx index 7aa7e667..e4d38066 100644 --- a/pages/tokens/[id]/offer.tsx +++ b/pages/tokens/[id]/offer.tsx @@ -8,6 +8,7 @@ import { GridItem, Heading, Skeleton, + useConst, useRadioGroup, useToast, } from '@chakra-ui/react' @@ -45,17 +46,6 @@ import useSigner from '../../../hooks/useSigner' import SmallLayout from '../../../layouts/small' import { isSameAddress } from '../../../utils' -type Props = { - assetId: string - now: string - currentAccount: string | null - meta: { - title: string - description: string - image: string - } -} - enum SaleType { FIXED_PRICE = 'FIXED_PRICE', TIMED_AUCTION = 'TIMED_AUCTION', @@ -67,7 +57,7 @@ type SaleOption = { icon: any } -const OfferPage: NextPage = ({ now }) => { +const OfferPage: NextPage = () => { const { OFFER_VALIDITY_IN_SECONDS, AUCTION_VALIDITY_IN_SECONDS } = useEnvironment() const signer = useSigner() @@ -83,13 +73,13 @@ const OfferPage: NextPage = ({ now }) => { ) invariant(chainId && collectionAddress && tokenId, 'Invalid asset id') - const date = useMemo(() => new Date(now), [now]) + const mountTime = useConst(() => new Date()) const { data } = useOfferForAssetQuery({ variables: { chainId: parseInt(chainId, 10), collectionAddress: collectionAddress, tokenId: tokenId, - now: date, + now: mountTime, address: address || '', }, }) diff --git a/pages/users/[id]/bids/received.tsx b/pages/users/[id]/bids/received.tsx index 4bae9f6a..5b2b0450 100644 --- a/pages/users/[id]/bids/received.tsx +++ b/pages/users/[id]/bids/received.tsx @@ -13,6 +13,7 @@ import { Th, Thead, Tr, + useConst, useToast, } from '@chakra-ui/react' import { useIsLoggedIn } from '@liteflow/react' @@ -46,11 +47,7 @@ import useSigner from '../../../../hooks/useSigner' import LargeLayout from '../../../../layouts/large' import { dateFromNow, formatError } from '../../../../utils' -type Props = { - now: string -} - -const BidReceivedPage: NextPage = ({ now }) => { +const BidReceivedPage: NextPage = () => { const { BASE_URL, PAGINATION_LIMIT } = useEnvironment() const signer = useSigner() const { t } = useTranslation('templates') @@ -63,15 +60,16 @@ const BidReceivedPage: NextPage = ({ now }) => { const userAddress = useRequiredQueryParamSingle('id') const ownerLoggedIn = useIsLoggedIn(userAddress) - const date = useMemo(() => new Date(now), [now]) + const mountTime = useConst(() => new Date()) const { data, refetch } = useFetchUserBidsReceivedQuery({ variables: { address: userAddress, limit, offset, orderBy, - now: date, + now: mountTime, }, + ssr: false, }) const bids = useMemo( diff --git a/pages/users/[id]/created.tsx b/pages/users/[id]/created.tsx index 9b2aded5..933a567f 100644 --- a/pages/users/[id]/created.tsx +++ b/pages/users/[id]/created.tsx @@ -1,3 +1,4 @@ +import { useConst } from '@chakra-ui/react' import { NextPage } from 'next' import useTranslation from 'next-translate/useTranslation' import { useRouter } from 'next/router' @@ -24,11 +25,7 @@ import useRequiredQueryParamSingle from '../../../hooks/useRequiredQueryParamSin import useSigner from '../../../hooks/useSigner' import LargeLayout from '../../../layouts/large' -type Props = { - now: string -} - -const CreatedPage: NextPage = ({ now }) => { +const CreatedPage: NextPage = () => { const { PAGINATION_LIMIT, BASE_URL } = useEnvironment() const signer = useSigner() const { t } = useTranslation('templates') @@ -39,7 +36,7 @@ const CreatedPage: NextPage = ({ now }) => { const { address } = useAccount() const userAddress = useRequiredQueryParamSingle('id') - const date = useMemo(() => new Date(now), [now]) + const mountTime = useConst(() => new Date()) const { data } = useFetchCreatedAssetsQuery({ variables: { address: userAddress, @@ -47,8 +44,9 @@ const CreatedPage: NextPage = ({ now }) => { limit, offset, orderBy, - now: date, + now: mountTime, }, + ssr: false, }) const assets = useMemo( diff --git a/pages/users/[id]/on-sale.tsx b/pages/users/[id]/on-sale.tsx index cc36f8ee..3607c5b4 100644 --- a/pages/users/[id]/on-sale.tsx +++ b/pages/users/[id]/on-sale.tsx @@ -1,3 +1,4 @@ +import { useConst } from '@chakra-ui/react' import { NextPage } from 'next' import useTranslation from 'next-translate/useTranslation' import { useRouter } from 'next/router' @@ -24,11 +25,7 @@ import useRequiredQueryParamSingle from '../../../hooks/useRequiredQueryParamSin import useSigner from '../../../hooks/useSigner' import LargeLayout from '../../../layouts/large' -type Props = { - now: string -} - -const OnSalePage: NextPage = ({ now }) => { +const OnSalePage: NextPage = () => { const { BASE_URL, PAGINATION_LIMIT } = useEnvironment() const signer = useSigner() const { t } = useTranslation('templates') @@ -39,7 +36,7 @@ const OnSalePage: NextPage = ({ now }) => { const { address } = useAccount() const userAddress = useRequiredQueryParamSingle('id') - const date = useMemo(() => new Date(now), [now]) + const mountTime = useConst(() => new Date()) const { data } = useFetchOnSaleAssetsQuery({ variables: { address: userAddress, @@ -47,8 +44,9 @@ const OnSalePage: NextPage = ({ now }) => { limit, offset, orderBy, - now: date, + now: mountTime, }, + ssr: false, }) const assets = useMemo( diff --git a/pages/users/[id]/owned.tsx b/pages/users/[id]/owned.tsx index 9c2af8d7..ea60935b 100644 --- a/pages/users/[id]/owned.tsx +++ b/pages/users/[id]/owned.tsx @@ -1,3 +1,4 @@ +import { useConst } from '@chakra-ui/react' import { NextPage } from 'next' import useTranslation from 'next-translate/useTranslation' import { useRouter } from 'next/router' @@ -24,11 +25,7 @@ import useRequiredQueryParamSingle from '../../../hooks/useRequiredQueryParamSin import useSigner from '../../../hooks/useSigner' import LargeLayout from '../../../layouts/large' -type Props = { - now: string -} - -const OwnedPage: NextPage = ({ now }) => { +const OwnedPage: NextPage = () => { const { PAGINATION_LIMIT, BASE_URL } = useEnvironment() const signer = useSigner() const { t } = useTranslation('templates') @@ -39,7 +36,7 @@ const OwnedPage: NextPage = ({ now }) => { const { address } = useAccount() const userAddress = useRequiredQueryParamSingle('id') - const date = useMemo(() => new Date(now), [now]) + const mountTime = useConst(() => new Date()) const { data } = useFetchOwnedAssetsQuery({ variables: { address: userAddress, @@ -47,8 +44,9 @@ const OwnedPage: NextPage = ({ now }) => { limit, offset, orderBy, - now: date, + now: mountTime, }, + ssr: false, }) const assets = useMemo(