From 6aa6582aaefe5c9c2b7ccff51dad3867e45e5a88 Mon Sep 17 00:00:00 2001 From: louis Date: Thu, 13 Apr 2023 12:53:33 +0100 Subject: [PATCH 1/9] add price paid to user offers --- .../Offers/ModalAcceptCollectionOffer.tsx | 13 +++++++++-- src/components/Tables/TableOffersReceived.tsx | 22 +++++++++++++++++++ src/components/Tables/TableOffersSent.tsx | 2 -- src/components/Tables/TableUser.module.scss | 4 ++++ src/queries/fragments/collection-offer.ts | 5 +++++ src/queries/fragments/offer.ts | 2 ++ src/queries/user.ts | 2 ++ src/types/entities/GenerativeToken.ts | 1 + src/types/entities/Objkt.ts | 1 + 9 files changed, 48 insertions(+), 4 deletions(-) diff --git a/src/components/Offers/ModalAcceptCollectionOffer.tsx b/src/components/Offers/ModalAcceptCollectionOffer.tsx index 3efbbac36..dbb3665b8 100644 --- a/src/components/Offers/ModalAcceptCollectionOffer.tsx +++ b/src/components/Offers/ModalAcceptCollectionOffer.tsx @@ -3,7 +3,7 @@ import { Button } from "../Button" import { Modal } from "../Utils/Modal" import style from "./ModalAcceptCollectionOffer.module.scss" import { Spacing } from "../Layout/Spacing" -import { CollectionOffer, offerTypeGuard } from "types/entities/Offer" +import { CollectionOffer } from "types/entities/Offer" import { Objkt } from "types/entities/Objkt" import { useQuery } from "@apollo/client" import { UserContext } from "containers/UserProvider" @@ -36,7 +36,6 @@ const _ModalAcceptCollectionOffer = ({ fetchPolicy: "no-cache", }) - console.log(data) const floor = data?.user?.objkts?.[0]?.issuer?.marketStats?.floor return ( @@ -78,6 +77,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 fc3cae712..24862cf7a 100644 --- a/src/components/Tables/TableOffersReceived.tsx +++ b/src/components/Tables/TableOffersReceived.tsx @@ -49,6 +49,16 @@ const Row = ({ buttons, feedback, offer }: RowProps) => { ) } + const getMinLastSoldPrice = () => { + if (offerTypeGuard(offer)) + return offer.objkt.lastSoldPrice || offer.objkt.mintedPrice! + return offer.token.heldGentks!.reduce((acc, item) => { + const price = item.lastSoldPrice || item.mintedPrice! + if (acc === null) return price + return Math.min(acc, price) + }, null as number | null) as number + } + return ( <> {feedback && ( @@ -70,6 +80,14 @@ const Row = ({ buttons, feedback, offer }: RowProps) => { tezosSize="regular" /> + + + Token Price + Price paid Floor Difference From Time @@ -192,6 +211,9 @@ const _TableUserOffersReceived = ({ + + +
diff --git a/src/components/Tables/TableUser.module.scss b/src/components/Tables/TableUser.module.scss index 5e5023e96..e923dd96b 100644 --- a/src/components/Tables/TableUser.module.scss +++ b/src/components/Tables/TableUser.module.scss @@ -94,6 +94,10 @@ td.td-right { width: 120px; } +.th-price_paid { + width: 120px; +} + .th-floor { width: 160px; } diff --git a/src/queries/fragments/collection-offer.ts b/src/queries/fragments/collection-offer.ts index 24f01894c..132a0f057 100644 --- a/src/queries/fragments/collection-offer.ts +++ b/src/queries/fragments/collection-offer.ts @@ -21,6 +21,11 @@ export const Frag_UserCollectionOffer = gql` captureMedia { ...MediaImage } + heldGentks(userId: $id) { + id + lastSoldPrice + mintedPrice + } } } ` diff --git a/src/queries/fragments/offer.ts b/src/queries/fragments/offer.ts index 99c5fe4b5..b9a26c62e 100644 --- a/src/queries/fragments/offer.ts +++ b/src/queries/fragments/offer.ts @@ -16,6 +16,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 b98ea4f2a..2be91e902 100644 --- a/src/queries/user.ts +++ b/src/queries/user.ts @@ -450,6 +450,8 @@ export const Qu_userAcceptCollectionOffer = gql` floor } } + lastSoldPrice + mintedPrice } } } diff --git a/src/types/entities/GenerativeToken.ts b/src/types/entities/GenerativeToken.ts index bddef7495..96a7d7cbf 100644 --- a/src/types/entities/GenerativeToken.ts +++ b/src/types/entities/GenerativeToken.ts @@ -142,6 +142,7 @@ export interface GenerativeToken { mintTickets: MintTicket[] mintTicketSettings: MintTicketSettings | null inputBytesSize: number + heldGentks?: Objkt[] } 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 From 568d0b3e908b0c28959fa65afb5819915afebff2 Mon Sep 17 00:00:00 2001 From: louis Date: Wed, 19 Apr 2023 20:06:48 +0100 Subject: [PATCH 2/9] add price paid to TableOffersReceived --- .../Offers/ModalAcceptCollectionOffer.tsx | 4 +- src/components/Tables/TableOffersReceived.tsx | 63 ++++++++++++++----- src/components/Tables/TableUser.module.scss | 4 ++ src/queries/fragments/collection-offer.ts | 6 +- src/types/entities/GenerativeToken.ts | 1 + 5 files changed, 57 insertions(+), 21 deletions(-) diff --git a/src/components/Offers/ModalAcceptCollectionOffer.tsx b/src/components/Offers/ModalAcceptCollectionOffer.tsx index 21e27dde2..a8d228cea 100644 --- a/src/components/Offers/ModalAcceptCollectionOffer.tsx +++ b/src/components/Offers/ModalAcceptCollectionOffer.tsx @@ -80,12 +80,12 @@ const _ModalAcceptCollectionOffer = ({
{gentk.name} - + You paid{" "} {" "} for this gentk diff --git a/src/components/Tables/TableOffersReceived.tsx b/src/components/Tables/TableOffersReceived.tsx index 8e5c9d72c..5ce6cd49d 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,6 +29,35 @@ interface RowProps { offer: AnyOffer } +const PricePaidInfo = () => { + const { hoverElement, showTooltip, handleEnter, handleLeave } = + useAriaTooltip() + + return ( +
+ + + {showTooltip && ( + + hello + + )} +
+ ) +} + const Row = ({ buttons, feedback, offer }: RowProps) => { const renderPreview = () => { if (offerTypeGuard(offer)) @@ -46,15 +76,14 @@ const Row = ({ buttons, feedback, offer }: RowProps) => { ) } - const getMinLastSoldPrice = () => { - if (offerTypeGuard(offer)) - return offer.objkt.lastSoldPrice || offer.objkt.mintedPrice! - return offer.token.heldGentks!.reduce((acc, item) => { - const price = item.lastSoldPrice || item.mintedPrice! - if (acc === null) return price - return Math.min(acc, price) - }, null as number | null) as number - } + const pricePaid = offerTypeGuard(offer) + ? offer.objkt.lastSoldPrice! + : offer.token.minLastSoldPrice! + + // if not whole number, round to 2 decimal places: + const pricePaidPercentageDifference = ((offer.price / pricePaid) * 100) + .toFixed(2) + .replace(/[.,]00$/, "") return ( <> @@ -78,12 +107,18 @@ const Row = ({ buttons, feedback, offer }: RowProps) => { /> + {!offerTypeGuard(offer) && ( + + ≥{" "} + + )} + (+{pricePaidPercentageDifference}%) Date: Fri, 21 Apr 2023 14:59:00 +0100 Subject: [PATCH 3/9] adjust label style in TokenImageAndName component --- src/components/Objkt/ObjktImageAndName.module.scss | 11 ++++------- src/components/Objkt/ObjktImageAndName.tsx | 9 +++++---- 2 files changed, 9 insertions(+), 11 deletions(-) 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" /> ) From 8506d4b06d4a6cd9babc0560d0ad600d604c2af8 Mon Sep 17 00:00:00 2001 From: louis Date: Fri, 21 Apr 2023 14:59:13 +0100 Subject: [PATCH 4/9] add shorten behaviour to DateDistance --- src/components/Utils/Date/DateDistance.tsx | 38 ++++++++++++++++++++-- 1 file changed, 35 insertions(+), 3 deletions(-) diff --git a/src/components/Utils/Date/DateDistance.tsx b/src/components/Utils/Date/DateDistance.tsx index bd8d9fdb2..9756c33d3 100644 --- a/src/components/Utils/Date/DateDistance.tsx +++ b/src/components/Utils/Date/DateDistance.tsx @@ -1,11 +1,38 @@ -import { format, formatDistance } from "date-fns" import { useMemo } from "react" +import { format, formatDistance } from "date-fns" interface Props { timestamptz: string | Date append?: boolean + shorten?: boolean +} + +const abbreviate = (str: string) => { + 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} } From a3c9c3156a236aa61d1917601ae0c710579cdb34 Mon Sep 17 00:00:00 2001 From: louis Date: Fri, 21 Apr 2023 14:59:19 +0100 Subject: [PATCH 5/9] reduce user address truncation --- src/components/User/UserBadge.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 && ( Date: Fri, 21 Apr 2023 14:59:38 +0100 Subject: [PATCH 6/9] label collection offers in TableOffersSent --- src/components/Tables/TableOffersSent.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Tables/TableOffersSent.tsx b/src/components/Tables/TableOffersSent.tsx index 4d918013b..ee320ad0e 100644 --- a/src/components/Tables/TableOffersSent.tsx +++ b/src/components/Tables/TableOffersSent.tsx @@ -41,8 +41,8 @@ const Row = ({ buttons, feedback, offer }: RowProps) => { 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) => {
- +
Date: Fri, 21 Apr 2023 14:59:50 +0100 Subject: [PATCH 7/9] remove Gentk label in TableUserSales --- src/components/Tables/TableUserSales.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Tables/TableUserSales.tsx b/src/components/Tables/TableUserSales.tsx index 014e3c520..c04495899 100644 --- a/src/components/Tables/TableUserSales.tsx +++ b/src/components/Tables/TableUserSales.tsx @@ -54,7 +54,7 @@ const _TableUserSales = ({ > {sale.objkt && (
- +
)} From 64711d95b91dad6bc7b3b07cb5e11496ebd4b1dd Mon Sep 17 00:00:00 2001 From: louis Date: Fri, 21 Apr 2023 14:59:57 +0100 Subject: [PATCH 8/9] shorten action timestamps --- src/components/Activity/Action.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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" > - + ) From bdb2a6f17e974a4c86f43b9ce869e4a62643056b Mon Sep 17 00:00:00 2001 From: louis Date: Fri, 21 Apr 2023 15:00:09 +0100 Subject: [PATCH 9/9] update user table styles --- src/components/Tables/TableOffersReceived.tsx | 16 ++++++---------- src/components/Tables/TableUser.module.scss | 9 +-------- 2 files changed, 7 insertions(+), 18 deletions(-) diff --git a/src/components/Tables/TableOffersReceived.tsx b/src/components/Tables/TableOffersReceived.tsx index 5ce6cd49d..3ab34e89e 100644 --- a/src/components/Tables/TableOffersReceived.tsx +++ b/src/components/Tables/TableOffersReceived.tsx @@ -59,8 +59,10 @@ const PricePaidInfo = () => { } const Row = ({ buttons, feedback, offer }: RowProps) => { + const isIndividualOffer = offerTypeGuard(offer) + const renderPreview = () => { - if (offerTypeGuard(offer)) + if (isIndividualOffer) return ( offer.objkt && (
@@ -76,15 +78,10 @@ const Row = ({ buttons, feedback, offer }: RowProps) => { ) } - const pricePaid = offerTypeGuard(offer) + const pricePaid = isIndividualOffer ? offer.objkt.lastSoldPrice! : offer.token.minLastSoldPrice! - // if not whole number, round to 2 decimal places: - const pricePaidPercentageDifference = ((offer.price / pricePaid) * 100) - .toFixed(2) - .replace(/[.,]00$/, "") - return ( <> {feedback && ( @@ -118,7 +115,6 @@ const Row = ({ buttons, feedback, offer }: RowProps) => { mutez={pricePaid} tezosSize="regular" /> - (+{pricePaidPercentageDifference}%) {
- +
Token Price Price paid - Floor Difference + Floor diff From Time Action diff --git a/src/components/Tables/TableUser.module.scss b/src/components/Tables/TableUser.module.scss index 6b15861bc..4229337c4 100644 --- a/src/components/Tables/TableUser.module.scss +++ b/src/components/Tables/TableUser.module.scss @@ -17,7 +17,7 @@ overflow-x: auto; min-width: 940px; width: 100%; - table-layout: fixed; + table-layout: auto; border-collapse: separate; font-size: var(--font-size-small); border-spacing: 0; @@ -83,27 +83,21 @@ td.td-right { } .th-gentk { - width: 100%; } .th-user { - width: 180px; } .th-price { - width: 120px; } .th-price_paid { - width: 120px; } .th-floor { - width: 160px; } .th-action { - width: 80px; } .th-editions { @@ -119,7 +113,6 @@ td.td-right { } .th-time { - width: 180px; } .th-date {