Skip to content

Commit

Permalink
fix: merge conflict
Browse files Browse the repository at this point in the history
  • Loading branch information
kristianeboe committed Apr 11, 2022
2 parents d24d47f + f70b233 commit 58c1065
Show file tree
Hide file tree
Showing 19 changed files with 1,476 additions and 137 deletions.
5 changes: 0 additions & 5 deletions .babelrc.js

This file was deleted.

6 changes: 5 additions & 1 deletion next.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const withImages = require('next-images');
const withPlugins = require('next-compose-plugins');
const withImages = require('next-images');
const withLess = require('next-with-less');

const plugins = [
Expand Down Expand Up @@ -30,4 +30,8 @@ module.exports = withPlugins(plugins, {
'assets4.holaplex.tools',
],
},
compiler: {
// ssr and displayName are configured by default
styledComponents: true,
},
});
14 changes: 9 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,9 @@
"@holaplex/js": "^4.3.2",
"@holaplex/mpl-auction-house": "^0.0.3",
"@holaplex/ui": "^0.0.38",
"@hookform/resolvers": "^2.8.8",
"@metaplex-foundation/mpl-auction-house": "^1.1.1",
"@metaplex-foundation/mpl-token-metadata": "^1.2.5",
"@metaplex/js": "^4.2.0",
"@prisma/client": "^3.9.2",
"@project-serum/anchor": "^0.20.1",
Expand Down Expand Up @@ -71,9 +74,9 @@
"graphql-request": "^4.2.0",
"luxon": "^2.1.1",
"mixpanel-browser": "^2.43.0",
"next": "^12.0.10",
"next": "^12.1.4",
"next-compose-plugins": "^2.2.1",
"next-images": "^1.8.1",
"next-images": "^1.8.4",
"next-with-less": "^2.0.5",
"nextjs-cors": "^1.0.6",
"p-limit": "^4.0.0",
Expand All @@ -84,7 +87,7 @@
"react-color": "^2.19.3",
"react-device-detect": "^1.17.0",
"react-dom": "17.0.2",
"react-hook-form": "^7.17.1",
"react-hook-form": "^7.29.0",
"react-infinite-scroll-hook": "^4.0.1",
"react-intersection-observer": "^8.33.1",
"react-loader-spinner": "^5.1.4",
Expand All @@ -97,7 +100,8 @@
"tweetnacl": "^1.0.3",
"use-onclickoutside": "^0.4.0",
"uuid": "^8.3.2",
"yarn": "^1.22.10"
"yarn": "^1.22.10",
"zod": "^3.14.4"
},
"devDependencies": {
"@graphql-codegen/cli": "^2.4.0",
Expand Down Expand Up @@ -140,4 +144,4 @@
"engines": {
"node": "16.14.0"
}
}
}
134 changes: 108 additions & 26 deletions pages/nfts/[address].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
Creator,
ListingReceipt,
NftCreator,
useNftPageLazyQuery,
useNftMarketplaceLazyQuery,
useWalletProfileLazyQuery,
} from '../../src/graphql/indexerTypes';
import cx from 'classnames';
Expand All @@ -28,7 +28,20 @@ import {
LoadingBox,
LoadingContainer,
LoadingLine,
} from '@/common/components/elements/LoadingPlaceholders';
} from '@/components/elements/LoadingPlaceholders';
import { Tag } from '@/components/icons/Tag';
import Button from '@/components/elements/Button';
import {
HOLAPLEX_MARKETPLACE_ADDRESS,
HOLAPLEX_MARKETPLACE_SUBDOMAIN,
} from '@/constants/marketplace';
import { DisplaySOL } from '@/components/CurrencyHelpers';
import Modal from '@/components/elements/Modal';
import CancelOfferForm from '@/components/forms/CancelOfferForm';
import { Marketplace, Nft, Offer } from '@/types/types';
import { useRouter } from 'next/router';

const DEFAULT_MARKETPLACE_ADDRESS = `EsrVUnwaqmsq8aDyZ3xLf8f5RmpcHL6ym5uTzwCRLqbE`;

