Merge pull request #331 from jordanlesich/auctionGraph

Auction graph

apps/web/src/data/subgraph/queries/auctionHistory.graphql

@@ -0,0 +1,23 @@
+query auctionHistory(
+  $startTime: BigInt!
+  $daoId: ID!
+  $orderBy: Auction_orderBy
+  $orderDirection: OrderDirection
+  $first: Int
+) {
+  dao(id: $daoId) {
+    auctions(
+      where: { endTime_gt: $startTime, settled: true }
+      orderBy: $orderBy
+      orderDirection: $orderDirection
+      first: $first
+    ) {
+      id
+      endTime
+      winningBid {
+        amount
+      }
+      settled
+    }
+  }
+}

apps/web/src/data/subgraph/requests/auctionHistory.ts

@@ -0,0 +1,28 @@
+import * as Sentry from '@sentry/nextjs'
+
+import { SDK } from 'src/data/subgraph/client'
+import { CHAIN_ID } from 'src/typings'
+
+import { Auction_OrderBy, OrderDirection } from '../sdk.generated'
+
+export const auctionHistoryRequest = async (
+  chainId: CHAIN_ID,
+  collectionAddress: string,
+  startTime: number
+) => {
+  try {
+    const data = await SDK.connect(chainId).auctionHistory({
+      startTime,
+      daoId: collectionAddress,
+      orderDirection: OrderDirection.Asc,
+      orderBy: Auction_OrderBy.EndTime,
+      first: 1000,
+    })
+
+    return data
+  } catch (error) {
+    console.error(error)
+    Sentry.captureException(error)
+    await Sentry.flush(2000)
+  }
+}

apps/web/src/data/subgraph/sdk.generated.ts

@@ -1955,6 +1955,28 @@ export type AuctionBidsQuery = {
   } | null
 }
 
+export type AuctionHistoryQueryVariables = Exact<{
+  startTime: Scalars['BigInt']
+  daoId: Scalars['ID']
+  orderBy?: InputMaybe<Auction_OrderBy>
+  orderDirection?: InputMaybe<OrderDirection>
+  first?: InputMaybe<Scalars['Int']>
+}>
+
+export type AuctionHistoryQuery = {
+  __typename?: 'Query'
+  dao?: {
+    __typename?: 'DAO'
+    auctions: Array<{
+      __typename?: 'Auction'
+      id: string
+      endTime: any
+      settled: boolean
+      winningBid?: { __typename?: 'AuctionBid'; amount: any } | null
+    }>
+  } | null
+}
+
 export type DaoInfoQueryVariables = Exact<{
   tokenAddress: Scalars['ID']
 }>
@@ -2361,6 +2383,31 @@ export const AuctionBidsDocument = gql`
   }
   ${AuctionBidFragmentDoc}
 `
