Skip to content

Commit

Permalink
Merge pull request holaplex#325 from holaplex/milo/feat/offer-list
Browse files Browse the repository at this point in the history
Milo/feat/offer list
  • Loading branch information
milorue authored Apr 14, 2022
2 parents 9cc371a + 3af1ee8 commit 4686932
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 8 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@
"react-toastify": "^7.0.4",
"styled-components": "^5.3.0",
"tailwind-scrollbar": "^1.3.1",
"timeago.js": "^4.0.2",
"ts-node": "^10.4.0",
"tweetnacl": "^1.0.3",
"use-onclickoutside": "^0.4.0",
Expand Down
74 changes: 67 additions & 7 deletions pages/nfts/[address].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,7 @@ import { SolIcon } from '../../src/common/components/elements/Price';
import { Tooltip } from 'antd';
import { useWallet } from '@solana/wallet-adapter-react';
import { CenteredContentCol } from 'pages';
import {
LoadingBox,
LoadingContainer,
LoadingLine,
} from '@/components/elements/LoadingPlaceholders';
import { LoadingContainer } from '@/components/elements/LoadingPlaceholders';
import { Tag } from '@/components/icons/Tag';
import Button from '@/components/elements/Button';
import {
Expand All @@ -46,6 +42,7 @@ import CancelSellForm from '../../src/common/components/forms/CancelSellForm';
import BuyForm from '../../src/common/components/forms/BuyForm';
import UpdateSellForm from '../../src/common/components/forms/UpdateSellForm';
import AcceptOfferForm from '../../src/common/components/forms/AcceptOfferForm';
import { format as formatTime } from 'timeago.js';

const DEFAULT_MARKETPLACE_ADDRESS = `EsrVUnwaqmsq8aDyZ3xLf8f5RmpcHL6ym5uTzwCRLqbE`;

Expand Down Expand Up @@ -233,11 +230,11 @@ export default function NftByAddress({ address }: { address: string }) {
const hasDefaultListing = Boolean(defaultListing);
const offer = nft?.offers.find((offer) => offer.buyer === publicKey?.toBase58());
const hasAddedOffer = Boolean(offer);
const offers = nft?.offers;
const offers = nft?.offers || [];

const isOwner = Boolean(nft?.owner?.address === publicKey?.toBase58());

const topOffers = offers?.sort((a, b) => Number(a.price) - Number(b.price));
const topOffers = offers?.slice()?.sort((a, b) => Number(b?.price) - Number(a?.price)) || [];
const topOffer = topOffers?.[0];
const hasOffers = Boolean(topOffer);

Expand Down Expand Up @@ -670,6 +667,69 @@ export default function NftByAddress({ address }: { address: string }) {
</div>
</div>
</div>
<div className={`my-10 flex flex-col justify-between text-sm sm:text-base md:text-lg`}>
<Accordion title={`Offers`}>
<section className={`w-full`}>
{hasOffers && (
<header
className={`mb-2 grid ${
isOwner || hasAddedOffer ? `grid-cols-4` : `grid-cols-3`
} items-center px-4`}
>
<span className={`text-xs text-gray-300`}>WALLET</span>
<span className={`text-xs text-gray-300`}>PRICE</span>
<span className={`text-xs text-gray-300`}>TIME</span>
{isOwner && <span className={`text-xs text-gray-300`}></span>}
</header>
)}

{!hasOffers && (
<div className="w-full rounded-lg border border-gray-800 p-10 text-center">
<h3>No offers found</h3>
<p className="mt- text-gray-500">There are currently no offers on this NFT.</p>
</div>
)}
{hasOffers &&
offers?.map((o: Offer) => (
<article
key={o.address}
className={`mb-4 grid rounded border border-gray-700 p-4 ${
isOwner || hasAddedOffer ? `grid-cols-4` : `grid-cols-3`
}`}
>
<div className={`flex items-center`}>
<Link href={`/profiles/${o.buyer}`}>
<a rel={`nofollower`}>{shortenAddress(o.address)}</a>
</Link>
</div>
<div className={`flex items-center`}>
<DisplaySOL amount={Number(o.price)} />
</div>
<div className={`flex items-center`}>{formatTime(o.createdAt, `en_US`)}</div>
{(hasAddedOffer || isOwner) && (
<div className={`flex w-full items-center justify-end gap-2`}>
{o.buyer === (publicKey?.toBase58() as string) && !isOwner && (
<Button secondary onClick={() => setOfferModalVisibility(true)}>
Cancel offer
</Button>
)}
{isOwner && (
<AcceptOfferForm
nft={nft as Nft | any}
offer={o as Offer}
listing={defaultListing as Listing}
marketplace={marketplace as Marketplace}
refetch={refetch}
className={`justify-end`}
/>
)}
</div>
)}
</article>
))}
</section>
</Accordion>
</div>
{/* {loading ? (
<div className="mb-4 grid grid-cols-4 gap-6 ">
<LoadingLine $height="56px" />
Expand Down
2 changes: 1 addition & 1 deletion src/common/components/elements/Accordion.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ function Accordion({ title, children, allowHorizOverflow, defaultOpen, ...props
<Disclosure {...props}>
{({ open }) => (
<>
<Disclosure.Button className="flex h-[71px] w-full justify-between rounded-t border border-gray-700 p-6">
<Disclosure.Button className="flex h-[71px] w-full items-center justify-between rounded-t border border-gray-700 p-6">
<p className="m-0"> {title}</p>

<ChevronRight
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -10907,6 +10907,11 @@ thunky@^1.0.2:
resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==

timeago.js@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/timeago.js/-/timeago.js-4.0.2.tgz#724e8c8833e3490676c7bb0a75f5daf20e558028"
integrity sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==

tiny-secp256k1@^1.1.3:
version "1.1.6"
resolved "https://registry.yarnpkg.com/tiny-secp256k1/-/tiny-secp256k1-1.1.6.tgz#7e224d2bee8ab8283f284e40e6b4acb74ffe047c"
Expand Down

0 comments on commit 4686932

Please sign in to comment.