nft tweaks (#288)

* pagination

* fix filter

* currently listed

* refetch points

apis/market/auctionHouse.ts

@@ -1,11 +1,17 @@
+import { toUiDecimals } from '@blockworks-foundation/mango-v4'
 import {
   AuctionHouse,
   Metaplex,
   LazyListing,
   LazyBid,
 } from '@metaplex-foundation/js'
-import { ALL_FILTER } from 'hooks/market/useAuctionHouse'
+import {
+  ALL_FILTER,
+  PRICE_LOW_HIGH,
+  YOUR_LISTINGS,
+} from 'hooks/market/useAuctionHouse'
 import { AUCTION_HOUSE_ID } from 'utils/constants'
+import { MANGO_MINT_DECIMALS } from 'utils/governance/constants'
 
 export const fetchAuctionHouse = async (metaplex: Metaplex) => {
   const auctionHouse = await metaplex
@@ -26,12 +32,31 @@ export const fetchFilteredListing = async (
       auctionHouse,
     })
   )
-    .filter((x) =>
-      filter === ALL_FILTER
-        ? true
-        : x.sellerAddress.equals(metaplex.identity().publicKey),
-    )
+    .filter((x) => {
+      if (filter === ALL_FILTER || filter.includes('Price')) {
+        return true
+      }
+      if (filter === YOUR_LISTINGS) {
+        return x.sellerAddress.equals(metaplex.identity().publicKey)
+      }
+    })
     .filter((x) => !x.canceledAt && !x.purchaseReceiptAddress)
