Merge branch 'upgrade-rk-1.24.0' into dev

reservoirprotocol · Jan 4, 2024 · 9520d26 · 9520d26
2 parents ee0e3b6 + f3242cd
commit 9520d26
Show file tree

Hide file tree

Showing 22 changed files with 79 additions and 64 deletions.
diff --git a/components/buttons/BuyNow.tsx b/components/buttons/BuyNow.tsx
@@ -15,7 +15,7 @@ import { ReferralContext } from '../../context/ReferralContextProvider'
 
 type Props = {
   tokenId?: string
-  collectionId?: string
+  contract?: string
   orderId?: string
   buttonCss?: CSS
   buttonProps?: ComponentProps<typeof Button>
@@ -26,7 +26,7 @@ type Props = {
 
 const BuyNow: FC<Props> = ({
   tokenId,
-  collectionId,
+  contract,
   orderId = undefined,
   mutate,
   buttonCss,
@@ -45,8 +45,7 @@ const BuyNow: FC<Props> = ({
           {buttonChildren}
         </Button>
       }
-      tokenId={tokenId}
-      collectionId={collectionId}
+      token={`${contract}:${tokenId}`}
       orderId={orderId}
       openState={openState}
       onConnectWallet={() => {

diff --git a/components/buttons/Sweep.tsx b/components/buttons/Sweep.tsx
@@ -6,24 +6,26 @@ import React, {
   useContext,
 } from 'react'
 import { useConnectModal } from '@rainbow-me/rainbowkit'
-import { CollectModal, CollectStep } from '@reservoir0x/reservoir-kit-ui'
+import { SweepModal, SweepStep } from '@reservoir0x/reservoir-kit-ui'
 import { useMarketplaceChain } from 'hooks'
 import { CSS } from '@stitches/react'
 import { Button } from 'components/primitives'
 import { SWRResponse } from 'swr'
 import { ReferralContext } from 'context/ReferralContextProvider'
 
 type Props = {
+  contract?: string
   collectionId?: string
   tokenId?: string
   buttonCss?: CSS
   buttonProps?: ComponentProps<typeof Button>
   buttonChildren?: ReactNode
   mutate?: SWRResponse['mutate']
-  openState?: ComponentPropsWithoutRef<typeof CollectModal>['openState']
+  openState?: ComponentPropsWithoutRef<typeof SweepModal>['openState']
 }
 
 const Sweep: FC<Props> = ({
+  contract,
   collectionId,
   tokenId,
   buttonCss,
@@ -37,15 +39,14 @@ const Sweep: FC<Props> = ({
   const { feesOnTop } = useContext(ReferralContext)
 
   return (
-    <CollectModal
+    <SweepModal
       trigger={
         <Button css={buttonCss} color="primary" {...buttonProps}>
           {buttonChildren}
         </Button>
       }
       collectionId={collectionId}
-      tokenId={tokenId}
-      mode={'trade'}
+      token={`${contract}:${tokenId}`}
       openState={openState}
       //CONFIGURABLE: set any fees on top of orders, note that these will only
       // apply to native orders (using the reservoir order book) and not to external orders (opensea, blur etc)
@@ -57,7 +58,7 @@ const Sweep: FC<Props> = ({
         openConnectModal?.()
       }}
       onClose={(data, currentStep) => {
-        if (mutate && currentStep == CollectStep.Complete) mutate()
+        if (mutate && currentStep == SweepStep.Complete) mutate()
       }}
       onPointerDownOutside={(e) => {
         const privyLayer = document.getElementById('privy-dialog')

diff --git a/components/collections/TokenCard.tsx b/components/collections/TokenCard.tsx
@@ -14,7 +14,6 @@ import Link from 'next/link'
 import { SyntheticEvent, useContext } from 'react'
 import { MutatorCallback } from 'swr'
 import { formatNumber } from 'utils/numbers'
-import { formatUnits } from 'viem'
 import { Address } from 'wagmi'
 
 type TokenCardProps = {
@@ -43,7 +42,7 @@ export default ({
   showSource = true,
 }: TokenCardProps) => {
   const { addToast } = useContext(ToastContext)
-  const mediaType = extractMediaType(token?.token)
+  const mediaType = extractMediaType(token?.token?.media)
   const showMedia =
     mediaType === 'mp4' ||
     mediaType === 'mp3' ||
@@ -333,7 +332,7 @@ export default ({
         >
           <BuyNow
             tokenId={token.token?.tokenId}
-            collectionId={token.token?.collection?.id}
+            contract={token.token?.contract}
             mutate={mutate}
             buttonCss={{
               justifyContent: 'center',

diff --git a/components/common/ActivityTable.tsx b/components/common/ActivityTable.tsx
@@ -275,7 +275,8 @@ const ActivityTableRow: FC<ActivityTableRowProps> = ({ activity }) => {
                 </Flex>
               </Link>
               {activity.price &&
-              activity.price.amount?.decimal !== 0 &&
+              (activity.price.amount?.decimal !== 0 ||
+                activity.price.amount?.raw) &&
               activity.type &&
               activity.type !== 'transfer' ? (
                 <Flex
@@ -284,7 +285,10 @@ const ActivityTableRow: FC<ActivityTableRowProps> = ({ activity }) => {
                   css={{ minWidth: 'max-content', pl: '$2' }}
                 >
                   <FormatCryptoCurrency
-                    amount={activity.price.amount?.decimal}
+                    amount={
+                      activity.price.amount?.decimal ||
+                      activity.price.amount?.raw
+                    }
                     address={activity.price.currency?.contract}
                     logoHeight={16}
                     textStyle="subtitle1"
@@ -414,12 +418,14 @@ const ActivityTableRow: FC<ActivityTableRowProps> = ({ activity }) => {
       </TableCell>
       <TableCell>
         {activity.price &&
-        activity.price.amount?.decimal !== 0 &&
+        (activity.price.amount?.decimal !== 0 || activity.price.amount?.raw) &&
         activity.type &&
         activity.type !== 'transfer' ? (
           <Flex align="center">
             <FormatCryptoCurrency
-              amount={activity.price.amount?.decimal}
+              amount={
+                activity.price.amount?.decimal || activity.price.amount?.raw
+              }
               address={activity.price.currency?.contract}
               logoHeight={16}
               textStyle="h6"

diff --git a/components/common/CollectionsTimeDropdown.tsx b/components/common/CollectionsTimeDropdown.tsx
@@ -22,9 +22,9 @@ export type CollectionsSortingOption = NonNullable<
 const sortingOptions: CollectionsSortingOption[] = [
   '30d',
   '7d',
-  '1d',
   '24h',
   '6h',
+  '1h',
   '30m',
   '10m',
   '5m',
@@ -39,8 +39,6 @@ const nameForSortingOption = (
       return compact ? '30d' : '30 days'
     case '7d':
       return compact ? '7d' : '7 days'
-    case '1d':
-      return compact ? '1d' : '1 day'
     case '24h':
       return compact ? '24h' : '24 hours'
     case '6h':

diff --git a/components/common/MintsPeriodDropdown.tsx b/components/common/MintsPeriodDropdown.tsx
@@ -14,12 +14,12 @@ export type MintsSortingOption = NonNullable<
 >
 
 const sortingOptions: MintsSortingOption[] = [
-  '5m',
-  '10m',
-  '30m',
-  '1h',
-  '6h',
   '24h',
+  '6h',
+  '1h',
+  '30m',
+  '10m',
+  '5m',
 ]
 
 const nameForSortingOption = (option: MintsSortingOption, compact: boolean) => {

diff --git a/components/portfolio/BatchListings.tsx b/components/portfolio/BatchListings.tsx
@@ -313,7 +313,7 @@ const BatchListings: FC<Props> = ({
           // Find the highest floor price
           let topTraitPrice = Math.max(
             ...listing.token.token.attributes.map(
-              (attribute) => attribute.floorAskPrice ?? 0
+              (attribute) => attribute.floorAskPrice?.amount?.decimal ?? 0
             )
           )
           if (topTraitPrice && topTraitPrice > 0) {

diff --git a/components/portfolio/BatchListingsTableRow.tsx b/components/portfolio/BatchListingsTableRow.tsx
@@ -124,7 +124,7 @@ export const BatchListingsTableRow: FC<BatchListingsTableRowProps> = ({
     // Find the highest floor price
     return Math.max(
       ...listing.token.token.attributes.map(
-        (attribute) => attribute.floorAskPrice ?? 0
+        (attribute) => attribute.floorAskPrice?.amount?.decimal ?? 0
       )
     )
   }, [])

diff --git a/components/portfolio/ListingsTable.tsx b/components/portfolio/ListingsTable.tsx
@@ -272,7 +272,7 @@ const ListingTableRow: FC<ListingTableRowProps> = ({
           ) : (
             <BuyNow
               tokenId={listing?.criteria?.data?.token?.tokenId}
-              collectionId={listing?.criteria?.data?.collection?.id}
+              contract={listing?.contract}
               orderId={listing?.id}
               mutate={mutate}
               buttonCss={{
@@ -410,7 +410,7 @@ const ListingTableRow: FC<ListingTableRowProps> = ({
           ) : (
             <BuyNow
               tokenId={listing?.criteria?.data?.token?.tokenId}
-              collectionId={listing?.criteria?.data?.collection?.id}
+              contract={listing?.contract}
               orderId={listing?.id}
               mutate={mutate}
               buttonCss={{

diff --git a/components/portfolio/PortfolioTokenCard.tsx b/components/portfolio/PortfolioTokenCard.tsx
@@ -86,7 +86,7 @@ export default ({
 
   const isSmallDevice = useMediaQuery({ maxWidth: 900 })
 
-  const mediaType = extractMediaType(dynamicToken?.token)
+  const mediaType = extractMediaType(dynamicToken?.token?.media)
   const showPreview =
     mediaType === 'other' || mediaType === 'html' || mediaType === null
   const { routePrefix, proxyApi } = useMarketplaceChain()
@@ -376,7 +376,7 @@ export default ({
         >
           <BuyNow
             tokenId={token.token?.tokenId}
-            collectionId={token.token?.collection?.id}
+            contract={token.token?.contract}
             mutate={mutate}
             buttonCss={{
               justifyContent: 'center',

diff --git a/components/rankings/CollectionRankingsTable.tsx b/components/rankings/CollectionRankingsTable.tsx
@@ -75,11 +75,12 @@ export const CollectionRankingsTable: FC<Props> = ({
                 Collection
               </Text>
               <Text style="subtitle3" color="subtle">
+                {`${volumeKey.replace('day', 'D')} `}
                 Volume
               </Text>
             </Flex>
           ) : (
-            <TableHeading />
+            <TableHeading volumeKey={volumeKey} />
           )}
           <Flex direction="column" css={{ position: 'relative' }}>
             {collections.map((collection, i) => {
@@ -178,7 +179,7 @@ const RankingsTableRow: FC<RankingsTableRowProps> = ({
             />
             {volumeKey !== 'allTime' && (
               <PercentChange
-                value={collection?.collectionVolume?.[volumeKey]}
+                value={collection?.volumeChange?.[volumeKey]}
                 decimals={1}
               />
             )}
@@ -349,7 +350,7 @@ const headings = [
   'Sample Tokens',
 ]
 
-const TableHeading = () => (
+const TableHeading: React.FC<Pick<Props, 'volumeKey'>> = ({ volumeKey }) => (
   <HeaderRow
     css={{
       display: 'none',
@@ -368,6 +369,7 @@ const TableHeading = () => (
         css={{ textAlign: i === headings.length - 1 ? 'right' : 'left' }}
       >
         <Text style="subtitle3" color="subtle">
+          {heading === 'Volume' && `${volumeKey.replace('day', 'D')} `}
           {heading}
         </Text>
       </TableCell>

diff --git a/components/token/AttributeCard.tsx b/components/token/AttributeCard.tsx
@@ -46,7 +46,7 @@ export default ({ attribute, collectionTokenCount, collectionId }: Props) => {
             {attribute.value}
           </Text>
           <FormatCryptoCurrency
-            amount={attribute.floorAskPrice}
+            amount={attribute.floorAskPrice?.amount?.decimal}
             logoHeight={14}
             textStyle="subtitle1"
             maximumFractionDigits={2}

diff --git a/components/token/FullscreenMedia.tsx b/components/token/FullscreenMedia.tsx
@@ -25,7 +25,7 @@ type Props = {
 }
 
 const FullscreenMedia: FC<Props> = ({ token }) => {
-  const mediaType = extractMediaType(token?.token)
+  const mediaType = extractMediaType(token?.token?.media)
   const [open, setOpen] = useState(false)
 
   const trigger = (

diff --git a/components/token/ListingsTable.tsx b/components/token/ListingsTable.tsx
@@ -249,7 +249,7 @@ const ListingTableRow: FC<ListingTableRowProps> = ({
           {!isOwner && !is1155 ? (
             <BuyNow
               tokenId={listing.criteria?.data?.token?.tokenId || tokenId}
-              collectionId={listing.criteria?.data?.collection?.id || contract}
+              contract={contract}
               orderId={listing.id}
               buttonChildren="Buy"
               buttonCss={{ fontSize: 14, px: '$4', py: '$2', minHeight: 36 }}

diff --git a/components/token/TokenActions.tsx b/components/token/TokenActions.tsx
@@ -124,7 +124,7 @@ export const TokenActions: FC<Props> = ({
           >
             <BuyNow
               tokenId={token.token?.tokenId}
-              collectionId={token.token?.collection?.id}
+              contract={token.token?.contract}
               buttonCss={{ flex: 1, justifyContent: 'center' }}
               buttonProps={{ corners: 'square' }}
               buttonChildren="Buy Now"

diff --git a/package.json b/package.json
@@ -30,7 +30,7 @@
     "@radix-ui/react-toggle-group": "^1.0.1",
     "@radix-ui/react-tooltip": "1.0.6",
     "@rainbow-me/rainbowkit": "1.3.1",
-    "@reservoir0x/reservoir-kit-ui": "1.21.2",
+    "@reservoir0x/reservoir-kit-ui": "1.24.0",
     "@sentry/nextjs": "^7.85.0",
     "@types/uuid": "^9.0.1",
     "dayjs": "^1.11.6",

diff --git a/pages/[chain]/collection/[contract].tsx b/pages/[chain]/collection/[contract].tsx
@@ -510,6 +510,7 @@ const CollectionPage: NextPage<Props> = ({ id, ssr }) => {
                 <Flex css={{ alignItems: 'center', gap: '$3' }}>
                   {collection?.floorAsk?.price?.amount?.raw && sweepSymbol ? (
                     <Sweep
+                      contract={id}
                       collectionId={collection.id}
                       openState={isSweepRoute ? sweepOpenState : undefined}
                       buttonChildren={

diff --git a/pages/[chain]/collections/trending/index.tsx b/pages/[chain]/collections/trending/index.tsx
@@ -31,7 +31,7 @@ const IndexPage: NextPage<Props> = ({ ssr }) => {
   const isSSR = typeof window === 'undefined'
   const isMounted = useMounted()
   const compactToggleNames = useMediaQuery({ query: '(max-width: 800px)' })
-  const [sortByTime, setSortByTime] = useState<CollectionsSortingOption>('1d')
+  const [sortByTime, setSortByTime] = useState<CollectionsSortingOption>('24h')
 
   let collectionQuery: Parameters<typeof useTrendingCollections>['0'] = {
     limit: 1000,
@@ -64,7 +64,7 @@ const IndexPage: NextPage<Props> = ({ ssr }) => {
 
   let volumeKey: ComponentPropsWithoutRef<
     typeof CollectionRankingsTable
-  >['volumeKey'] = 'allTime'
+  >['volumeKey'] = '1day'
 
   switch (sortByTime) {
     case '30d':
@@ -73,7 +73,7 @@ const IndexPage: NextPage<Props> = ({ ssr }) => {
     case '7d':
       volumeKey = '7day'
       break
-    case '1d':
+    case '24h':
       volumeKey = '1day'
       break
   }