// import Bugsnag from '@bugsnag/js';
const HoverAvatar = ({ address, index }: { address: string; index: number }) => {
Expand Down Expand Up @@ -75,7 +88,7 @@ const HoverAvatar = ({ address, index }: { address: string; index: number }) =>
</Tooltip>
);
};
const OverlappingCircles = ({
export const OverlappingCircles = ({
creators,
}: {
creators: Omit<NftCreator, 'metadataAddress' | 'share'>[];
Expand Down Expand Up @@ -175,9 +188,25 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
};

export default function NftByAddress({ address }: { address: string }) {
const [queryNft, { data, loading, called }] = useNftPageLazyQuery();
const { publicKey } = useWallet();
const router = useRouter();

const [queryNft, { data, loading, called, refetch }] = useNftMarketplaceLazyQuery();
const [imgLoaded, setImgLoaded] = useState(false);
const [offerModalVisibility, setOfferModalVisibility] = useState(false);
const nft = data?.nft;
const marketplace = data?.marketplace;

// has listed via default Holaplex marketplace (disregards others)
const hasDefaultListing = Boolean(
nft?.listings.find(
(listing) => listing.auctionHouse.toString() === HOLAPLEX_MARKETPLACE_ADDRESS
)
);
const offer = nft?.offers.find((offer) => offer.buyer === publicKey?.toBase58());
const hasAddedOffer = Boolean(offer);

const isListed = nft?.listings.find((listing) => listing.auctionHouse);
// const isOwner = equals(data?.nft.owner.address, publicKey?.toBase58()) || null;

useEffect(() => {
Expand All @@ -186,6 +215,7 @@ export default function NftByAddress({ address }: { address: string }) {
try {
queryNft({
variables: {
subdomain: HOLAPLEX_MARKETPLACE_SUBDOMAIN,
address,
},
});
Expand All @@ -195,6 +225,10 @@ export default function NftByAddress({ address }: { address: string }) {
}
}, [address, queryNft]);

useEffect(() => {
refetch();
}, [router, router.push, refetch]);

if (called && !data?.nft && !loading) {
return <Custom404 />;
}
Expand Down Expand Up @@ -288,32 +322,69 @@ export default function NftByAddress({ address }: { address: string }) {
</div>
</div>
</div>
{nft?.attributes && nft.attributes.length > 0 && (
<Accordion title="Attributes">
<div className="mt-8 grid grid-cols-2 gap-6">
{loading ? (
<div>
<div className="h-16 rounded bg-gray-800" />
<div className="h-16 rounded bg-gray-800" />
<div className="h-16 rounded bg-gray-800" />
<div className="h-16 rounded bg-gray-800" />
<div className={`grid grid-cols-1 gap-10`}>
{!hasDefaultListing && (
<div className={`flex flex-col rounded-md bg-gray-800 p-6`}>
<div className={`flex h-24 w-full items-center justify-between`}>
<div className={`flex items-center`}>
<Tag className={`mr-2`} />
<h3 className={` text-base font-medium text-gray-300`}>Not Listed</h3>
</div>
) : (
nft?.attributes.map((a) => (
<div
key={a.traitType}
className="max-h-[300px] rounded border border-gray-700 p-6"
>
<p className="label truncate uppercase text-gray-500">{a.traitType}</p>
<p className="truncate text-ellipsis" title={a.value}>
{a.value}
</p>
{!hasAddedOffer && (
<div>
<Link href={`/nfts/${nft?.address}/offers/new`}>
<a>
<Button>Make offer</Button>
</a>
</Link>
</div>
)}
</div>
{offer && (
<div
className={`flex items-center justify-between border-t border-gray-700 pt-6`}
>
<ul className={`flex flex-col`}>
<li className={`text-base text-gray-300`}>Your offer </li>
<DisplaySOL amount={offer?.price} />
</ul>
<div>
<Button secondary onClick={() => setOfferModalVisibility(true)}>
Cancel offer
</Button>
</div>
))
</div>
)}
</div>
</Accordion>
)}
)}

{nft?.attributes && nft.attributes.length > 0 && (
<Accordion title="Attributes">
<div className="mt-8 grid grid-cols-2 gap-6">
{loading ? (
<div>
<div className="h-16 rounded bg-gray-800" />
<div className="h-16 rounded bg-gray-800" />
<div className="h-16 rounded bg-gray-800" />
<div className="h-16 rounded bg-gray-800" />
</div>
) : (
nft?.attributes.map((a) => (
<div
key={a.traitType}
className="max-h-[300px] rounded border border-gray-700 p-6"
>
<p className="label truncate uppercase text-gray-500">{a.traitType}</p>
<p className="truncate text-ellipsis" title={a.value}>
{a.value}
</p>
</div>
))
)}
</div>
</Accordion>
)}
</div>
</div>
</div>
{/* {loading ? (
Expand Down Expand Up @@ -344,6 +415,17 @@ export default function NftByAddress({ address }: { address: string }) {
)
)} */}
</div>
{nft && (
<Modal open={offerModalVisibility} setOpen={setOfferModalVisibility} title={`Cancel offer`}>
<CancelOfferForm
nft={nft as Nft | any}
marketplace={marketplace as Marketplace}
refetch={refetch}
offer={offer as Offer}
setOpen={setOfferModalVisibility}
/>
</Modal>
)}
</CenteredContentCol>
);
}
102 changes: 102 additions & 0 deletions pages/nfts/[address]/offers/new.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
import { GetServerSideProps } from 'next';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useState } from 'react';
import { LoadingContainer } from '@/components/elements/LoadingPlaceholders';
import Modal from '@/components/elements/Modal';
import OfferForm from '@/components/forms/OfferForm';
import BlurPage from '@/components/layouts/BlurPage';
import { imgOpt } from '@/common/utils';
import { useNftMarketplaceQuery, useNftPageQuery } from '../../../../src/graphql/indexerTypes';
import { Nft, Marketplace } from '@/types/types';

import Custom404 from '../../../404';
import NftByAddress, { Avatar, OverlappingCircles } from '../../[address]';
import { HOLAPLEX_MARKETPLACE_SUBDOMAIN } from '@/common/constants/marketplace';

export const getServerSideProps: GetServerSideProps = async (context) => {
return {
props: {
address: context?.params?.address ?? '',
},
};
};

const NewNFTOffer = ({ address }: { address: string }) => {
const [imgLoaded, setImgLoaded] = useState(false);

const { data, loading, called, refetch } = useNftMarketplaceQuery({
fetchPolicy: `no-cache`,
variables: {
subdomain: HOLAPLEX_MARKETPLACE_SUBDOMAIN,
address: address,
},
});

const nft = data?.nft;
const marketplace = data?.marketplace;

const router = useRouter();

const goBack = () => {
router.back();
};

if (called && !data?.nft && !loading) {
return <Custom404 />;
}

return (
<>
<BlurPage>
<NftByAddress address={address} />
</BlurPage>
<Modal title={`Make an offer`} open={true} setOpen={goBack}>
{/* nft */}
<div className={`mt-8 flex w-full justify-start`}>
<div className={`relative aspect-square h-14 w-14`}>
{loading ||
(!imgLoaded && (
<LoadingContainer className="absolute inset-0 rounded-lg bg-gray-800 shadow " />
))}
{nft?.image && (
<img
onLoad={() => setImgLoaded(true)}
src={imgOpt(nft?.image, 400)}
alt={`nft-mini-image`}
className={`block aspect-square w-full rounded-lg border-none object-cover `}
/>
)}
</div>
<div className={`ml-5`}>
<p className={`mb-0 text-base font-medium`}>{nft?.name}</p>
<ul className={`mt-2`}>
{loading ? (
<></>
) : nft?.creators.length === 1 ? (
<Link href={`/profiles/${nft?.creators[0].address}`}>
<a>
<Avatar address={nft?.creators[0].address} />
</a>
</Link>
) : (
<div>
<OverlappingCircles creators={nft?.creators || []} />
</div>
)}
</ul>
</div>
</div>
<div className={`mt-8 flex w-full`}>
<OfferForm
nft={nft as Nft | any}
marketplace={marketplace as Marketplace}
refetch={refetch}
/>
</div>
</Modal>
</>
);
};

export default NewNFTOffer;
14 changes: 14 additions & 0 deletions src/common/components/CurrencyHelpers.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { LAMPORTS_PER_SOL } from '@solana/web3.js';
import { FC, HTMLAttributes } from 'react';
import { SolIcon } from './elements/Price';

interface DisplaySOLProps extends HTMLAttributes<HTMLParagraphElement> {
amount: number;
}

export const DisplaySOL: FC<DisplaySOLProps> = ({ amount, className, ...rest }) =>
amount ? (
<b className={`inline-flex items-center ${className}`} {...rest}>
<SolIcon className="mr-1 h-3 w-3" stroke="white" /> {amount / LAMPORTS_PER_SOL}
</b>
) : null;
Loading

0 comments on commit 58c1065

Please sign in to comment.