From f9a9469523480861312e61f315d2cdb6a7ae5590 Mon Sep 17 00:00:00 2001 From: Charles Bachmeier Date: Thu, 2 Nov 2023 08:32:58 -0700 Subject: [PATCH] feat: [info] Add token description to TDP (#7504) * update token description for TDP * add tooltip to fee * show buy/sell fees * remove token description from PDP * remove unused styles * update snapshots * undo fee component testing * isInfoTDPEnabled * update explorer fn --- .../Tokens/TokenDetails/Skeleton.tsx | 4 +- .../TokenDetails/TokenDescription.test.tsx | 16 +- .../Tokens/TokenDetails/TokenDescription.tsx | 88 ++- .../TokenDescription.test.tsx.snap | 730 +++--------------- src/components/Tokens/TokenDetails/index.tsx | 11 +- src/components/swap/SwapLineItem.tsx | 2 +- .../__snapshots__/index.test.tsx.snap | 305 -------- src/pages/PoolDetails/index.tsx | 36 +- src/utils/getExplorerLink.ts | 1 + 9 files changed, 196 insertions(+), 997 deletions(-) diff --git a/src/components/Tokens/TokenDetails/Skeleton.tsx b/src/components/Tokens/TokenDetails/Skeleton.tsx index 2d1b636480..160cf36a0d 100644 --- a/src/components/Tokens/TokenDetails/Skeleton.tsx +++ b/src/components/Tokens/TokenDetails/Skeleton.tsx @@ -41,10 +41,10 @@ export const LeftPanel = styled.div` max-width: 780px; overflow: hidden; ` -export const RightPanel = styled.div` +export const RightPanel = styled.div<{ isInfoTDPEnabled?: boolean }>` display: none; flex-direction: column; - gap: 20px; + gap: ${({ isInfoTDPEnabled }) => (isInfoTDPEnabled ? 40 : 20)}px; width: ${SWAP_COMPONENT_WIDTH}px; @media screen and (min-width: ${({ theme }) => theme.breakpoint.lg}px) { diff --git a/src/components/Tokens/TokenDetails/TokenDescription.test.tsx b/src/components/Tokens/TokenDetails/TokenDescription.test.tsx index c858e533d7..7c6acd7417 100644 --- a/src/components/Tokens/TokenDetails/TokenDescription.test.tsx +++ b/src/components/Tokens/TokenDetails/TokenDescription.test.tsx @@ -34,11 +34,10 @@ describe('TokenDescription', () => { }) it('renders token information correctly with defaults', () => { - const { asFragment } = render() + const { asFragment } = render() expect(asFragment()).toMatchSnapshot() - expect(screen.getByText('USDC')).toBeVisible() - expect(screen.getByText('USDCoin')).toBeVisible() + expect(screen.getByText('Info')).toBeVisible() expect(screen.getByText('Website')).toBeVisible() expect(screen.getByText('Twitter')).toBeVisible() expect(screen.getByText('Etherscan')).toBeVisible() @@ -46,7 +45,7 @@ describe('TokenDescription', () => { }) it('truncates description and shows more', async () => { - const { asFragment } = render() + const { asFragment } = render() expect(asFragment()).toMatchSnapshot() const truncatedDescription = screen.getByTestId('token-description-truncated') @@ -61,19 +60,12 @@ describe('TokenDescription', () => { expect(screen.getByText('Hide')).toBeVisible() }) - it('copy address button hidden when flagged', async () => { - const { asFragment } = render() - expect(asFragment()).toMatchSnapshot() - - expect(screen.queryByText('0xA0b8...eB48')).toBeNull() - }) - it('no description or social buttons shown when not available', async () => { mocked(useTokenProjectQuery).mockReturnValue({ data: undefined } as unknown as QueryResult< TokenProjectQuery, Exact<{ chain: Chain; address?: string }> >) - const { asFragment } = render() + const { asFragment } = render() expect(asFragment()).toMatchSnapshot() expect(screen.getByText('No token information available')).toBeVisible() diff --git a/src/components/Tokens/TokenDetails/TokenDescription.tsx b/src/components/Tokens/TokenDetails/TokenDescription.tsx index 362ccf8830..abed91b523 100644 --- a/src/components/Tokens/TokenDetails/TokenDescription.tsx +++ b/src/components/Tokens/TokenDetails/TokenDescription.tsx @@ -4,14 +4,14 @@ import Column from 'components/Column' import { EtherscanLogo } from 'components/Icons/Etherscan' import { Globe } from 'components/Icons/Globe' import { TwitterXLogo } from 'components/Icons/TwitterX' -import CurrencyLogo from 'components/Logo/CurrencyLogo' import Row from 'components/Row' +import { FOTTooltipContent } from 'components/swap/SwapLineItem' import { NoInfoAvailable, truncateDescription, TruncateDescriptionButton } from 'components/Tokens/TokenDetails/shared' +import { MouseoverTooltip, TooltipSize } from 'components/Tooltip' import { useTokenProjectQuery } from 'graphql/data/__generated__/types-and-hooks' import { chainIdToBackendName } from 'graphql/data/util' -import { useCurrency } from 'hooks/Tokens' -import { useColor } from 'hooks/useColor' import useCopyClipboard from 'hooks/useCopyClipboard' +import { useSwapTaxes } from 'hooks/useSwapTaxes' import { useCallback, useReducer } from 'react' import { Copy } from 'react-feather' import styled, { useTheme } from 'styled-components' @@ -19,10 +19,12 @@ import { BREAKPOINTS } from 'theme' import { ClickableStyle, EllipsisStyle, ExternalLink, ThemedText } from 'theme/components' import { opacify } from 'theme/utils' import { shortenAddress } from 'utils' +import { useFormatter } from 'utils/formatNumbers' import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink' +import { getNativeTokenDBAddress } from 'utils/nativeTokens' const TokenInfoSection = styled(Column)` - gap: 12px; + gap: 16px; width: 100%; @media (max-width: ${BREAKPOINTS.lg - 1}px) and (min-width: ${BREAKPOINTS.sm}px) { @@ -35,10 +37,6 @@ const TokenNameRow = styled(Row)` width: 100%; ` -const TokenName = styled(ThemedText.BodyPrimary)` - ${EllipsisStyle} -` - const TokenButtonRow = styled(TokenNameRow)` flex-wrap: wrap; ` @@ -73,25 +71,30 @@ const TRUNCATE_CHARACTER_COUNT = 75 export function TokenDescription({ tokenAddress, chainId = ChainId.MAINNET, - showCopy = false, + isNative = false, + characterCount = TRUNCATE_CHARACTER_COUNT, }: { tokenAddress: string chainId?: number - showCopy?: boolean + isNative?: boolean + characterCount?: number }) { - const currency = useCurrency(tokenAddress, chainId) - const theme = useTheme() - const color = useColor(currency?.wrapped, theme.surface1, theme.darkMode) + const color = useTheme().neutral1 + const chainName = chainIdToBackendName(chainId) const { data: tokenQuery } = useTokenProjectQuery({ variables: { - address: tokenAddress, - chain: chainIdToBackendName(chainId), + address: isNative ? getNativeTokenDBAddress(chainName) : tokenAddress, + chain: chainName, }, errorPolicy: 'all', }) const tokenProject = tokenQuery?.token?.project const description = tokenProject?.description - const explorerUrl = getExplorerLink(chainId, tokenAddress, ExplorerDataType.TOKEN) + const explorerUrl = getExplorerLink( + chainId, + tokenAddress, + isNative ? ExplorerDataType.NATIVE : ExplorerDataType.TOKEN + ) const [, setCopied] = useCopyClipboard() const copy = useCallback(() => { @@ -99,19 +102,25 @@ export function TokenDescription({ }, [tokenAddress, setCopied]) const [isDescriptionTruncated, toggleIsDescriptionTruncated] = useReducer((x) => !x, true) - const truncatedDescription = truncateDescription(description ?? '', TRUNCATE_CHARACTER_COUNT) - const shouldTruncate = !!description && description.length > TRUNCATE_CHARACTER_COUNT + const truncatedDescription = truncateDescription(description ?? '', characterCount) + const shouldTruncate = !!description && description.length > characterCount const showTruncatedDescription = shouldTruncate && isDescriptionTruncated + const { inputTax: sellFee, outputTax: buyFee } = useSwapTaxes(tokenAddress, tokenAddress) + const { formatPercent } = useFormatter() + const { sellFeeString, buyFeeString } = { + sellFeeString: formatPercent(sellFee), + buyFeeString: formatPercent(buyFee), + } + const hasFee = Boolean(parseFloat(sellFeeString)) || Boolean(parseFloat(buyFee.toFixed(2))) + const sameFee = sellFeeString === buyFeeString return ( - - - {currency?.name} - {currency?.symbol} - + + Info + - {showCopy && ( + {!isNative && ( {shortenAddress(tokenAddress)} @@ -165,6 +174,37 @@ export function TokenDescription({ )} + {hasFee && ( + + + + } + > + + {sameFee ? ( + + {tokenQuery?.token?.symbol}  + fee: {sellFeeString} + + ) : ( + <> + + {tokenQuery?.token?.symbol}  + buy fee: {buyFeeString} + {' '} + + {tokenQuery?.token?.symbol}  + sell fee: {sellFeeString} + {' '} + + )} + + + )} ) } diff --git a/src/components/Tokens/TokenDetails/__snapshots__/TokenDescription.test.tsx.snap b/src/components/Tokens/TokenDetails/__snapshots__/TokenDescription.test.tsx.snap index 23fa729308..e3540494a2 100644 --- a/src/components/Tokens/TokenDetails/__snapshots__/TokenDescription.test.tsx.snap +++ b/src/components/Tokens/TokenDetails/__snapshots__/TokenDescription.test.tsx.snap @@ -1,334 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`TokenDescription copy address button hidden when flagged 1`] = ` - - .c2 { - box-sizing: border-box; - margin: 0; - min-width: 0; -} - -.c3 { - width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - padding: 0; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; -} - -.c7 { - color: #222222; -} - -.c9 { - color: #7D7D7D; -} - -.c11 { - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - -webkit-transition-duration: 125ms; - transition-duration: 125ms; - color: #FC72FF; - stroke: #FC72FF; - font-weight: 500; -} - -.c11:hover { - opacity: 0.6; -} - -.c11:active { - opacity: 0.4; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; -} - -.c6 { - --size: 20px; - border-radius: 100px; - color: #222222; - background-color: #22222212; - font-size: calc(var(--size) / 3); - font-weight: 535; - height: 20px; - line-height: 20px; - text-align: center; - width: 20px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c5 { - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c16 { - color: #7D7D7D; - font-weight: 485; - font-size: 0.85em; - padding-top: 0.5em; -} - -.c16:hover, -.c16:focus { - color: #636363; - cursor: pointer; -} - -.c1 { - gap: 12px; - width: 100%; -} - -.c4 { - gap: 8px; - width: 100%; -} - -.c8 { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.c10 { - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} - -.c12 { - gap: 8px; - padding: 8px 12px; - border-radius: 20px; - color: #FC72FF; - background-color: #FC72FF1f; - font-size: 14px; - font-weight: 535; - line-height: 16px; - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - -webkit-transition-duration: 125ms; - transition-duration: 125ms; -} - -.c12:hover { - opacity: 0.6; -} - -.c12:active { - opacity: 0.4; -} - -.c13 { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - line-height: 24px; - white-space: pre-wrap; -} - -.c14 { - display: none; -} - -.c15 { - display: inline; -} - -@media (max-width:1023px) and (min-width:640px) { - .c1 { - max-width: 45%; - } -} - -
-
-
-
- USD -
-
-
- USDCoin -
-
- USDC -
-
-
- -
- - - - - Etherscan -
- - -
- - - - Website -
- - -
- - - - Twitter -
- -
-
- - USDC is a fully collateralized US dollar stablecoin. USDC is the bridge between dollars and trading on cryptocurrency exchanges. The technology behind CENTRE makes it possible to exchange value between people, businesses and financial institutions just like email between mail services and texts between SMS providers. We believe by removing artificial economic borders, we can create a more inclusive global economy. - - - USDC is a fully collateralized US dollar stablecoin. USDC is the bridge... - -
- Show more -
-
-
- -`; - exports[`TokenDescription no description or social buttons shown when not available 1`] = ` - .c2 { + .c3 { box-sizing: border-box; margin: 0; min-width: 0; } -.c3 { +.c4 { width: 100%; display: -webkit-box; display: -webkit-flex; @@ -345,15 +25,11 @@ exports[`TokenDescription no description or social buttons shown when not availa justify-content: flex-start; } -.c7 { +.c2 { color: #222222; } -.c9 { - color: #7D7D7D; -} - -.c12 { +.c8 { -webkit-text-decoration: none; text-decoration: none; cursor: pointer; @@ -364,11 +40,11 @@ exports[`TokenDescription no description or social buttons shown when not availa font-weight: 500; } -.c12:hover { +.c8:hover { opacity: 0.6; } -.c12:active { +.c8:active { opacity: 0.4; } @@ -386,73 +62,34 @@ exports[`TokenDescription no description or social buttons shown when not availa justify-content: flex-start; } -.c6 { - --size: 20px; - border-radius: 100px; - color: #222222; - background-color: #22222212; - font-size: calc(var(--size) / 3); - font-weight: 535; - height: 20px; - line-height: 20px; - text-align: center; - width: 20px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c5 { - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c14 { +.c10 { color: #CECECE; font-weight: 485; font-size: 16px; } .c1 { - gap: 12px; + gap: 16px; width: 100%; } -.c4 { +.c5 { gap: 8px; width: 100%; } -.c8 { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.c10 { +.c6 { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } -.c11 { +.c7 { gap: 8px; padding: 8px 12px; border-radius: 20px; - color: #FC72FF; - background-color: #FC72FF1f; + color: #222222; + background-color: #2222221f; font-size: 14px; font-weight: 535; line-height: 16px; @@ -466,15 +103,15 @@ exports[`TokenDescription no description or social buttons shown when not availa transition-duration: 125ms; } -.c11:hover { +.c7:hover { opacity: 0.6; } -.c11:active { +.c7:active { opacity: 0.4; } -.c13 { +.c9 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -493,39 +130,20 @@ exports[`TokenDescription no description or social buttons shown when not availa class="c0 c1" >
-
-
- USD -
-
-
- USDCoin -
-
- USDC -
+ Info
Etherscan @@ -578,10 +196,10 @@ exports[`TokenDescription no description or social buttons shown when not availa
No token information available @@ -592,13 +210,13 @@ exports[`TokenDescription no description or social buttons shown when not availa exports[`TokenDescription renders token information correctly with defaults 1`] = ` - .c2 { + .c3 { box-sizing: border-box; margin: 0; min-width: 0; } -.c3 { +.c4 { width: 100%; display: -webkit-box; display: -webkit-flex; @@ -615,15 +233,11 @@ exports[`TokenDescription renders token information correctly with defaults 1`] justify-content: flex-start; } -.c7 { +.c2 { color: #222222; } -.c9 { - color: #7D7D7D; -} - -.c12 { +.c8 { -webkit-text-decoration: none; text-decoration: none; cursor: pointer; @@ -634,11 +248,11 @@ exports[`TokenDescription renders token information correctly with defaults 1`] font-weight: 500; } -.c12:hover { +.c8:hover { opacity: 0.6; } -.c12:active { +.c8:active { opacity: 0.4; } @@ -656,80 +270,41 @@ exports[`TokenDescription renders token information correctly with defaults 1`] justify-content: flex-start; } -.c6 { - --size: 20px; - border-radius: 100px; - color: #222222; - background-color: #22222212; - font-size: calc(var(--size) / 3); - font-weight: 535; - height: 20px; - line-height: 20px; - text-align: center; - width: 20px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c5 { - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c16 { +.c12 { color: #7D7D7D; font-weight: 485; font-size: 0.85em; padding-top: 0.5em; } -.c16:hover, -.c16:focus { +.c12:hover, +.c12:focus { color: #636363; cursor: pointer; } .c1 { - gap: 12px; + gap: 16px; width: 100%; } -.c4 { +.c5 { gap: 8px; width: 100%; } -.c8 { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.c10 { +.c6 { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } -.c11 { +.c7 { gap: 8px; padding: 8px 12px; border-radius: 20px; - color: #FC72FF; - background-color: #FC72FF1f; + color: #222222; + background-color: #2222221f; font-size: 14px; font-weight: 535; line-height: 16px; @@ -743,15 +318,15 @@ exports[`TokenDescription renders token information correctly with defaults 1`] transition-duration: 125ms; } -.c11:hover { +.c7:hover { opacity: 0.6; } -.c11:active { +.c7:active { opacity: 0.4; } -.c13 { +.c9 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -760,11 +335,11 @@ exports[`TokenDescription renders token information correctly with defaults 1`] white-space: pre-wrap; } -.c14 { +.c10 { display: none; } -.c15 { +.c11 { display: inline; } @@ -778,39 +353,20 @@ exports[`TokenDescription renders token information correctly with defaults 1`] class="c0 c1" >
-
-
- USD -
-
-
- USDCoin -
-
- USDC -
+ Info
Etherscan
Website
Twitter @@ -913,22 +469,22 @@ exports[`TokenDescription renders token information correctly with defaults 1`]
USDC is a fully collateralized US dollar stablecoin. USDC is the bridge between dollars and trading on cryptocurrency exchanges. The technology behind CENTRE makes it possible to exchange value between people, businesses and financial institutions just like email between mail services and texts between SMS providers. We believe by removing artificial economic borders, we can create a more inclusive global economy. USDC is a fully collateralized US dollar stablecoin. USDC is the bridge...
Show more @@ -940,13 +496,13 @@ exports[`TokenDescription renders token information correctly with defaults 1`] exports[`TokenDescription truncates description and shows more 1`] = ` - .c2 { + .c3 { box-sizing: border-box; margin: 0; min-width: 0; } -.c3 { +.c4 { width: 100%; display: -webkit-box; display: -webkit-flex; @@ -963,15 +519,11 @@ exports[`TokenDescription truncates description and shows more 1`] = ` justify-content: flex-start; } -.c7 { +.c2 { color: #222222; } -.c9 { - color: #7D7D7D; -} - -.c12 { +.c8 { -webkit-text-decoration: none; text-decoration: none; cursor: pointer; @@ -982,11 +534,11 @@ exports[`TokenDescription truncates description and shows more 1`] = ` font-weight: 500; } -.c12:hover { +.c8:hover { opacity: 0.6; } -.c12:active { +.c8:active { opacity: 0.4; } @@ -1004,80 +556,41 @@ exports[`TokenDescription truncates description and shows more 1`] = ` justify-content: flex-start; } -.c6 { - --size: 20px; - border-radius: 100px; - color: #222222; - background-color: #22222212; - font-size: calc(var(--size) / 3); - font-weight: 535; - height: 20px; - line-height: 20px; - text-align: center; - width: 20px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c5 { - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c16 { +.c12 { color: #7D7D7D; font-weight: 485; font-size: 0.85em; padding-top: 0.5em; } -.c16:hover, -.c16:focus { +.c12:hover, +.c12:focus { color: #636363; cursor: pointer; } .c1 { - gap: 12px; + gap: 16px; width: 100%; } -.c4 { +.c5 { gap: 8px; width: 100%; } -.c8 { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.c10 { +.c6 { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } -.c11 { +.c7 { gap: 8px; padding: 8px 12px; border-radius: 20px; - color: #FC72FF; - background-color: #FC72FF1f; + color: #222222; + background-color: #2222221f; font-size: 14px; font-weight: 535; line-height: 16px; @@ -1091,15 +604,15 @@ exports[`TokenDescription truncates description and shows more 1`] = ` transition-duration: 125ms; } -.c11:hover { +.c7:hover { opacity: 0.6; } -.c11:active { +.c7:active { opacity: 0.4; } -.c13 { +.c9 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -1108,11 +621,11 @@ exports[`TokenDescription truncates description and shows more 1`] = ` white-space: pre-wrap; } -.c14 { +.c10 { display: none; } -.c15 { +.c11 { display: inline; } @@ -1126,39 +639,20 @@ exports[`TokenDescription truncates description and shows more 1`] = ` class="c0 c1" >
-
-
- USD -
-
-
- USDCoin -
-
- USDC -
+ Info
Etherscan
Website
Twitter @@ -1261,22 +755,22 @@ exports[`TokenDescription truncates description and shows more 1`] = `
USDC is a fully collateralized US dollar stablecoin. USDC is the bridge between dollars and trading on cryptocurrency exchanges. The technology behind CENTRE makes it possible to exchange value between people, businesses and financial institutions just like email between mail services and texts between SMS providers. We believe by removing artificial economic borders, we can create a more inclusive global economy. USDC is a fully collateralized US dollar stablecoin. USDC is the bridge...
Show more diff --git a/src/components/Tokens/TokenDetails/index.tsx b/src/components/Tokens/TokenDetails/index.tsx index 21b189f78e..f378fdd009 100644 --- a/src/components/Tokens/TokenDetails/index.tsx +++ b/src/components/Tokens/TokenDetails/index.tsx @@ -43,6 +43,7 @@ import { addressesAreEquivalent } from 'utils/addressesAreEquivalent' import { OnChangeTimePeriod } from './ChartSection' import InvalidTokenDetails from './InvalidTokenDetails' +import { TokenDescription } from './TokenDescription' const TokenSymbol = styled.span` text-transform: uppercase; @@ -258,7 +259,7 @@ export default function TokenDetails({ )} - isBlockedToken && setOpenTokenSafetyModal(true)}> + isBlockedToken && setOpenTokenSafetyModal(true)}>
{tokenWarning && } {!isInfoTDPEnabled && detailedToken && } + {isInfoTDPEnabled && ( + + )} {!isInfoTDPEnabled && detailedToken && } diff --git a/src/components/swap/SwapLineItem.tsx b/src/components/swap/SwapLineItem.tsx index 9389f6fde8..53cec81589 100644 --- a/src/components/swap/SwapLineItem.tsx +++ b/src/components/swap/SwapLineItem.tsx @@ -63,7 +63,7 @@ const AutoBadge = styled(ThemedText.LabelMicro).attrs({ fontWeight: 535 })` } ` -function FOTTooltipContent() { +export function FOTTooltipContent() { return ( <> diff --git a/src/pages/PoolDetails/__snapshots__/index.test.tsx.snap b/src/pages/PoolDetails/__snapshots__/index.test.tsx.snap index b4e98fb6e0..810b5d7ffc 100644 --- a/src/pages/PoolDetails/__snapshots__/index.test.tsx.snap +++ b/src/pages/PoolDetails/__snapshots__/index.test.tsx.snap @@ -110,25 +110,6 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the color: #222222; } -.c64 { - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - -webkit-transition-duration: 125ms; - transition-duration: 125ms; - color: #FC72FF; - stroke: #FC72FF; - font-weight: 500; -} - -.c64:hover { - opacity: 0.6; -} - -.c64:active { - opacity: 0.4; -} - .c3 { display: -webkit-box; display: -webkit-flex; @@ -249,39 +230,6 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the color: #FF5F52; } -.c61 { - opacity: 0; - -webkit-transition: opacity 250ms ease-in; - transition: opacity 250ms ease-in; - width: 20px; - height: 20px; - border-radius: 50%; -} - -.c60 { - width: 20px; - height: 20px; - background: #22222212; - -webkit-transition: background-color 250ms ease-in; - transition: background-color 250ms ease-in; - box-shadow: 0 0 1px white; - border-radius: 50%; -} - -.c59 { - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c67 { - color: #CECECE; - font-weight: 485; - font-size: 16px; -} - .c18 { display: -webkit-box; display: -webkit-flex; @@ -347,64 +295,6 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the height: 6px; } -.c57 { - gap: 12px; - width: 100%; -} - -.c58 { - gap: 8px; - width: 100%; -} - -.c62 { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.c63 { - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} - -.c65 { - gap: 8px; - padding: 8px 12px; - border-radius: 20px; - color: #FC72FF; - background-color: #FC72FF1f; - font-size: 14px; - font-weight: 535; - line-height: 16px; - width: -webkit-max-content; - width: -moz-max-content; - width: max-content; - -webkit-text-decoration: none; - text-decoration: none; - cursor: pointer; - -webkit-transition-duration: 125ms; - transition-duration: 125ms; -} - -.c65:hover { - opacity: 0.6; -} - -.c65:active { - opacity: 0.4; -} - -.c66 { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - line-height: 24px; - white-space: pre-wrap; -} - .c33 { height: 16px; width: 80px; @@ -739,24 +629,6 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the min-width: 360px; } -.c55 { - gap: 24px; - padding: 20px; -} - -.c56 { - width: 100%; - font-size: 24px; - font-weight: 485; - line-height: 32px; -} - -@media (max-width:1023px) and (min-width:640px) { - .c57 { - max-width: 45%; - } -} - @media (max-width:1023px) { .c44 { width: 100%; @@ -857,24 +729,6 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the } } -@media (max-width:1023px) and (min-width:640px) { - .c55 { - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - padding: unset; - } -} - -@media (max-width:639px) { - .c55 { - padding: unset; - } -} -
@@ -1842,165 +1696,6 @@ exports[`PoolDetailsPage pool header is displayed when data is received from the
-
-
- Info -
-
-
-
-
- UNKNOWN logo -
-
-
- Unknown Token -
-
- UNKNOWN -
-
-
- -
- - - - - Etherscan -
- -
-
- - No token information available - -
-
-
-
-
-
- WETH logo -
-
-
- Wrapped Ether -
-
- WETH -
-
-
- -
- - - - - Etherscan -
- -
-
- - No token information available - -
-
-
diff --git a/src/pages/PoolDetails/index.tsx b/src/pages/PoolDetails/index.tsx index e5420f2c1e..0babd3a6a9 100644 --- a/src/pages/PoolDetails/index.tsx +++ b/src/pages/PoolDetails/index.tsx @@ -1,15 +1,12 @@ -import { Trans } from '@lingui/macro' import Column from 'components/Column' import Row from 'components/Row' import { LoadingBubble } from 'components/Tokens/loading' import { LoadingChart } from 'components/Tokens/TokenDetails/Skeleton' -import { TokenDescription } from 'components/Tokens/TokenDetails/TokenDescription' import { getValidUrlChainName, supportedChainIdFromGQLChain } from 'graphql/data/util' import { usePoolData } from 'graphql/thegraph/PoolData' import NotFound from 'pages/NotFound' import { useReducer } from 'react' import { useParams } from 'react-router-dom' -import { Text } from 'rebass' import styled from 'styled-components' import { BREAKPOINTS } from 'theme' import { isAddress } from 'utils' @@ -76,28 +73,6 @@ const RightColumn = styled(Column)` } ` -const TokenDetailsWrapper = styled(Column)` - gap: 24px; - padding: 20px; - - @media (max-width: ${BREAKPOINTS.lg - 1}px) and (min-width: ${BREAKPOINTS.sm}px) { - flex-direction: row; - flex-wrap: wrap; - padding: unset; - } - - @media (max-width: ${BREAKPOINTS.sm - 1}px) { - padding: unset; - } -` - -const TokenDetailsHeader = styled(Text)` - width: 100%; - font-size: 24px; - font-weight: 485; - line-height: 32px; -` - export default function PoolDetailsPage() { const { poolAddress, chainName } = useParams<{ poolAddress: string @@ -152,15 +127,8 @@ export default function PoolDetailsPage() { ))} - ) : ( - - - Info - - {token0 && } - {token1 && } - - ))} + ) : null)} + {/* TODO(WEB-2985) replace with new Token Links component */} ) diff --git a/src/utils/getExplorerLink.ts b/src/utils/getExplorerLink.ts index f53231afb4..e2725239ed 100644 --- a/src/utils/getExplorerLink.ts +++ b/src/utils/getExplorerLink.ts @@ -20,6 +20,7 @@ export enum ExplorerDataType { TOKEN = 'token', ADDRESS = 'address', BLOCK = 'block', + NATIVE = 'native', } /**