+    .sort((a, b) => {
+      if (filter.includes('Price')) {
+        const aPrice = toUiDecimals(
+          a.price.basisPoints.toNumber(),
+          MANGO_MINT_DECIMALS,
+        )
+        const bPrice = toUiDecimals(
+          b.price.basisPoints.toNumber(),
+          MANGO_MINT_DECIMALS,
+        )
+        return filter === PRICE_LOW_HIGH ? aPrice - bPrice : bPrice - aPrice
+      }
+
+      return b.createdAt.toNumber() - a.createdAt.toNumber()
+    })
+
   const filteredListings = listings.slice(
     (page - 1) * perPage,
     page * perPage,

components/nftMarket/ListingsView.tsx

@@ -7,12 +7,14 @@ import { useWallet } from '@solana/wallet-adapter-react'
 import metaplexStore from '@store/metaplexStore'
 import {
   ALL_FILTER,
+  PRICE_LOW_HIGH,
+  YOUR_LISTINGS,
   useAuctionHouse,
   useBids,
   useLazyListings,
   useListings,
 } from 'hooks/market/useAuctionHouse'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { MANGO_MINT_DECIMALS } from 'utils/governance/constants'
 // import { useTranslation } from 'next-i18next'
 import { ImgWithLoader } from '@components/ImgWithLoader'
@@ -22,9 +24,8 @@ import Loading from '@components/shared/Loading'
 import SheenLoader from '@components/shared/SheenLoader'
 import EmptyState from './EmptyState'
 import { notify } from 'utils/notifications'
+import ResponsivePagination from 'react-responsive-pagination'
 
-const YOUR_LISTINGS = 'Your Listings'
-const PRICE_LOW_HIGH = 'Price: Low to High'
 const PRICE_HIGH_LOW = 'Price: High to Low'
 const defaultFilters = [
   ALL_FILTER,
@@ -46,25 +47,21 @@ const ListingsView = () => {
   const [bidNftModal, setBidNftModal] = useState(false)
   const [cancellingListing, setCancellingListing] = useState('')
   const [buying, setBuying] = useState('')
+  const [page, setPage] = useState(1)
 
   const { refetch } = useLazyListings()
   const {
     data: listings,
     isLoading: loadingListings,
     isFetching: fetchingListings,
-  } = useListings()
+  } = useListings(currentFilter, page)
   const [listingsToShow, setListingsToShow] = useState<Listing[] | undefined>(
     undefined,
   )
 
   useEffect(() => {
     if (!loadingListings && !fetchingListings) {
-      const sortedResults = listings
-        ? listings.results.sort(
-            (a, b) => b.createdAt.toNumber() - a.createdAt.toNumber(),
-          )
-        : []
-      setListingsToShow(sortedResults)
+      setListingsToShow(listings ? listings.results : [])
     }
   }, [listings, loadingListings, fetchingListings])
 
@@ -128,59 +125,15 @@ const ListingsView = () => {
     setAssetBidsModal(false)
     setAssetBidsListing(null)
   }
-  // const handlePageClick = (page: number) => {
-  //   setPage(page)
-  // }
+  const handlePageClick = (page: number) => {
+    setPage(page)
+  }
 
-  const filters = useMemo(() => {
-    if (!listings?.results || !listings?.results.length) return defaultFilters
-    const collections: string[] = []
-    for (const listing of listings.results) {
-      const collectionName = listing.asset.json?.collection?.family || 'Unknown'
-      if (!collections.includes(collectionName)) {
-        collections.push(collectionName)
-      }
-    }
-    return defaultFilters.concat(collections.sort((a, b) => a.localeCompare(b)))
-  }, [listings])
-
-  const handleFilter = useCallback(
-    (filter: string) => {
-      setCurrentFilter(filter)
-      if (filter === ALL_FILTER) {
-        const sortedResults = listings?.results.sort(
-          (a, b) => b.createdAt.toNumber() - a.createdAt.toNumber(),
-        )
-        setListingsToShow(sortedResults)
-      } else if (filter === YOUR_LISTINGS) {
-        const filteredListings = listings?.results.filter((listing) => {
-          return listing.sellerAddress.toString() === publicKey?.toString()
-        })
-        setListingsToShow(filteredListings)
-      } else if (filter.includes('Price')) {
-        return listings?.results.sort((a, b) => {
-          const aPrice = toUiDecimals(
-            a.price.basisPoints.toNumber(),
-            MANGO_MINT_DECIMALS,
-          )
-          const bPrice = toUiDecimals(
-            b.price.basisPoints.toNumber(),
-            MANGO_MINT_DECIMALS,
-          )
-          return filter === PRICE_LOW_HIGH ? aPrice - bPrice : bPrice - aPrice
-        })
-      } else {
-        const filteredListings = listings?.results.filter((listing) => {
-          const collectionName =
-            listing.asset.json?.collection?.family || 'Unknown'
-          return collectionName === filter
-        })
-        setListingsToShow(filteredListings)
-      }
-    },
-    [listings, publicKey],
-  )
+  const filters = defaultFilters
 
+  const handleFilter = (filter: string) => {
+    setCurrentFilter(filter)
+  }
   const loading = loadingListings || fetchingListings
 
   return (
@@ -318,13 +271,13 @@ const ListingsView = () => {
           </div>
         )}
       </div>
-      {/* <div>
+      <div>
         <ResponsivePagination
           current={page}
           total={listings?.totalPages || 0}
           onPageChange={handlePageClick}
         />
-      </div> */}
+      </div>
       {asssetBidsModal && assetBidsListing ? (
         <AssetBidsModal
           listing={assetBidsListing}

components/nftMarket/SellNftModal.tsx

@@ -66,6 +66,10 @@ const SellNftModal = ({ isOpen, onClose }: ModalProps) => {
       onClose()
     } catch (e) {
       console.log('error listing nft', e)
+      notify({
+        title: `${e}`,
+        type: 'error',
+      })
     } finally {
       setSubmitting(false)
     }

hooks/market/useAuctionHouse.ts

@@ -8,6 +8,8 @@ import metaplexStore from '@store/metaplexStore'
 import { Bid, LazyBid, LazyListing } from '@metaplex-foundation/js'
 
 export const ALL_FILTER = 'All'
+export const YOUR_LISTINGS = 'Your Listings'
+export const PRICE_LOW_HIGH = 'Price: Low to High'
 //10min
 const refetchMs = 600000
 

hooks/notifications/useNotificationSocket.ts

@@ -8,11 +8,20 @@ import { Notification } from 'apis/notifications/notifications'
 import { tryParse } from 'utils/formatting'
 import { NotificationsWebSocket } from 'apis/notifications/websocket'
 import useMangoAccount from 'hooks/useMangoAccount'
+import { useCurrentSeason, useWalletPoints } from 'hooks/useRewards'
 
 export function useNotificationSocket() {
   const isAuth = useIsAuthorized()
   const { publicKey } = useWallet()
   const { mangoAccountAddress } = useMangoAccount()
+  const { wallet } = useWallet()
+  const { data: seasonData } = useCurrentSeason()
+  const { refetch } = useWalletPoints(
+    mangoAccountAddress,
+    seasonData?.season_id,
+    wallet,
+  )
+
   const token = NotificationCookieStore((s) => s.currentToken)
 
   const queryClient = useQueryClient()
@@ -55,6 +64,9 @@ export function useNotificationSocket() {
               return [newNotification, ...prevData]
             },
           )
+          if (newNotification.title.toLowerCase().includes('points')) {
+            refetch()
+          }
         }
       })
 

package.json

@@ -75,7 +75,8 @@
     "three": "^0.155.0",
     "tsparticles": "2.2.4",
     "walktour": "5.1.1",
-    "zustand": "4.1.3"
+    "zustand": "4.1.3",
+    "react-responsive-pagination": "2.2.3"
   },
   "peerDependencies": {
     "@project-serum/anchor": "0.25.0",

yarn.lock

@@ -7504,6 +7504,13 @@ react-resize-detector@^8.0.4:
   dependencies:
     lodash "^4.17.21"
 
+react-responsive-pagination@2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-responsive-pagination/-/react-responsive-pagination-2.2.3.tgz#1945010c67ccdaefa41118f911fb4dd8237314a8"
+  integrity sha512-Rn9ts0AZzM0X+pcmVcSMNJAPD/ChO+1Yowssl56TidZcPHXdeg40FKdO7cw6MR1umaLFT/er/2GQTG6EUpw1VQ==
+  dependencies:
+    prop-types "^15.8.1"
+
 react-simple-animate@3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/react-simple-animate/-/react-simple-animate-3.0.2.tgz#67f29b0c64155d2dfd540c1c74f634ef521536a8"