diff --git a/src/components/Activity/Action.tsx b/src/components/Activity/Action.tsx index 3e4ca7929..42aae279f 100644 --- a/src/components/Activity/Action.tsx +++ b/src/components/Activity/Action.tsx @@ -23,7 +23,7 @@ export const ActionReference = ({ target="_blank" rel="noreferrer" > - + ) diff --git a/src/components/Objkt/ObjktImageAndName.module.scss b/src/components/Objkt/ObjktImageAndName.module.scss index 329003a60..4f5e3496c 100644 --- a/src/components/Objkt/ObjktImageAndName.module.scss +++ b/src/components/Objkt/ObjktImageAndName.module.scss @@ -17,7 +17,10 @@ margin-left: 8px; } .label { - display: none; + width: 100%; + display: block; + color: var(--color-gray); + font-size: var(--font-size-vsmall); font-weight: 400; } .name { @@ -29,12 +32,6 @@ height: 50px; } @media (max-width: $breakpoint-sm) { - .label { - width: 100%; - display: block; - color: var(--color-gray); - font-size: var(--font-size-small); - } .name { font-size: var(--font-size-regular); } diff --git a/src/components/Objkt/ObjktImageAndName.tsx b/src/components/Objkt/ObjktImageAndName.tsx index 8c5e18757..a748768fc 100644 --- a/src/components/Objkt/ObjktImageAndName.tsx +++ b/src/components/Objkt/ObjktImageAndName.tsx @@ -33,7 +33,7 @@ const _TokenImageAndName = ({ /> - {label} + {label.toLocaleUpperCase()} {name} @@ -50,6 +50,7 @@ interface ObjktImageAndNameProps { const _ObjtkImageAndName = ({ objkt, shortName, + label = "Gentk", size = 40, }: ObjktImageAndNameProps) => { return ( @@ -57,7 +58,7 @@ const _ObjtkImageAndName = ({ href={`/gentk/${objkt.id}`} metadata={objkt.metadata} captureMedia={objkt.captureMedia} - label="Gentk" + label={label} name={shortName ? `#${objkt.iteration}` : objkt.name} /> ) @@ -78,8 +79,8 @@ const _GenerativeTokenImageAndName = ({ href={`/generative/${token.id}`} metadata={token.metadata} captureMedia={token.captureMedia} - name={shortName ? `Collection` : `${token.name} (collection)`} - label="Token" + name={shortName ? `Collection` : `${token.name}`} + label="Collection" /> ) diff --git a/src/components/Offers/ModalAcceptCollectionOffer.tsx b/src/components/Offers/ModalAcceptCollectionOffer.tsx index 755c92794..5fe418387 100644 --- a/src/components/Offers/ModalAcceptCollectionOffer.tsx +++ b/src/components/Offers/ModalAcceptCollectionOffer.tsx @@ -147,6 +147,16 @@ const _ModalAcceptCollectionOffer = ({ {gentk.name} + + You paid{" "} + {" "} + for this gentk + diff --git a/src/components/Tables/TableOffersReceived.tsx b/src/components/Tables/TableOffersReceived.tsx index 055a57109..8f31b91f4 100644 --- a/src/components/Tables/TableOffersReceived.tsx +++ b/src/components/Tables/TableOffersReceived.tsx @@ -1,4 +1,4 @@ -import React, { memo, useContext, useRef } from "react" +import React, { memo, useRef } from "react" import style from "./TableUser.module.scss" import cs from "classnames" import { @@ -10,7 +10,6 @@ import { import { GenerativeTokenImageAndName, ObjktImageAndName, - TokenImageAndName, } from "components/Objkt/ObjktImageAndName" import { DisplayTezos } from "components/Display/DisplayTezos" import { FloorDifference } from "components/Display/FloorDifference" @@ -20,7 +19,9 @@ import useHasScrolledToBottom from "hooks/useHasScrolledToBottom" import { OfferActions } from "components/Offers/OfferActions" import { CollectionOfferActions } from "components/Offers/CollectionOfferActions" import Skeleton from "components/Skeleton" -import { UserContext } from "containers/UserProvider" +import { useAriaTooltip } from "hooks/useAriaTooltip" +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" +import { faInfoCircle } from "@fortawesome/free-solid-svg-icons" interface RowProps { buttons?: React.ReactNode @@ -28,9 +29,40 @@ interface RowProps { offer: AnyOffer } +const PricePaidInfo = () => { + const { hoverElement, showTooltip, handleEnter, handleLeave } = + useAriaTooltip() + + return ( +
+ + + {showTooltip && ( + + hello + + )} +
+ ) +} + const Row = ({ buttons, feedback, offer }: RowProps) => { + const isIndividualOffer = offerTypeGuard(offer) + const renderPreview = () => { - if (offerTypeGuard(offer)) + if (isIndividualOffer) return ( offer.objkt && (
@@ -46,6 +78,10 @@ const Row = ({ buttons, feedback, offer }: RowProps) => { ) } + const pricePaid = isIndividualOffer + ? offer.objkt.lastSoldPrice! + : offer.token.minLastSoldPrice! + return ( <> {feedback && ( @@ -67,6 +103,19 @@ const Row = ({ buttons, feedback, offer }: RowProps) => { tezosSize="regular" /> + + {!offerTypeGuard(offer) && ( + + ≥{" "} + + )} + +
{
- +
Token Price - Floor Difference + Price paid + Floor diff From Time Action @@ -186,6 +236,9 @@ const _TableUserOffersReceived = ({ + + + { href={`/generative/${offer.token.id}`} metadata={offer.token.metadata} captureMedia={offer.token.captureMedia} - name={`${offer.token.name} (collection)`} - label="Token" + name={`${offer.token.name}`} + label="Collection" /> ) } @@ -89,7 +89,7 @@ const Row = ({ buttons, feedback, offer }: RowProps) => {
- +
{sale.objkt && (
- +
)} diff --git a/src/components/User/UserBadge.tsx b/src/components/User/UserBadge.tsx index 81ce9009c..b42a5a63d 100644 --- a/src/components/User/UserBadge.tsx +++ b/src/components/User/UserBadge.tsx @@ -139,7 +139,7 @@ export function UserBadge({ [style.donation]: isDonator(userAlias), })} > - {getUserName(userAlias, 15)} + {getUserName(userAlias, 8)} {verified && ( { + const abbreviations = { + " minutes": "m", + " minute": "m", + " hours": "h", + " hour": "h", + " days": "d", + " day": "d", + " months": "mo", + " month": "mo", + " years": "y", + " year": "y", + "about ": "", + } + + return Object.entries(abbreviations).reduce( + (acc, [key, value]) => acc.replace(key, value), + str + ) } -export const DateDistance = ({ timestamptz, append = false }: Props) => { + +export const DateDistance = ({ + timestamptz, + append = false, + shorten = false, +}: Props) => { const data = useMemo(() => { const dateTz = new Date(timestamptz) return { @@ -15,5 +42,10 @@ export const DateDistance = ({ timestamptz, append = false }: Props) => { }), } }, [timestamptz]) - return {data.dist} + + const dist = useMemo(() => { + return shorten ? abbreviate(data.dist) : data.dist + }, [data.dist, shorten]) + + return {dist} } diff --git a/src/queries/fragments/collection-offer.ts b/src/queries/fragments/collection-offer.ts index 3d5a7cc8e..f31250917 100644 --- a/src/queries/fragments/collection-offer.ts +++ b/src/queries/fragments/collection-offer.ts @@ -23,6 +23,7 @@ export const Frag_UserCollectionOffer = gql` captureMedia { ...MediaImage } + minLastSoldPrice(userId: $id) } } ` diff --git a/src/queries/fragments/offer.ts b/src/queries/fragments/offer.ts index 5ea622985..86cf5b85e 100644 --- a/src/queries/fragments/offer.ts +++ b/src/queries/fragments/offer.ts @@ -17,6 +17,8 @@ export const Frag_UserOffer = gql` version name metadata + lastSoldPrice + mintedPrice captureMedia { ...MediaImage } diff --git a/src/queries/user.ts b/src/queries/user.ts index 1387e3aec..a7f566173 100644 --- a/src/queries/user.ts +++ b/src/queries/user.ts @@ -456,6 +456,7 @@ export const Qu_userAcceptCollectionOffer = gql` floor } } + lastSoldPrice activeListing { id version diff --git a/src/types/entities/GenerativeToken.ts b/src/types/entities/GenerativeToken.ts index ccfe4d49f..68fc7cc73 100644 --- a/src/types/entities/GenerativeToken.ts +++ b/src/types/entities/GenerativeToken.ts @@ -143,6 +143,8 @@ export interface GenerativeToken { mintTickets: MintTicket[] mintTicketSettings: MintTicketSettings | null inputBytesSize: number + heldGentks?: Objkt[] + minLastSoldPrice?: number } export interface GenerativeTokenWithCollection extends GenerativeToken { diff --git a/src/types/entities/Objkt.ts b/src/types/entities/Objkt.ts index aab1888c0..7489580cf 100644 --- a/src/types/entities/Objkt.ts +++ b/src/types/entities/Objkt.ts @@ -19,6 +19,7 @@ export interface Objkt { duplicate?: boolean iteration?: number mintedPrice?: number + lastSoldPrice?: number | null tags: string[] name?: string slug?: string