Merge pull request #270 from reservoirprotocol/ted/grwth-2926-display…

…-net-amount-for-offers-in-offers-table Display net amount for offers in tooltip
reservoirprotocol · Jul 17, 2023 · 190ac7c · 190ac7c · vercel · Jul 17, 2023
2 parents 467cd93 + 6762850
commit 190ac7c
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 27 deletions.
diff --git a/components/portfolio/OffersTable.tsx b/components/portfolio/OffersTable.tsx
@@ -194,12 +194,33 @@ const OfferTableRow: FC<OfferTableRowProps> = ({ offer, isOwner, mutate }) => {
               </Flex>
             </Flex>
           </Link>
-          <FormatCryptoCurrency
-            amount={offer?.price?.amount?.decimal}
-            address={offer?.price?.currency?.contract}
-            textStyle="subtitle2"
-            logoHeight={14}
-          />
+          <Tooltip
+            side="left"
+            sideOffset="1"
+            open={offer?.price?.netAmount?.decimal ? undefined : false}
+            content={
+              <Flex justify="between" css={{ gap: '$2' }}>
+                <Text style="body3">Net Amount</Text>
+                <FormatCryptoCurrency
+                  amount={offer?.price?.netAmount?.decimal}
+                  address={offer?.price?.currency?.contract}
+                  decimals={offer?.price?.currency?.decimals}
+                  textStyle="subtitle3"
+                  logoHeight={14}
+                />
+              </Flex>
+            }
+          >
+            <Flex>
+              <FormatCryptoCurrency
+                amount={offer?.price?.amount?.decimal}
+                address={offer?.price?.currency?.contract}
+                decimals={offer?.price?.currency?.decimals}
+                textStyle="subtitle2"
+                logoHeight={14}
+              />
+            </Flex>
+          </Tooltip>
         </Flex>
         <Flex justify="between" align="center" css={{ width: '100%' }}>
           <a href={`https://${offer?.source?.domain}`} target="_blank">
@@ -313,12 +334,33 @@ const OfferTableRow: FC<OfferTableRowProps> = ({ offer, isOwner, mutate }) => {
         </Link>
       </TableCell>
       <TableCell>
-        <FormatCryptoCurrency
-          amount={offer?.price?.amount?.decimal}
-          address={offer?.price?.currency?.contract}
-          textStyle="subtitle2"
-          logoHeight={14}
-        />
+        <Tooltip
+          side="left"
+          sideOffset="1"
+          open={offer?.price?.netAmount?.decimal ? undefined : false}
+          content={
+            <Flex justify="between" css={{ gap: '$2' }}>
+              <Text style="body3">Net Amount</Text>
+              <FormatCryptoCurrency
+                amount={offer?.price?.netAmount?.decimal}
+                address={offer?.price?.currency?.contract}
+                decimals={offer?.price?.currency?.decimals}
+                textStyle="subtitle3"
+                logoHeight={14}
+              />
+            </Flex>
+          }
+        >
+          <Flex>
+            <FormatCryptoCurrency
+              amount={offer?.price?.amount?.decimal}
+              address={offer?.price?.currency?.contract}
+              decimals={offer?.price?.currency?.decimals}
+              textStyle="subtitle1"
+              logoHeight={14}
+            />
+          </Flex>
+        </Tooltip>
       </TableCell>
       <TableCell>
         <Text style="subtitle2">{expiration}</Text>

diff --git a/components/token/OffersTable.tsx b/components/token/OffersTable.tsx
@@ -178,12 +178,32 @@ const OfferTableRow: FC<OfferTableRowProps> = ({
         css={{ height: '100%', gap: '$1' }}
       >
         <Flex align="center" css={{ gap: '$1', height: 36 }}>
-          <FormatCryptoCurrency
-            amount={offer.price?.amount?.decimal}
-            address={offer.price?.currency?.contract}
-            logoHeight={16}
-            textStyle="h6"
-          />
+          <Tooltip
+            side="top"
+            open={offer?.price?.netAmount?.decimal ? undefined : false}
+            content={
+              <Flex justify="between" css={{ gap: '$2' }}>
+                <Text style="body3">Net Amount</Text>
+                <FormatCryptoCurrency
+                  amount={offer?.price?.netAmount?.decimal}
+                  address={offer?.price?.currency?.contract}
+                  decimals={offer?.price?.currency?.decimals}
+                  textStyle="subtitle3"
+                  logoHeight={14}
+                />
+              </Flex>
+            }
+          >
+            <Flex>
+              <FormatCryptoCurrency
+                amount={offer?.price?.amount?.decimal}
+                address={offer?.price?.currency?.contract}
+                decimals={offer?.price?.currency?.decimals}
+                textStyle="h6"
+                logoHeight={16}
+              />
+            </Flex>
+          </Tooltip>
           {offer.price?.amount?.usd ? (
             <Text style="body2" css={{ color: '$gray11' }} ellipsify>
               {formatDollar(offer.price?.amount?.usd)}

diff --git a/components/token/PriceData.tsx b/components/token/PriceData.tsx
@@ -1,5 +1,10 @@
 import { useTokens } from '@reservoir0x/reservoir-kit-ui'
-import { Flex, FormatCryptoCurrency, Text } from 'components/primitives'
+import {
+  Flex,
+  FormatCryptoCurrency,
+  Text,
+  Tooltip,
+} from 'components/primitives'
 import { useMarketplaceChain } from 'hooks'
 import { FC } from 'react'
 import { formatDollar } from 'utils/numbers'
@@ -98,14 +103,37 @@ export const PriceData: FC<Props> = ({ token }) => {
             '@bp400': { flexDirection: 'row', gap: '$2' },
           }}
         >
-          <FormatCryptoCurrency
-            amount={token?.market?.topBid?.price?.amount?.decimal}
-            address={token?.market?.topBid?.price?.currency?.contract}
-            decimals={token?.market?.topBid?.price?.currency?.decimals}
-            textStyle="h4"
-            logoHeight={20}
-            maximumFractionDigits={4}
-          />
+          <Tooltip
+            side="top"
+            open={
+              token?.market?.topBid?.price?.netAmount?.decimal
+                ? undefined
+                : false
+            }
+            content={
+              <Flex justify="between" css={{ gap: '$2' }}>
+                <Text style="body3">Net Amount</Text>
+                <FormatCryptoCurrency
+                  amount={token?.market?.topBid?.price?.netAmount?.decimal}
+                  address={token?.market?.topBid?.price?.currency?.contract}
+                  decimals={token?.market?.topBid?.price?.currency?.decimals}
+                  textStyle="subtitle3"
+                  logoHeight={14}
+                />
+              </Flex>
+            }
+          >
+            <Flex>
+              <FormatCryptoCurrency
+                amount={token?.market?.topBid?.price?.amount?.decimal}
+                address={token?.market?.topBid?.price?.currency?.contract}
+                decimals={token?.market?.topBid?.price?.currency?.decimals}
+                textStyle="h4"
+                logoHeight={20}
+              />
+            </Flex>
+          </Tooltip>
+
           {token?.market?.topBid?.price?.amount?.usd ? (
             <Text style="body3" css={{ color: '$gray11' }} ellipsify>
               {formatDollar(token?.market?.topBid?.price?.amount?.usd)}