Skip to content

Commit

Permalink
Fix tooltip in CAT offer rows #950 (#956) (#972)
Browse files Browse the repository at this point in the history
(cherry picked from commit 3c1bf4f)
  • Loading branch information
paninaro authored Aug 26, 2022
1 parent e44fa0e commit 4ccd989
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 80 deletions.
5 changes: 3 additions & 2 deletions packages/gui/src/components/offers/OfferSummary.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand Down Expand Up @@ -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}
Expand Down
78 changes: 0 additions & 78 deletions packages/gui/src/components/offers/OfferSummaryRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}

0 comments on commit 4ccd989

Please sign in to comment.