Merge pull request #417 from reservoirprotocol/armando/grwth-3585-tre…

…nding-mint-detail-page Armando/grwth 3585 trending mint detail page
reservoirprotocol · Nov 28, 2023 · 74a77d1 · 74a77d1
2 parents 7e0bb2d + 1a6417c
commit 74a77d1
Show file tree

Hide file tree

Showing 21 changed files with 197 additions and 277 deletions.
diff --git a/.github/workflows/sync-env-branches.yml b/.github/workflows/sync-env-branches.yml
@@ -28,6 +28,12 @@ jobs:
           git pull
           git merge --no-ff main -m "Auto-merge main into default"
           git push
+      - name: Sync privy with main
+        run: |
+          git checkout privy
+          git pull
+          git merge --no-ff main -m "Auto-merge main into privy"
+          git push
       - name: Report Status
         uses: ravsamhq/notify-slack-action@v1
         if: always()

diff --git a/components/buttons/List.tsx b/components/buttons/List.tsx
@@ -47,7 +47,7 @@ const List: FC<Props> = ({
   const listingCurrencies: ListingCurrencies =
     marketplaceChain.listingCurrencies
   const tokenId = token?.token?.tokenId
-  const contract = token?.token?.contract
+  const collectionId = token?.token?.collection?.id
 
   const trigger = (
     <Button css={buttonCss} color="primary" {...buttonProps}>
@@ -69,7 +69,7 @@ const List: FC<Props> = ({
     return (
       <ListModal
         trigger={trigger}
-        collectionId={contract}
+        collectionId={collectionId}
         tokenId={tokenId}
         feesBps={orderFees}
         enableOnChainRoyalties={true}

diff --git a/components/collections/TokenCard.tsx b/components/collections/TokenCard.tsx
@@ -1,4 +1,4 @@
-import { faCheck, faCircleExclamation } from '@fortawesome/free-solid-svg-icons'
+import { faCheck } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
   extractMediaType,
@@ -7,19 +7,14 @@ import {
 } from '@reservoir0x/reservoir-kit-ui'
 import AddToCart from 'components/buttons/AddToCart'
 import BuyNow from 'components/buttons/BuyNow'
-import {
-  Box,
-  Flex,
-  FormatCryptoCurrency,
-  Text,
-  Tooltip,
-} from 'components/primitives'
+import { Box, Flex, FormatCryptoCurrency, Text } from 'components/primitives'
 import { ToastContext } from 'context/ToastContextProvider'
 import { useMarketplaceChain } from 'hooks'
 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 = {
@@ -255,11 +250,14 @@ export default ({
                   {token?.market?.floorAsk?.price && (
                     <FormatCryptoCurrency
                       logoHeight={18}
-                      amount={token?.market?.floorAsk?.price?.amount?.decimal}
+                      amount={token?.market?.floorAsk?.price?.amount?.raw}
                       address={
                         token?.market?.floorAsk?.price?.currency?.contract
                       }
-                      borderRadius='100%'
+                      decimals={
+                        token?.market?.floorAsk?.price?.currency?.decimals
+                      }
+                      borderRadius="100%"
                       textStyle="h6"
                       css={{
                         textOverflow: 'ellipsis',

diff --git a/components/common/ActivityTable.tsx b/components/common/ActivityTable.tsx
@@ -247,7 +247,11 @@ const ActivityTableRow: FC<ActivityTableRowProps> = ({ activity }) => {
                 <Flex align="center">
                   {imageSrc && (
                     <Image
-                      style={{ borderRadius: '4px', objectFit: 'cover' }}
+                      style={{
+                        borderRadius: '4px',
+                        objectFit: 'cover',
+                        aspectRatio: '1/1',
+                      }}
                       loader={({ src }) => src}
                       src={imageSrc}
                       alt={`${activity.token?.tokenName} Token Image`}
@@ -374,7 +378,11 @@ const ActivityTableRow: FC<ActivityTableRowProps> = ({ activity }) => {
           <Flex align="center">
             {imageSrc && (
               <Img
-                style={{ borderRadius: '4px', objectFit: 'cover' }}
+                style={{
+                  borderRadius: '4px',
+                  objectFit: 'cover',
+                  aspectRatio: '1/1',
+                }}
                 loader={({ src }) => src}
                 src={imageSrc}
                 alt="Activity Token Image"
@@ -388,7 +396,11 @@ const ActivityTableRow: FC<ActivityTableRowProps> = ({ activity }) => {
               css={{ ml: '$3' }}
               style={{ maxWidth: '100%', minWidth: 0, overflow: 'hidden' }}
             >
-              <Text style="subtitle1" ellipsify css={{ fontSize: '14px' }}>
+              <Text
+                style="subtitle1"
+                ellipsify
+                css={{ fontSize: '14px', maxWidth: '100%' }}
+              >
                 {activity.token?.tokenName ||
                   activity.token?.tokenId ||
                   activity.collection?.collectionName}

diff --git a/components/common/MintsPeriodDropdown.tsx b/components/common/MintsPeriodDropdown.tsx
@@ -16,7 +16,6 @@ export type MintsSortingOption = NonNullable<
 const sortingOptions: MintsSortingOption[] = [
   '24h',
   '6h',
-  '2h',
   '1h',
   '30m',
   '10m',
@@ -29,8 +28,6 @@ const nameForSortingOption = (option: MintsSortingOption, compact: boolean) => {
       return compact ? '24h' : '24 hours'
     case '6h':
       return compact ? '6h' : '6 hours'
-    case '2h':
-      return compact ? '2h' : '2 hours'
     case '1h':
       return compact ? '1h' : '1 hour'
     case '30m':

diff --git a/components/navbar/AccountSidebar.tsx b/components/navbar/AccountSidebar.tsx
@@ -169,7 +169,7 @@ export const AccountSidebar: FC = () => {
                     </CopyText>
                   </Flex>
                   <Grid css={{ gridTemplateColumns: '1fr 1fr', mt: 32 }}>
-                    <Link href="/portfolio?tab=items" replace={true}>
+                    <Link href={`/portfolio/${address || ''}?tab=items`} replace={true}>
                       <Flex
                         align="center"
                         css={{
@@ -183,7 +183,7 @@ export const AccountSidebar: FC = () => {
                         <Text style="body1">My Items</Text>
                       </Flex>
                     </Link>
-                    <Link href="/portfolio?tab=listings" replace={true}>
+                    <Link href={`/portfolio/${address || ''}?tab=listings`} replace={true}>
                       <Flex
                         align="center"
                         css={{
@@ -197,7 +197,7 @@ export const AccountSidebar: FC = () => {
                         <Text style="body1">Listings</Text>
                       </Flex>
                     </Link>
-                    <Link href="/portfolio?tab=offers" replace={true}>
+                    <Link href={`/portfolio/${address || ''}?tab=offers`} replace={true}>
                       <Flex
                         align="center"
                         css={{
@@ -211,7 +211,7 @@ export const AccountSidebar: FC = () => {
                         <Text style="body1">Offers Made</Text>
                       </Flex>
                     </Link>
-                    <Link href="/portfolio?tab=activity" replace={true}>
+                    <Link href={`/portfolio/${address || ''}?tab=activity`} replace={true}>
                       <Flex
                         align="center"
                         css={{

diff --git a/components/navbar/HamburgerMenu.tsx b/components/navbar/HamburgerMenu.tsx
@@ -97,7 +97,7 @@ const HamburgerMenu = () => {
               px: '$4',
             }}
           >
-            <Link href={`/portfolio/${address}`} legacyBehavior>
+            <Link href={`/portfolio/${address || ''}`} legacyBehavior>
               <Flex
                 css={{
                   justifyContent: 'space-between',
@@ -246,7 +246,7 @@ const HamburgerMenu = () => {
                   Explore
                 </Text>
               </Link>
-              <Link href="/portfolio" legacyBehavior>
+              <Link href={`/portfolio/${address || ''}`} legacyBehavior>
                 <Text
                   style="subtitle1"
                   css={{

diff --git a/components/navbar/index.tsx b/components/navbar/index.tsx
@@ -28,6 +28,8 @@ const Navbar = () => {
   const isMobile = useMediaQuery({ query: '(max-width: 960px' })
   const isMounted = useMounted()
   const { routePrefix } = useMarketplaceChain()
+  const { address } = useAccount();
+
 
   let searchRef = useRef<HTMLInputElement>(null)
 
@@ -239,7 +241,7 @@ const Navbar = () => {
             </HoverCard.Root>
           </Box>
           {isConnected && (
-            <Link href={`/portfolio`}>
+            <Link href={`/portfolio/${address || ''}`}>
               <Box css={{ mr: '$2' }}>
                 <NavItem>Portfolio</NavItem>
               </Box>

diff --git a/components/portfolio/BatchListings.tsx b/components/portfolio/BatchListings.tsx
@@ -70,13 +70,7 @@ const marketplaces = [
     name: 'Reservoir',
     imageUrl: 'https://api.reservoir.tools/redirect/sources/reservoir/logo/v2',
     orderbook: 'reservoir',
-    orderKind: 'seaport-v1.4',
-  },
-  {
-    name: 'OpenSea',
-    imageUrl: 'https://api.reservoir.tools/redirect/sources/opensea/logo/v2',
-    orderbook: 'opensea',
-    orderKind: 'seaport-v1.4',
+    orderKind: 'seaport-v1.5',
   },
 ]
 
@@ -243,75 +237,6 @@ const BatchListings: FC<Props> = ({
     setListButtonDisabled(hasInvalidPrice)
   }, [listings])
 
-  const removeMarketplaceListings = useCallback(
-    (orderbook: string) => {
-      let updatedListings = listings.filter(
-        (listing) => listing.orderbook === orderbook
-      )
-      setListings(updatedListings)
-    },
-    [listings]
-  )
-
-  const addMarketplaceListings = useCallback(
-    (orderbook: string, orderKind: string) => {
-      setListings((prevListings) => {
-        const updatedListings = [...prevListings]
-
-        selectedItems.forEach((item) => {
-          const existingListingIndex = updatedListings.findIndex(
-            (listing) =>
-              listing.token === item && listing.orderbook === orderbook
-          )
-
-          if (existingListingIndex === -1) {
-            const newListing: BatchListing = {
-              token: item,
-              quantity: 1,
-              price: globalPrice || '0',
-              expirationOption: globalExpirationOption,
-              //@ts-ignore
-              orderbook: orderbook,
-              //@ts-ignore
-              orderKind: orderKind,
-            }
-            updatedListings.push(newListing)
-          }
-        })
-
-        return updatedListings
-      })
-    },
-    [selectedItems, globalPrice, globalExpirationOption]
-  )
-
-  const handleMarketplaceSelection = useCallback(
-    (marketplace: Marketplace) => {
-      const isSelected = selectedMarketplaces.some(
-        (selected) => selected.orderbook === marketplace.orderbook
-      )
-
-      if (isSelected) {
-        setSelectedMarketplaces((prevSelected) =>
-          prevSelected.filter(
-            (selected) => selected.orderbook !== marketplace.orderbook
-          )
-        )
-        removeMarketplaceListings(marketplace.orderbook as string)
-      } else {
-        setSelectedMarketplaces((prevSelected) => [
-          ...prevSelected,
-          marketplace,
-        ])
-        addMarketplaceListings(
-          marketplace.orderbook as string,
-          marketplace.orderKind as string
-        )
-      }
-    },
-    [selectedMarketplaces, addMarketplaceListings, removeMarketplaceListings]
-  )
-
   const updateListing = useCallback((updatedListing: BatchListing) => {
     setListings((prevListings) => {
       return prevListings.map((listing) => {
@@ -383,40 +308,6 @@ const BatchListings: FC<Props> = ({
         justify="between"
         css={{ border: '1px solid $gray6', borderRadius: 8, p: 24 }}
       >
-        <Flex direction="column" css={{ gap: '$3' }}>
-          <Text style="h6">Select Marketplaces</Text>
-          <Flex align="center" css={{ gap: '$3' }}>
-            {marketplaces.map((marketplace) => {
-              const isSelected = selectedMarketplaces.some(
-                (selected) => selected.orderbook === marketplace.orderbook
-              )
-
-              return (
-                <Flex
-                  key={marketplace.name}
-                  align="center"
-                  css={{
-                    border: isSelected
-                      ? '1px solid $primary7'
-                      : '1px solid $gray6',
-                    borderRadius: 8,
-                    gap: '$2',
-                    p: '$3',
-                    cursor: 'pointer',
-                  }}
-                  onClick={() => handleMarketplaceSelection(marketplace)}
-                >
-                  <img
-                    src={marketplace.imageUrl}
-                    alt={marketplace.name}
-                    style={{ width: 32, height: 32 }}
-                  />
-                  <Text style="subtitle2">{marketplace.name}</Text>
-                </Flex>
-              )
-            })}
-          </Flex>
-        </Flex>
         <Flex direction="column" css={{ gap: '$3' }}>
           <Text style="h6">Apply to All</Text>
           <Flex align="center" css={{ gap: '$5' }}>

diff --git a/components/portfolio/BatchListingsTableRow.tsx b/components/portfolio/BatchListingsTableRow.tsx
@@ -236,17 +236,6 @@ export const BatchListingsTableRow: FC<BatchListingsTableRowProps> = ({
     >
       <TableCell css={{ overflow: 'hidden', minWidth: 0 }}>
         <Flex align="center" css={{ gap: '$3' }}>
-          <img
-            src={marketplace?.imageUrl}
-            alt={marketplace?.name}
-            style={{
-              width: 32,
-              height: 32,
-              borderRadius: 4,
-              aspectRatio: '1/1',
-              visibility: marketplace?.imageUrl ? 'visible' : 'hidden',
-            }}
-          />
           <img
             src={tokenImage}
             style={{