From 876d3a1cc343a2ea822243b2a579f4c185722064 Mon Sep 17 00:00:00 2001 From: Kristie Huang Date: Thu, 9 Nov 2023 14:51:23 -0500 Subject: [PATCH] feat: [info] add new tdp nav (#7531) * feat: [info] add new tdp nav * tidy up code * pr review * nit remove unused component style * pr review * lol extraneous extra --- .../Tokens/TokenDetails/AddressSection.tsx | 3 +- .../Tokens/TokenDetails/BreadcrumbNavLink.tsx | 30 ++++++++++---- .../Tokens/TokenDetails/Skeleton.tsx | 32 +++++++++++---- src/components/Tokens/TokenDetails/index.tsx | 40 +++++++++++++++---- src/theme/components/index.tsx | 22 ++++++---- 5 files changed, 96 insertions(+), 31 deletions(-) diff --git a/src/components/Tokens/TokenDetails/AddressSection.tsx b/src/components/Tokens/TokenDetails/AddressSection.tsx index 4614dd48cb..14a0480ae0 100644 --- a/src/components/Tokens/TokenDetails/AddressSection.tsx +++ b/src/components/Tokens/TokenDetails/AddressSection.tsx @@ -1,6 +1,7 @@ import { Trans } from '@lingui/macro' import styled from 'styled-components' import { CopyContractAddress, ThemedText } from 'theme/components' +import { shortenAddress } from 'utils/addresses' const ContractAddressSection = styled.div` display: flex; @@ -29,7 +30,7 @@ export default function AddressSection({ address }: { address: string }) { Contract address - + ) diff --git a/src/components/Tokens/TokenDetails/BreadcrumbNavLink.tsx b/src/components/Tokens/TokenDetails/BreadcrumbNavLink.tsx index ed0280b3db..40a7dcf94f 100644 --- a/src/components/Tokens/TokenDetails/BreadcrumbNavLink.tsx +++ b/src/components/Tokens/TokenDetails/BreadcrumbNavLink.tsx @@ -1,17 +1,31 @@ import { Link } from 'react-router-dom' -import styled from 'styled-components' +import styled, { css } from 'styled-components' + +export const BreadcrumbNav = styled.div<{ isInfoTDPEnabled?: boolean }>` + display: flex; + color: ${({ theme }) => theme.neutral1}; + ${({ isInfoTDPEnabled }) => + isInfoTDPEnabled + ? css` + font-size: 16px; + line-height: 24px; + ` + : css` + font-size: 14px; + line-height: 20px; + `} + align-items: center; + gap: 4px; + margin-bottom: 16px; + width: fit-content; +` export const BreadcrumbNavLink = styled(Link)` display: flex; - color: ${({ theme }) => theme.neutral2}; - font-size: 14px; - line-height: 20px; align-items: center; - gap: 4px; - text-decoration: none; - margin-bottom: 16px; + color: ${({ theme }) => theme.neutral2}; transition-duration: ${({ theme }) => theme.transition.duration.fast}; - width: fit-content; + text-decoration: none; &:hover { color: ${({ theme }) => theme.neutral3}; diff --git a/src/components/Tokens/TokenDetails/Skeleton.tsx b/src/components/Tokens/TokenDetails/Skeleton.tsx index 160cf36a0d..4177572698 100644 --- a/src/components/Tokens/TokenDetails/Skeleton.tsx +++ b/src/components/Tokens/TokenDetails/Skeleton.tsx @@ -1,6 +1,8 @@ +import { Trans } from '@lingui/macro' import { SwapSkeleton } from 'components/swap/SwapSkeleton' import { useInfoExplorePageEnabled } from 'featureFlags/flags/infoExplore' -import { ArrowLeft } from 'react-feather' +import { useInfoTDPEnabled } from 'featureFlags/flags/infoTDP' +import { ArrowLeft, ChevronRight } from 'react-feather' import { useParams } from 'react-router-dom' import styled, { useTheme } from 'styled-components' import { ThemedText } from 'theme/components' @@ -8,7 +10,7 @@ import { textFadeIn } from 'theme/styles' import { LoadingBubble } from '../loading' import { AboutContainer, AboutHeader } from './About' -import { BreadcrumbNavLink } from './BreadcrumbNavLink' +import { BreadcrumbNav, BreadcrumbNavLink } from './BreadcrumbNavLink' import { StatPair, StatsWrapper, StatWrapper } from './StatsSection' const SWAP_COMPONENT_WIDTH = 360 @@ -92,6 +94,9 @@ const SquaredBubble = styled(DetailBubble)` height: 32px; border-radius: 8px; ` +const NavBubble = styled(DetailBubble)` + width: 169px; +` const TokenLogoBubble = styled(DetailBubble)` width: 32px; height: 32px; @@ -222,13 +227,26 @@ function LoadingStats() { export default function TokenDetailsSkeleton() { const { chainName } = useParams<{ chainName?: string }>() const isInfoExplorePageEnabled = useInfoExplorePageEnabled() + const isInfoTDPEnabled = useInfoTDPEnabled() + return ( - - Tokens - + {isInfoTDPEnabled ? ( + + + Explore Tokens + {' '} + + + ) : ( + + + Tokens + + + )} diff --git a/src/components/Tokens/TokenDetails/index.tsx b/src/components/Tokens/TokenDetails/index.tsx index 6f40952d85..37b7b43aff 100644 --- a/src/components/Tokens/TokenDetails/index.tsx +++ b/src/components/Tokens/TokenDetails/index.tsx @@ -6,7 +6,7 @@ import { PortfolioLogo } from 'components/AccountDrawer/MiniPortfolio/PortfolioL import { AboutSection } from 'components/Tokens/TokenDetails/About' import AddressSection from 'components/Tokens/TokenDetails/AddressSection' import BalanceSummary from 'components/Tokens/TokenDetails/BalanceSummary' -import { BreadcrumbNavLink } from 'components/Tokens/TokenDetails/BreadcrumbNavLink' +import { BreadcrumbNav, BreadcrumbNavLink } from 'components/Tokens/TokenDetails/BreadcrumbNavLink' import ChartSection from 'components/Tokens/TokenDetails/ChartSection' import MobileBalanceSummaryFooter from 'components/Tokens/TokenDetails/MobileBalanceSummaryFooter' import ShareButton from 'components/Tokens/TokenDetails/ShareButton' @@ -32,12 +32,13 @@ import { useOnGlobalChainSwitch } from 'hooks/useGlobalChainSwitch' import { UNKNOWN_TOKEN_SYMBOL, useTokenFromActiveNetwork } from 'lib/hooks/useCurrency' import { Swap } from 'pages/Swap' import { useCallback, useMemo, useState, useTransition } from 'react' -import { ArrowLeft } from 'react-feather' +import { ArrowLeft, ChevronRight } from 'react-feather' import { useNavigate } from 'react-router-dom' import { Field } from 'state/swap/actions' import { SwapState } from 'state/swap/reducer' import styled from 'styled-components' -import { isAddress } from 'utils' +import { CopyContractAddress } from 'theme/components' +import { isAddress, shortenAddress } from 'utils' import { addressesAreEquivalent } from 'utils/addressesAreEquivalent' import { OnChangeTimePeriod } from './ChartSection' @@ -130,7 +131,6 @@ export default function TokenDetails({ }, {} as { [key: string]: string | undefined }) ?? {}, [tokenQueryData] ) - const isInfoTDPEnabled = useInfoTDPEnabled() const { token: detailedToken, didFetchFromChain } = useRelevantToken(address, pageChainId, tokenQueryData) @@ -139,6 +139,7 @@ export default function TokenDetails({ const navigate = useNavigate() const isInfoExplorePageEnabled = useInfoExplorePageEnabled() + const isInfoTDPEnabled = useInfoTDPEnabled() // Wrapping navigate in a transition prevents Suspense from unnecessarily showing fallbacks again. const [isPending, startTokenTransition] = useTransition() @@ -210,6 +211,7 @@ export default function TokenDetails({ if (detailedToken === undefined || !address) { return } + const tokenSymbolName = detailedToken && (detailedToken.symbol ?? Symbol not found) return ( {detailedToken && !isPending ? ( - - Tokens - + {isInfoTDPEnabled ? ( + + + Explore Tokens + {' '} + {tokenSymbolName}{' '} + {!detailedToken.isNative && ( + <> + ( + + ) + + )} + + ) : ( + + + Tokens + + + )} {detailedToken.name ?? Name not found} - {detailedToken.symbol ?? Symbol not found} + {tokenSymbolName} diff --git a/src/theme/components/index.tsx b/src/theme/components/index.tsx index 0323f45380..08a05bb218 100644 --- a/src/theme/components/index.tsx +++ b/src/theme/components/index.tsx @@ -243,13 +243,14 @@ export function CopyLinkIcon({ toCopy }: { toCopy: string }) { ) } -const FullAddress = styled.span` +const FullAddress = styled.span<{ showTruncated?: boolean }>` + ${({ showTruncated }) => showTruncated && 'display: none;'} @media only screen and (max-width: ${MOBILE_MEDIA_BREAKPOINT}) { display: none; } ` -const TruncatedAddress = styled.span` - display: none; +const TruncatedAddress = styled.span<{ showTruncated?: boolean }>` + display: ${({ showTruncated }) => (showTruncated ? 'flex' : 'none')}; @media only screen and (max-width: ${MOBILE_MEDIA_BREAKPOINT}) { display: flex; } @@ -273,7 +274,15 @@ const CopyContractAddressWrapper = styled.div` display: flex; ` -export function CopyContractAddress({ address }: { address: string }) { +export function CopyContractAddress({ + address, + showTruncatedOnly, + truncatedAddress, +}: { + address: string + showTruncatedOnly?: boolean + truncatedAddress?: string +}) { const [isCopied, setCopied] = useCopyClipboard() const [tooltipX, setTooltipX] = useState() const copy = useCallback( @@ -284,12 +293,11 @@ export function CopyContractAddress({ address }: { address: string }) { [address, setCopied] ) - const truncated = `${address.slice(0, 4)}...${address.slice(-3)}` return ( - {address} - {truncated} + {address} + {truncatedAddress} {isCopied && }