nft tweaks (#288)
* pagination * fix filter * currently listed * refetch points
This commit is contained in:
parent
93923f937f
commit
3e363c8638
|
@ -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,
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue