dynamically get prev and next tokenIds

ourzora · Jan 9, 2024 · 6f72e29 · 6f72e29
1 parent 50873ef
commit 6f72e29
Show file tree

Hide file tree

Showing 7 changed files with 126 additions and 11 deletions.
diff --git a/apps/web/src/constants/swrKeys.ts b/apps/web/src/constants/swrKeys.ts
@@ -25,6 +25,7 @@ const SWR_KEYS = {
   TOKEN_HOLDERS_MERKLE_ROOT: 'token-holders-merkle-root',
   ENCODED_DAO_METADATA: 'encoded-dao-metadata',
   DAO_MIGRATED: 'dao-migrated',
+  DAO_NEXT_AND_PREVIOUS_TOKENS: 'dao-next-and-previous-tokens',
   DYNAMIC: {
     MY_DAOS(str: string) {
       return `my-daos-${str}`

diff --git a/apps/web/src/data/subgraph/queries/daoNextAndPreviousTokens.graphql b/apps/web/src/data/subgraph/queries/daoNextAndPreviousTokens.graphql
@@ -0,0 +1,26 @@
+query daoNextAndPreviousTokens($tokenAddress: String!, $tokenId: BigInt!) {
+  prev: tokens(
+    where: { dao: $tokenAddress, tokenId_lt: $tokenId }
+    orderBy: tokenId
+    orderDirection: desc
+    first: 1
+  ) {
+    tokenId
+  }
+  next: tokens(
+    where: { dao: $tokenAddress, tokenId_gt: $tokenId }
+    orderBy: tokenId
+    orderDirection: asc
+    first: 1
+  ) {
+    tokenId
+  }
+  latest: tokens(
+    where: { dao: $tokenAddress }
+    orderBy: tokenId
+    orderDirection: desc
+    first: 1
+  ) {
+    tokenId
+  }
+}
diff --git a/apps/web/src/data/subgraph/sdk.generated.ts b/apps/web/src/data/subgraph/sdk.generated.ts
@@ -2356,6 +2356,18 @@ export type DaoMetadataQuery = {
   } | null
 }
 
+export type DaoNextAndPreviousTokensQueryVariables = Exact<{
+  tokenAddress: Scalars['String']
+  tokenId: Scalars['BigInt']
+}>
+
+export type DaoNextAndPreviousTokensQuery = {
+  __typename?: 'Query'
+  prev: Array<{ __typename?: 'Token'; tokenId: any }>
+  next: Array<{ __typename?: 'Token'; tokenId: any }>
+  latest: Array<{ __typename?: 'Token'; tokenId: any }>
+}
+
 export type DaoOgMetadataQueryVariables = Exact<{
   tokenAddress: Scalars['ID']
 }>
@@ -2887,6 +2899,34 @@ export const DaoMetadataDocument = gql`
     }
   }
 `
+export const DaoNextAndPreviousTokensDocument = gql`
+  query daoNextAndPreviousTokens($tokenAddress: String!, $tokenId: BigInt!) {
+    prev: tokens(
+      where: { dao: $tokenAddress, tokenId_lt: $tokenId }
+      orderBy: tokenId
+      orderDirection: desc
+      first: 1
+    ) {
+      tokenId
+    }
+    next: tokens(
+      where: { dao: $tokenAddress, tokenId_gt: $tokenId }
+      orderBy: tokenId
+      orderDirection: asc
+      first: 1
+    ) {
+      tokenId
+    }
+    latest: tokens(
+      where: { dao: $tokenAddress }
+      orderBy: tokenId
+      orderDirection: desc
+      first: 1
+    ) {
+      tokenId
+    }
+  }
+`
 export const DaoOgMetadataDocument = gql`
   query daoOGMetadata($tokenAddress: ID!) {
     dao(id: $tokenAddress) {
@@ -3201,6 +3241,21 @@ export function getSdk(
         'query'
       )
     },
+    daoNextAndPreviousTokens(
+      variables: DaoNextAndPreviousTokensQueryVariables,
+      requestHeaders?: Dom.RequestInit['headers']
+    ): Promise<DaoNextAndPreviousTokensQuery> {
+      return withWrapper(
+        (wrappedRequestHeaders) =>
+          client.request<DaoNextAndPreviousTokensQuery>(
+            DaoNextAndPreviousTokensDocument,
+            variables,
+            { ...requestHeaders, ...wrappedRequestHeaders }
+          ),
+        'daoNextAndPreviousTokens',
+        'query'
+      )
+    },
     daoOGMetadata(
       variables: DaoOgMetadataQueryVariables,
       requestHeaders?: Dom.RequestInit['headers']

diff --git a/apps/web/src/modules/auction/components/Auction.tsx b/apps/web/src/modules/auction/components/Auction.tsx
@@ -107,7 +107,6 @@ export const Auction: React.FC<AuctionControllerProps> = ({
           name={name}
           collection={collection}
           tokenId={Number(queriedTokenId)}
-          currentAuction={Number(currentTokenId)}
         />
 
         {isTokenActiveAuction && !!auction && (

diff --git a/apps/web/src/modules/auction/components/AuctionTokenPicker.tsx b/apps/web/src/modules/auction/components/AuctionTokenPicker.tsx
@@ -2,10 +2,14 @@ import { Box, Flex, Text } from '@zoralabs/zord'
 import dayjs from 'dayjs'
 import { useRouter } from 'next/router'
 import React from 'react'
+import useSWR from 'swr'
 
 import { Icon } from 'src/components/Icon'
 import { OptionalLink } from 'src/components/OptionalLink'
+import SWR_KEYS from 'src/constants/swrKeys'
+import { SDK } from 'src/data/subgraph/client'
 import { useLayoutStore } from 'src/stores'
+import { useChainStore } from 'src/stores/useChainStore'
 
 import { auctionDateNavButton, auctionTextVariants } from './Auction.css'
 
@@ -14,29 +18,42 @@ interface AuctionTokenPickerProps {
   tokenId: number
   mintDate?: number
   name?: string
-  currentAuction?: number
 }
 
 export const AuctionTokenPicker: React.FC<AuctionTokenPickerProps> = ({
   collection,
   tokenId,
   mintDate,
   name,
-  currentAuction,
 }: AuctionTokenPickerProps) => {
-  const { isReady, query } = useRouter()
+  const { id: chainId } = useChainStore((x) => x.chain)
+  const { query, isReady } = useRouter()
   const { isMobile } = useLayoutStore()
   const disabledStyle = { opacity: 0.2 }
 
-  const hasPreviousToken = tokenId !== 0
-  const hasNextToken = isReady && tokenId < (currentAuction || 0)
+  const { data } = useSWR(
+    isReady
+      ? [SWR_KEYS.DAO_NEXT_AND_PREVIOUS_TOKENS, chainId, collection, tokenId]
+      : undefined,
+    () =>
+      SDK.connect(chainId)
+        .daoNextAndPreviousTokens({ tokenId, tokenAddress: collection })
+        .then((x) => ({
+          next: x.next.length > 0 ? parseInt(x.next[0].tokenId) : undefined,
+          prev: x.prev.length > 0 ? parseInt(x.prev[0].tokenId) : undefined,
+          latest: x.latest.length > 0 ? parseInt(x.latest[0].tokenId) : undefined,
+        }))
+  )
+
+  const hasPreviousToken = data?.prev !== undefined
+  const hasNextToken = data?.next !== undefined
 
   return (
     <Flex direction={'column'}>
       <Flex align="center" direction={'row'} gap={'x2'}>
         <OptionalLink
           enabled={hasPreviousToken}
-          href={`/dao/${query.network}/${collection}/${tokenId - 1}`}
+          href={`/dao/${query.network}/${collection}/${data?.prev}`}
           passHref
           legacyBehavior
         >
@@ -52,7 +69,7 @@ export const AuctionTokenPicker: React.FC<AuctionTokenPickerProps> = ({
 
         <OptionalLink
           enabled={hasNextToken}
-          href={`/dao/${query.network}/${collection}/${tokenId + 1}`}
+          href={`/dao/${query.network}/${collection}/${data?.next}`}
           passHref
           legacyBehavior
         >
@@ -68,7 +85,7 @@ export const AuctionTokenPicker: React.FC<AuctionTokenPickerProps> = ({
 
         <OptionalLink
           enabled={hasNextToken}
-          href={`/dao/${query.network}/${collection}/${currentAuction}`}
+          href={`/dao/${query.network}/${collection}/${data?.latest}`}
           passHref
           legacyBehavior
         >

diff --git a/apps/web/src/modules/auction/components/DaoMigrated.tsx b/apps/web/src/modules/auction/components/DaoMigrated.tsx
@@ -1,13 +1,29 @@
 import { Box, Stack, atoms } from '@zoralabs/zord'
 import Link from 'next/link'
+import { useContractRead } from 'wagmi'
 
 import { Icon } from 'src/components/Icon'
 import { PUBLIC_ALL_CHAINS } from 'src/constants/defaultChains'
+import { auctionAbi } from 'src/data/contract/abis'
+import { useDaoStore } from 'src/modules/dao'
 import { L2MigratedResponse } from 'src/pages/api/migrated'
+import { useChainStore } from 'src/stores/useChainStore'
 
 export const DaoMigrated = ({ migrated }: { migrated: L2MigratedResponse }) => {
+  const { id: chainId } = useChainStore((x) => x.chain)
   const migratedToChain = PUBLIC_ALL_CHAINS.find((x) => x.id === migrated.chainId)
 
+  const { auction } = useDaoStore((x) => x.addresses)
+
+  const { data: paused } = useContractRead({
+    abi: auctionAbi,
+    address: auction,
+    functionName: 'paused',
+    chainId,
+  })
+
+  if (!paused) return null
+
   return (
     <Stack align={'center'} w="100%" mt="x7">
       <Box color="text3" fontSize={18}>

diff --git a/apps/web/src/pages/dao/[network]/[token]/index.tsx b/apps/web/src/pages/dao/[network]/[token]/index.tsx
@@ -140,7 +140,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
         orderDirection: OrderDirection.Desc,
         first: 1,
       })
-      .then((x) => (x.tokens.length > 0 ? x.tokens[0].tokenId : 0))
+      .then((x) => (x.tokens.length > 0 ? x.tokens[0].tokenId : undefined))
 
     const owner = await readContract({
       abi: auctionAbi,
@@ -149,7 +149,8 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
       chainId: chain.id,
     })
 
-    const initialized: boolean = owner === addresses.treasury && latestTokenId > 0
+    const initialized: boolean =
+      owner === addresses.treasury && latestTokenId !== undefined
 
     if (!initialized) {
       return {