112 lines
3.7 KiB
TypeScript
112 lines
3.7 KiB
TypeScript
import { useWallet } from '@solana/wallet-adapter-react'
|
|
import { ModalProps } from '../../types/modal'
|
|
import Modal from '../shared/Modal'
|
|
import {
|
|
useAuctionHouse,
|
|
useBids,
|
|
useLoadBids,
|
|
} from 'hooks/market/useAuctionHouse'
|
|
import { toUiDecimals } from '@blockworks-foundation/mango-v4'
|
|
import { MANGO_MINT_DECIMALS } from 'utils/governance/constants'
|
|
import { ImgWithLoader } from '@components/ImgWithLoader'
|
|
import metaplexStore from '@store/metaplexStore'
|
|
import { Bid } from '@metaplex-foundation/js'
|
|
import { useTranslation } from 'next-i18next'
|
|
import NftMarketButton from './NftMarketButton'
|
|
import { useState } from 'react'
|
|
import Loading from '@components/shared/Loading'
|
|
import EmptyState from './EmptyState'
|
|
import { notify } from 'utils/notifications'
|
|
|
|
const MyBidsModal = ({ isOpen, onClose }: ModalProps) => {
|
|
const { publicKey } = useWallet()
|
|
const [cancelling, setCancelling] = useState('')
|
|
const metaplex = metaplexStore((s) => s.metaplex)
|
|
const { t } = useTranslation(['nft-market'])
|
|
const { data: auctionHouse } = useAuctionHouse()
|
|
const { data: lazyBids, refetch } = useBids()
|
|
const myBids =
|
|
lazyBids && publicKey
|
|
? lazyBids.filter((x) => x.buyerAddress.equals(publicKey))
|
|
: []
|
|
|
|
const { data: bids } = useLoadBids(myBids)
|
|
|
|
const cancelBid = async (bid: Bid) => {
|
|
setCancelling(bid.asset.mint.address.toString())
|
|
try {
|
|
const { response } = await metaplex!.auctionHouse().cancelBid({
|
|
auctionHouse: auctionHouse!,
|
|
bid,
|
|
})
|
|
refetch()
|
|
if (response) {
|
|
notify({
|
|
title: 'Transaction confirmed',
|
|
type: 'success',
|
|
txid: response.signature,
|
|
})
|
|
}
|
|
} catch (e) {
|
|
console.log('error cancelling offer', e)
|
|
} finally {
|
|
setCancelling('')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal isOpen={isOpen} onClose={onClose}>
|
|
<h2 className="mb-4 text-center text-lg">Your Offers</h2>
|
|
<div className="space-y-4">
|
|
{bids && bids.length ? (
|
|
bids
|
|
.sort((a, b) => b.createdAt.toNumber() - a.createdAt.toNumber())
|
|
.map((x) => (
|
|
<div
|
|
className="flex items-center justify-between"
|
|
key={x.createdAt.toNumber()}
|
|
>
|
|
<div className="flex items-center">
|
|
{x.asset?.json?.image ? (
|
|
<ImgWithLoader
|
|
className="mr-3 w-12 rounded-md"
|
|
alt={x.asset?.name || 'Unknown'}
|
|
src={x.asset.json.image}
|
|
/>
|
|
) : null}
|
|
<div>
|
|
<p className="font-bold text-th-fgd-2">
|
|
{x.asset?.json?.name || 'Unknown'}
|
|
</p>
|
|
<p className="text-xs">
|
|
{x.asset?.json?.collection?.family || 'Unknown'}
|
|
</p>
|
|
<span className="font-display text-th-fgd-2">
|
|
{toUiDecimals(x.price.basisPoints, MANGO_MINT_DECIMALS)}{' '}
|
|
<span className="font-body">MNGO</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<NftMarketButton
|
|
text={
|
|
cancelling === x.asset.mint.address.toString() ? (
|
|
<Loading />
|
|
) : (
|
|
t('cancel')
|
|
)
|
|
}
|
|
colorClass="error"
|
|
onClick={() => cancelBid(x)}
|
|
/>
|
|
</div>
|
|
))
|
|
) : (
|
|
<EmptyState text="No offers to display..." />
|
|
)}
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default MyBidsModal
|