From 3e363c863892afb6da6c96a640db55244cd1dc05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adrian=20Brzezi=C5=84ski?= Date: Mon, 16 Oct 2023 17:06:17 +0200 Subject: [PATCH] nft tweaks (#288) * pagination * fix filter * currently listed * refetch points --- apis/market/auctionHouse.ts | 37 +++++++-- components/nftMarket/ListingsView.tsx | 79 ++++---------------- components/nftMarket/SellNftModal.tsx | 4 + hooks/market/useAuctionHouse.ts | 2 + hooks/notifications/useNotificationSocket.ts | 12 +++ package.json | 3 +- yarn.lock | 7 ++ 7 files changed, 74 insertions(+), 70 deletions(-) diff --git a/apis/market/auctionHouse.ts b/apis/market/auctionHouse.ts index 8c75f0d5..9a805cc2 100644 --- a/apis/market/auctionHouse.ts +++ b/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, diff --git a/components/nftMarket/ListingsView.tsx b/components/nftMarket/ListingsView.tsx index b38cd3a3..d4481312 100644 --- a/components/nftMarket/ListingsView.tsx +++ b/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( 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 = () => { )} - {/*
+
-
*/} +
{asssetBidsModal && assetBidsListing ? ( { onClose() } catch (e) { console.log('error listing nft', e) + notify({ + title: `${e}`, + type: 'error', + }) } finally { setSubmitting(false) } diff --git a/hooks/market/useAuctionHouse.ts b/hooks/market/useAuctionHouse.ts index f03b245d..beacf150 100644 --- a/hooks/market/useAuctionHouse.ts +++ b/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 diff --git a/hooks/notifications/useNotificationSocket.ts b/hooks/notifications/useNotificationSocket.ts index 3dc3741c..0bd38816 100644 --- a/hooks/notifications/useNotificationSocket.ts +++ b/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() + } } }) diff --git a/package.json b/package.json index b53ead39..c56f44f4 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 46bd8255..e825b569 100644 --- a/yarn.lock +++ b/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"