add price paid to user offers

src/components/Activity/Action.tsx

@@ -23,7 +23,7 @@ export const ActionReference = ({
       target="_blank"
       rel="noreferrer"
     >
-      <DateDistance timestamptz={action.createdAt} />
+      <DateDistance timestamptz={action.createdAt} shorten />
       <i aria-hidden className="fas fa-external-link-square" />
     </a>
   )

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);
   }

src/components/Objkt/ObjktImageAndName.tsx

@@ -33,7 +33,7 @@ const _TokenImageAndName = ({
         />
       </div>
       <span className={style.container_name}>
-        <span className={style.label}>{label}</span>
+        <span className={style.label}>{label.toLocaleUpperCase()}</span>
         <span className={style.name}>{name}</span>
       </span>
     </a>
@@ -50,14 +50,15 @@ interface ObjktImageAndNameProps {
 const _ObjtkImageAndName = ({
   objkt,
   shortName,
+  label = "Gentk",
   size = 40,
 }: ObjktImageAndNameProps) => {
   return (
     <TokenImageAndName
       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"
   />
 )
 

src/components/Offers/ModalAcceptCollectionOffer.tsx

@@ -147,6 +147,16 @@ const _ModalAcceptCollectionOffer = ({
                 </div>
                 <span className={style.container_name}>
                   <span className={style.name}>{gentk.name}</span>
+                  <span style={{ fontSize: 14 }}>
+                    You paid{" "}
+                    <DisplayTezos
+                      className={style.price}
+                      formatBig={false}
+                      mutez={gentk.lastSoldPrice!}
+                      tezosSize="regular"
+                    />{" "}
+                    for this gentk
+                  </span>
                 </span>
               </div>
               <Link href={`/gentk/${gentk.id}`} passHref>

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,17 +19,50 @@ 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
   feedback?: React.ReactNode
   offer: AnyOffer
 }
 
+const PricePaidInfo = () => {
+  const { hoverElement, showTooltip, handleEnter, handleLeave } =
+    useAriaTooltip()
+
+  return (
+    <div onMouseEnter={handleEnter} onMouseLeave={handleLeave}>
+      <FontAwesomeIcon
+        className={style.warningIcon}
+        ref={hoverElement}
+        tabIndex={0}
+        onFocus={handleEnter}
+        onBlur={handleLeave}
+        icon={faInfoCircle}
+      />
+
+      {showTooltip && (
+        <span
+          className={style.tooltip}
+          role="tooltip"
+          aria-hidden={!showTooltip}
+          aria-live="polite"
+        >
+          hello
+        </span>
+      )}
+    </div>
+  )
+}
+
 const Row = ({ buttons, feedback, offer }: RowProps) => {
+  const isIndividualOffer = offerTypeGuard(offer)
+
   const renderPreview = () => {
-    if (offerTypeGuard(offer))
+    if (isIndividualOffer)
       return (
         offer.objkt && (
           <div className={cs(style.link_wrapper)}>
@@ -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"
           />
         </td>
+        <td className={style["td-price"]} data-label="Price paid">
+          {!offerTypeGuard(offer) && (
+            <span className={style.price_paid} style={{ fontSize: 14 }}>
+              ≥{" "}
+            </span>
+          )}
+          <DisplayTezos
+            className={style.price_paid}
+            formatBig={false}
+            mutez={pricePaid}
+            tezosSize="regular"
+          />
+        </td>
         <td className={style["td-price"]} data-label="Floor Difference">
           <div>
             <FloorDifference
@@ -89,7 +138,7 @@ const Row = ({ buttons, feedback, offer }: RowProps) => {
         </td>
         <td className={style["td-time"]} data-label="Time">
           <div className={style.date}>
-            <DateDistance timestamptz={offer.createdAt} />
+            <DateDistance timestamptz={offer.createdAt} shorten />
           </div>
         </td>
         <td
@@ -145,7 +194,8 @@ const _TableUserOffersReceived = ({
             <tr>
               <th className={style["th-gentk"]}>Token</th>
               <th className={style["th-price"]}>Price</th>
-              <th className={style["th-floor"]}>Floor Difference</th>
+              <th className={style["th-price_paid"]}>Price paid</th>
+              <th className={style["th-floor"]}>Floor diff</th>
               <th className={style["th-user"]}>From</th>
               <th className={style["th-time"]}>Time</th>
               <th className={style["th-action"]}>Action</th>
@@ -186,6 +236,9 @@ const _TableUserOffersReceived = ({
                   <td className={style["td-user"]} data-label="Price">
                     <Skeleton height="25px" />
                   </td>
+                  <td className={style["td-user"]} data-label="Price paid">
+                    <Skeleton height="25px" />
+                  </td>
                   <td
                     className={style["td-user"]}
                     data-label="Floor Difference"

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) => {
         </td>
         <td className={style["td-time"]} data-label="Time">
           <div className={style.date}>
-            <DateDistance timestamptz={offer.createdAt} />
+            <DateDistance timestamptz={offer.createdAt} shorten />
           </div>
         </td>
         <td

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,23 +83,21 @@ td.td-right {
 }
 
 .th-gentk {
-  width: 100%;
 }
 
 .th-user {
-  width: 180px;
 }
 
 .th-price {
-  width: 120px;
+}
+
+.th-price_paid {
 }
 
 .th-floor {
-  width: 160px;
 }
 
 .th-action {
-  width: 180px;
 }
 
 .th-editions {
@@ -115,7 +113,6 @@ td.td-right {
 }
 
 .th-time {
-  width: 180px;
 }
 
 .th-date {
@@ -167,6 +164,10 @@ td.td-right {
   word-break: break-all;
 }
 
+.price_paid {
+  color: var(--color-secondary);
+}
+
 .date {
   font-size: var(--font-size-vsmall);
   color: var(--color-gray);

src/components/Tables/TableUserSales.tsx

@@ -54,7 +54,7 @@ const _TableUserSales = ({
                     >
                       {sale.objkt && (
                         <div className={cs(style.link_wrapper)}>
-                          <ObjktImageAndName objkt={sale.objkt} />
+                          <ObjktImageAndName objkt={sale.objkt} label="" />
                         </div>
                       )}
                     </td>

src/components/User/UserBadge.tsx

@@ -139,7 +139,7 @@ export function UserBadge({
                 [style.donation]: isDonator(userAlias),
               })}
             >
-              {getUserName(userAlias, 15)}
+              {getUserName(userAlias, 8)}
             </span>
             {verified && (
               <i

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 <span title={data.title}>{data.dist}</span>
+
+  const dist = useMemo(() => {
+    return shorten ? abbreviate(data.dist) : data.dist
+  }, [data.dist, shorten])
+
+  return <span title={data.title}>{dist}</span>
 }

src/queries/fragments/collection-offer.ts

@@ -23,6 +23,7 @@ export const Frag_UserCollectionOffer = gql`
       captureMedia {
         ...MediaImage
       }
+      minLastSoldPrice(userId: $id)
     }
   }
 `

src/queries/fragments/offer.ts

@@ -17,6 +17,8 @@ export const Frag_UserOffer = gql`
       version
       name
       metadata
+      lastSoldPrice
+      mintedPrice
       captureMedia {
         ...MediaImage
       }

src/queries/user.ts

@@ -456,6 +456,7 @@ export const Qu_userAcceptCollectionOffer = gql`
             floor
           }
         }
+        lastSoldPrice
         activeListing {
           id
           version

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 {