Skip to content
This repository has been archived by the owner on Dec 21, 2023. It is now read-only.

Commit

Permalink
Update styles and semantics for listed for per feedback (#660)
Browse files Browse the repository at this point in the history
  • Loading branch information
@TatisLois
TatisLois authored Jan 10, 2022
1 parent b8568cf commit 257a5ee
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 66 deletions.
48 changes: 36 additions & 12 deletions apps/next-react/src/components/SpotlightItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,9 @@ const SpotlightItem = ({
myProfile?.profile_id === thisItem?.listing?.profile_id &&
typeof myProfile?.profile_id === "number";

const freeItem = item?.listing?.min_price === 0;
const singleEdition = item?.listing?.total_edition_quantity === 1;

return (
<>
{typeof document !== "undefined" ? (
Expand Down Expand Up @@ -510,8 +513,9 @@ const SpotlightItem = ({
</div>
{item.listing && (
<p className="text-xs font-semibold text-gray-600 dark:text-gray-400">
{item.listing.total_edition_quantity} Editions /{" "}
{parseInt(item.listing.royalty_percentage)}% Royalties
{singleEdition
? `${item.listing.total_edition_quantity} Edition`
: `${item.listing.total_edition_quantity} Editions`}
</p>
)}
</div>
Expand Down Expand Up @@ -601,16 +605,36 @@ const SpotlightItem = ({
</div>
<div className="mt-8 inline-block">
{item.listing ? (
<Button
disabled={ifListedIsOwner}
style="primary"
title="Buy on Showtime"
onClick={() => setBuyModalOpen(true)}
>
{ifListedIsOwner
? `Listed for ${item.listing.min_price} ${item.listing.currency}`
: `Buy for ${item.listing.min_price} ${item.listing.currency}`}
</Button>
<>
{ifListedIsOwner ? (
<p className="px-4 text-sm sm:text-base dark:text-gray-500">
{freeItem ? (
"Listed for Free"
) : (
<>
{`Price ${item.listing.min_price} ${item.listing.currency}`}
</>
)}
</p>
) : (
<Button
disabled={ifListedIsOwner}
style="primary"
title="Buy on Showtime"
onClick={() => setBuyModalOpen(true)}
>
<p className="text-sm sm:text-base">
{freeItem ? (
"Price Free"
) : (
<>
{`Price ${item.listing.min_price} ${item.listing.currency}`}
</>
)}
</p>
</Button>
)}
</>
) : (
<Button
style="primary"
Expand Down
61 changes: 21 additions & 40 deletions apps/next-react/src/components/TokenCard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,6 @@ import {
CHAIN_IDENTIFIERS,
COLLECTION_NAME_TRUNCATE_LENGTH,
} from "../lib/constants";
import ShowtimeIcon from "./Icons/ShowtimeIcon";
import Tippy from "@tippyjs/react";

const TokenCard = ({
originalItem,
Expand Down Expand Up @@ -53,12 +51,13 @@ const TokenCard = ({
const [muted, setMuted] = useState(true);
const [refreshing, setRefreshing] = useState(false);
const [showModel, setShowModel] = useState(false);

const hasMatchingListing = item?.listing?.all_sellers?.find((seller) => {
return seller.profile_id === pageProfile?.profile_id;
});
const ifListedIsOwner =
myProfile?.profile_id === item?.listing?.profile_id &&
typeof myProfile?.profile_id === "number";

const freeListedItem = item?.listing?.min_price === 0;
const singleItem = item?.token_count === 1;

// Automatically load models that have no preview image. We don't account for video here because currently token_animation_url is a glb file.
useEffect(() => {
Expand Down Expand Up @@ -657,13 +656,6 @@ const TokenCard = ({
>
{item.token_name}
</p>
{SHOWTIME_CONTRACTS.includes(item.contract_address) && (
<Tippy content="Created on Showtime">
<div className="flex items-center justify-center">
<ShowtimeIcon className="w-5 h-5 rounded-full fill-gold" />
</div>
</Tippy>
)}
</div>
<div className="mt-4 flex items-center justify-between">
<div className="flex items-center space-x-4">
Expand Down Expand Up @@ -737,34 +729,21 @@ const TokenCard = ({
</div>
</a>
</Link>
{ifListedIsOwner ? (
<section className="space-x-4 flex items-end hover:bg-gray-100 dark:hover:bg-gray-900 py-0.5 px-3 -my-0.5 -mx-3 rounded-lg transition bg-gray-100 dark:bg-gray-900">
<div>
<span className="text-xs font-medium text-gray-600 dark:text-gray-500">
Listed for
</span>
<p className="text-sm font-bold text-gray-900 dark:text-gray-200 whitespace-nowrap">
{parseFloat(item.listing.min_price)} $
<section className="space-x-4 py-0.5 px-3 -my-0.5 -mx-3 rounded-lg">
<p className="text-right text-xs font-medium text-gray-600 dark:text-gray-500">
Price
</p>
<p className="text-sm font-bold text-gray-900 dark:text-gray-200 whitespace-nowrap">
{freeListedItem ? (
"Free"
) : (
<>
{parseFloat(item.listing.min_price)}{" "}
{item.listing.currency}
</p>
</div>
</section>
) : (
<button
onClick={() => setBuyModal(item)}
className="space-x-4 flex items-end hover:bg-gray-100 dark:hover:bg-gray-900 py-0.5 px-3 -my-0.5 -mx-3 rounded-lg transition"
>
<div className="text-right">
<span className="text-xs text-right font-medium text-gray-600 dark:text-gray-500">
Buy
</span>
<p className="text-sm font-bold text-gray-900 dark:text-gray-200 whitespace-nowrap">
{parseFloat(item.listing.min_price)} $
{item.listing.currency}
</p>
</div>
</button>
)}
</>
)}
</p>
</section>
</div>
) : item.owner_count && item.owner_count > 1 ? (
pageProfile && listId === 2 ? (
Expand Down Expand Up @@ -872,7 +851,9 @@ const TokenCard = ({
</p>
</div>
<p className="text-xs font-semibold text-gray-600 dark:text-gray-400">
{item.token_count ? `${item.token_count} Editions` : "1/1"}
{singleItem || !item.token_count
? "1 Edition"
: `${item.token_count} Editions`}
</p>
</div>
</div>
Expand Down
46 changes: 32 additions & 14 deletions apps/next-react/src/components/TokenDetailBody.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,10 +154,13 @@ const TokenDetailBody = ({
const isOwnedByUser =
typeof myProfile?.profile_id === "number" &&
myProfile?.profile_id === item?.owner_id;

const ifListedIsOwner =
myProfile?.profile_id === item?.listing?.profile_id &&
typeof myProfile?.profile_id === "number";

const freeItem = item?.listing?.min_price === 0;

return (
<>
{typeof document !== "undefined" ? (
Expand Down Expand Up @@ -626,20 +629,35 @@ const TokenDetailBody = ({
</div>

{item.listing ? (
<button
disabled={ifListedIsOwner}
title="Buy on Showtime"
className={`border-2 text-gray-800 dark:text-gray-500 border-transparent shadow-md dark:shadow-none dark:border-gray-500 dark:hover:border-gray-400 hover:text-gray-900 dark:hover:text-gray-400 px-4 py-2 rounded-full transition focus:outline-none flex items-center space-x-1 ${
ifListedIsOwner ? "bg-gray-100 cursor-default" : null
}`}
onClick={() => setBuyModalOpen(true)}
>
<p className="text-sm sm:text-base">
{ifListedIsOwner
? `Listed for ${item.listing.min_price} $${item.listing.currency}`
: `Buy for ${item.listing.min_price} $${item.listing.currency}`}
</p>
</button>
<>
{ifListedIsOwner ? (
<p className="px-4 text-sm sm:text-base dark:text-gray-500">
{freeItem ? (
"Listed for Free"
) : (
<>
{`Price ${item.listing.min_price} ${item.listing.currency}`}
</>
)}
</p>
) : (
<button
title="Buy on Showtime"
className="border-2 text-gray-800 dark:text-gray-500 border-transparent shadow-md dark:shadow-none dark:border-gray-500 dark:hover:border-gray-400 hover:text-gray-900 dark:hover:text-gray-400 px-4 py-2 rounded-full transition focus:outline-none flex items-center space-x-1"
onClick={() => setBuyModalOpen(true)}
>
<p className="text-sm sm:text-base">
{freeItem ? (
"Price Free"
) : (
<>
{`Price ${item.listing.min_price} ${item.listing.currency}`}
</>
)}
</p>
</button>
)}
</>
) : isOwnedByUser &&
SHOWTIME_CONTRACTS.includes(item.contract_address) ? (
<button
Expand Down

0 comments on commit 257a5ee

Please sign in to comment.