mango-v4-ui/components/nftMarket/AssetBidsModal.tsx

62 lines
1.9 KiB
TypeScript

import { ModalProps } from '../../types/modal'
import Modal from '../shared/Modal'
import {
useAuctionHouse,
useBids,
useLazyListings,
} from 'hooks/market/useAuctionHouse'
import { toUiDecimals } from '@blockworks-foundation/mango-v4'
import { MANGO_MINT_DECIMALS } from 'utils/governance/constants'
import Button from '@components/shared/Button'
import metaplexStore from '@store/metaplexStore'
import { LazyBid, Listing, PublicBid } from '@metaplex-foundation/js'
import { useTranslation } from 'next-i18next'
const AssetBidsModal = ({
isOpen,
onClose,
listing,
}: ModalProps & { listing: Listing }) => {
const { t } = useTranslation(['nft-market'])
const metaplex = metaplexStore((s) => s.metaplex)
const { data: auctionHouse } = useAuctionHouse()
const { data: lazyBids, refetch: reftechBids } = useBids()
const { refetch: refetchLazyListings } = useLazyListings()
const assetBids = lazyBids?.filter((x) =>
x.metadataAddress.equals(listing.asset.metadataAddress),
)
const acceptBid = async (lazyBid: LazyBid) => {
const bid = await metaplex!.auctionHouse().loadBid({
lazyBid,
loadJsonMetadata: true,
})
await metaplex!.auctionHouse().sell({
auctionHouse: auctionHouse!,
bid: bid as PublicBid,
sellerToken: listing.asset.token,
})
refetchLazyListings()
reftechBids()
}
return (
<Modal isOpen={isOpen} onClose={onClose}>
<div className="flex max-h-[500px] min-h-[264px] flex-col overflow-auto">
{assetBids?.map((x) => (
<p className="flex space-x-2" key={x.createdAt.toNumber()}>
<div>{x.createdAt.toNumber()}</div>
<div>{toUiDecimals(x.price.basisPoints, MANGO_MINT_DECIMALS)}</div>
<div>
<Button onClick={() => acceptBid(x)}>{t('accept-bid')}</Button>
</div>
</p>
))}
</div>
</Modal>
)
}
export default AssetBidsModal