+export const AuctionHistoryDocument = gql`
+  query auctionHistory(
+    $startTime: BigInt!
+    $daoId: ID!
+    $orderBy: Auction_orderBy
+    $orderDirection: OrderDirection
+    $first: Int
+  ) {
+    dao(id: $daoId) {
+      auctions(
+        where: { endTime_gt: $startTime, settled: true }
+        orderBy: $orderBy
+        orderDirection: $orderDirection
+        first: $first
+      ) {
+        id
+        endTime
+        winningBid {
+          amount
+        }
+        settled
+      }
+    }
+  }
+`
 export const DaoInfoDocument = gql`
   query daoInfo($tokenAddress: ID!) {
     dao(id: $tokenAddress) {
@@ -2603,6 +2650,20 @@ export function getSdk(
         'query'
       )
     },
+    auctionHistory(
+      variables: AuctionHistoryQueryVariables,
+      requestHeaders?: Dom.RequestInit['headers']
+    ): Promise<AuctionHistoryQuery> {
+      return withWrapper(
+        (wrappedRequestHeaders) =>
+          client.request<AuctionHistoryQuery>(AuctionHistoryDocument, variables, {
+            ...requestHeaders,
+            ...wrappedRequestHeaders,
+          }),
+        'auctionHistory',
+        'query'
+      )
+    },
     daoInfo(
       variables: DaoInfoQueryVariables,
       requestHeaders?: Dom.RequestInit['headers']

apps/web/src/modules/auction/components/Auction.css.ts

@@ -1,14 +1,10 @@
-import { keyframes, style, styleVariants } from '@vanilla-extract/css'
+import { style, styleVariants } from '@vanilla-extract/css'
 import { atoms, media, theme, vars } from '@zoralabs/zord'
 
-const pulse = keyframes({
-  '0%': { opacity: '1' },
-  '100%': { opacity: '1' },
-  '50%': { opacity: '.5' },
-})
+import { skeletonAnimation } from 'src/styles/animations.css'
 
 export const auctionSkeleton = style({
-  animation: `${pulse} 2s cubic-bezier(0.4, 0, 0.6, 1) infinite`,
+  animation: skeletonAnimation,
 })
 
 export const auctionWrap = atoms({
@@ -281,3 +277,4 @@ export const tokenImage = style({
     borderRadius: 12,
   },
 })
+export const switcherBox = style({ width: '100%', maxWidth: '912px' })

apps/web/src/modules/auction/components/Auction.tsx

@@ -1,7 +1,7 @@
 import { readContract } from '@wagmi/core'
 import { Flex, Grid } from '@zoralabs/zord'
 import { formatEther } from 'ethers/lib/utils.js'
-import React, { Fragment } from 'react'
+import React, { Fragment, ReactNode } from 'react'
 import useSWR from 'swr'
 
 import SWR_KEYS from 'src/constants/swrKeys'
@@ -12,7 +12,7 @@ import { AuctionBidFragment } from 'src/data/subgraph/sdk.generated'
 import { AddressType, Chain } from 'src/typings'
 
 import { useAuctionEvents } from '../hooks'
-import { auctionGrid, auctionWrapVariants, auctionWrapper } from './Auction.css'
+import { auctionGrid, auctionWrapper } from './Auction.css'
 import { AuctionDetails } from './AuctionDetails'
 import { AuctionImage } from './AuctionImage'
 import { AuctionPaused } from './AuctionPaused'
@@ -27,6 +27,7 @@ interface AuctionControllerProps {
   auctionAddress: string
   collection: string
   token: TokenWithWinner
+  viewSwitcher?: ReactNode
 }
 
 export const Auction: React.FC<AuctionControllerProps> = ({
@@ -73,54 +74,51 @@ export const Auction: React.FC<AuctionControllerProps> = ({
   )
 
   return (
-    <Flex className={auctionWrapVariants['post']}>
-      <Grid className={auctionGrid}>
-        <AuctionImage
-          key={`auction-${collection}-image-${token.id}`}
-          image={image}
-          isLoading={!auction}
+    <Grid className={auctionGrid}>
+      <AuctionImage
+        key={`auction-${collection}-image-${token.id}`}
+        image={image}
+        isLoading={!auction}
+      />
+      <Flex
+        direction={'column'}
+        height={{ '@initial': 'auto', '@768': '100%' }}
+        mt={{ '@initial': 'x4', '@768': 'x0' }}
+        className={auctionWrapper}
+      >
+        <AuctionTokenPicker
+          mintDate={mintDate}
+          name={name}
+          collection={collection}
+          tokenId={Number(token.id)}
+          currentAuction={auction?.tokenId.toNumber()}
         />
 
-        <Flex
-          direction={'column'}
-          height={{ '@initial': 'auto', '@768': '100%' }}
-          mt={{ '@initial': 'x4', '@768': 'x0' }}
-          className={auctionWrapper}
-        >
-          <AuctionTokenPicker
-            mintDate={mintDate}
-            name={name}
-            collection={collection}
-            tokenId={Number(token.id)}
-            currentAuction={auction?.tokenId.toNumber()}
+        {isTokenActiveAuction && !!auction && (
+          <CurrentAuction
+            chain={chain}
+            tokenId={token.id}
+            auctionAddress={auctionAddress}
+            bid={auction.highestBid}
+            owner={auction.highestBidder}
+            endTime={auction.endTime}
+            bids={bids || []}
           />
+        )}
 
-          {isTokenActiveAuction && !!auction && (
-            <CurrentAuction
-              chain={chain}
-              tokenId={token.id}
-              auctionAddress={auctionAddress}
-              bid={auction.highestBid}
-              owner={auction.highestBidder}
-              endTime={auction.endTime}
-              bids={bids || []}
-            />
-          )}
-
-          {!isTokenActiveAuction && !!auction && (
-            <Fragment>
-              <AuctionDetails>
-                <BidAmount isOver bid={tokenPrice ?? undefined} />
-                <WinningBidder owner={tokenOwner ?? undefined} />
-              </AuctionDetails>
-              <ActionsWrapper>
-                <BidHistory bids={bids || []} />
-              </ActionsWrapper>
-              <AuctionPaused />
-            </Fragment>
-          )}
-        </Flex>
-      </Grid>
-    </Flex>
+        {!isTokenActiveAuction && !!auction && (
+          <Fragment>
+            <AuctionDetails>
+              <BidAmount isOver bid={tokenPrice ?? undefined} />
+              <WinningBidder owner={tokenOwner ?? undefined} />
+            </AuctionDetails>
+            <ActionsWrapper>
+              <BidHistory bids={bids || []} />
+            </ActionsWrapper>
+            <AuctionPaused />
+          </Fragment>
+        )}
+      </Flex>
+    </Grid>
   )
 }

apps/web/src/modules/auction/components/ViewSwitcher.tsx

@@ -0,0 +1,54 @@
+import { Button, Flex, Text } from '@zoralabs/zord'
+import React, { ReactNode } from 'react'
+
+import {
+  buttonTab,
+  newTag,
+} from 'src/modules/dao/components/AuctionChart/AuctionChart.css'
+import { TopSectionView } from 'src/modules/dao/components/DaoTopSection'
+
+import { auctionWrapVariants, switcherBox } from './Auction.css'
+
+export const ViewSwitcher = ({
+  topSectionView,
+  setTopSectionView,
+  children,
+}: {
+  topSectionView: TopSectionView
+  setTopSectionView: (view: TopSectionView) => void
+  children: ReactNode
+}) => (
+  <Flex className={auctionWrapVariants['post']}>
+    <Flex w={'100%'} justify={'center'} mb={'x3'}>
+      <Flex className={switcherBox}>
+        {Object.values(TopSectionView).map((view) => (
+          <Button
+            key={view}
+            variant={'ghost'}
+            size="md"
+            pos={'relative'}
+            px={'x0'}
+            mr={'x3'}
+            onClick={() => setTopSectionView(view)}
+            className={
+              view === topSectionView ? buttonTab['selected'] : buttonTab['unselected']
+            }
+          >
+            {view}
+            {view === 'chart' && (
+              <Text
+                backgroundColor="positive"
+                className={newTag}
+                borderRadius={'phat'}
+                fontSize={12}
+              >
+                New
+              </Text>
+            )}
+          </Button>
+        ))}
+      </Flex>
+    </Flex>
+    <Flex justify={'center'}>{children}</Flex>
+  </Flex>
+)