From 4ccd989418c477fb61bcb291b4a92e8e048bbb7a Mon Sep 17 00:00:00 2001
From: Jeff <jeff@chia.net>
Date: Fri, 26 Aug 2022 16:31:30 -0700
Subject: [PATCH] Fix tooltip in CAT offer rows #950 (#956) (#972)

(cherry picked from commit 3c1bf4fa5320afe63d344a8e7040c564d99081f8)
---
 .../src/components/offers/OfferSummary.tsx    |  5 +-
 .../src/components/offers/OfferSummaryRow.tsx | 78 -------------------
 2 files changed, 3 insertions(+), 80 deletions(-)

diff --git a/packages/gui/src/components/offers/OfferSummary.tsx b/packages/gui/src/components/offers/OfferSummary.tsx
index cd9a2d460b..082ccb69ec 100644
--- a/packages/gui/src/components/offers/OfferSummary.tsx
+++ b/packages/gui/src/components/offers/OfferSummary.tsx
@@ -14,7 +14,7 @@ import { useTheme } from '@mui/material/styles';
 import styled from 'styled-components';
 import useAssetIdName from '../../hooks/useAssetIdName';
 import OfferExchangeRate from './OfferExchangeRate';
-import OfferSummaryRow from './OfferSummaryRow';
+import { OfferSummaryTokenRow } from './OfferSummaryRow';
 
 const StyledWarningText = styled(Typography)`
   color: ${StateColor.WARNING};
@@ -134,7 +134,8 @@ export default function OfferSummary(props: Props) {
             <Flex flexDirection="column" gap={1}>
               <Flex flexDirection="column" gap={1}>
                 {entries.map(([assetId, amount], index) => (
-                  <OfferSummaryRow
+                  <OfferSummaryTokenRow
+                    key={index}
                     assetId={assetId}
                     amount={amount as number}
                     rowNumber={index + 1}
diff --git a/packages/gui/src/components/offers/OfferSummaryRow.tsx b/packages/gui/src/components/offers/OfferSummaryRow.tsx
index f21feb8bac..6f1648c2e6 100644
--- a/packages/gui/src/components/offers/OfferSummaryRow.tsx
+++ b/packages/gui/src/components/offers/OfferSummaryRow.tsx
@@ -249,81 +249,3 @@ export function OfferSummaryTokenRow(
     </Flex>
   );
 }
-
-/* ========================================================================== */
-
-type Props = {
-  assetId: string;
-  amount: number;
-  rowNumber?: number;
-};
-
-export default function OfferSummaryRow(props: Props) {
-  const { assetId, amount, rowNumber } = props;
-  const { lookupByAssetId } = useAssetIdName();
-  const assetIdInfo = lookupByAssetId(assetId);
-  const displayAmount = assetIdInfo
-    ? formatAmountForWalletType(amount as number, assetIdInfo.walletType)
-    : mojoToCATLocaleString(amount);
-  const displayName = assetIdInfo?.displayName ?? t`Unknown CAT`;
-  const showMojoAmount =
-    assetIdInfo?.walletType === WalletType.STANDARD_WALLET &&
-    shouldShowMojoAmount(amount);
-
-  return (
-    <Flex flexDirections="row" alignItems="center" gap={1}>
-      <Typography variant="body1">
-        <Flex flexDirection="row" alignItems="center" gap={1}>
-          {rowNumber !== undefined && (
-            <Typography
-              variant="body1"
-              color="secondary"
-              style={{ fontWeight: 'bold' }}
-            >{`${rowNumber})`}</Typography>
-          )}
-          <Typography>
-            {displayAmount} {displayName}
-          </Typography>
-        </Flex>
-      </Typography>
-      {showMojoAmount && (
-        <Typography variant="body1" color="textSecondary">
-          <OfferMojoAmount mojos={amount} />
-        </Typography>
-      )}
-      <TooltipIcon interactive>
-        <Flex flexDirection="column" gap={1}>
-          <Flex flexDirection="column" gap={0}>
-            <Flex>
-              <Box flexGrow={1}>
-                <StyledTitle>Name</StyledTitle>
-              </Box>
-              {assetIdInfo?.walletType === WalletType.CAT && (
-                <Link
-                  href={`https://www.taildatabase.com/tail/${assetId.toLowerCase()}`}
-                  target="_blank"
-                >
-                  <Trans>Search on Tail Database</Trans>
-                </Link>
-              )}
-            </Flex>
-
-            <StyledValue>{assetIdInfo?.name}</StyledValue>
-          </Flex>
-          {assetIdInfo?.walletType === WalletType.CAT && (
-            <Flex flexDirection="column" gap={0}>
-              <StyledTitle>Asset ID</StyledTitle>
-              <Flex alignItems="center" gap={1}>
-                <StyledValue>{assetId.toLowerCase()}</StyledValue>
-                <CopyToClipboard
-                  value={assetId.toLowerCase()}
-                  fontSize="small"
-                />
-              </Flex>
-            </Flex>
-          )}
-        </Flex>
-      </TooltipIcon>
-    </Flex>
-  );
-}