feat: [info] update token links #7505
Conversation
cbachmeier
requested review from
gnewfield,
kristiehuang,
cartcrom,
a team and
tinaszheng
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Codecov Report
Flags with carried forward coverage won't be shown. Click here to find out more. |
Passing run #15311 ↗︎
Details:
Review all test suite changes for PR #7505 ↗︎ |
|||||||||||||||
| const TokenName = styled(ThemedText.BodyPrimary)` | ||
| display: none; | ||
|
|
||
| @media (max-width: ${BREAKPOINTS.lg - 1}px) and (min-width: ${BREAKPOINTS.xs - 1}px) { |
There was a problem hiding this comment.
question for my own understanding: why don't we use @media for all our other responsive css as well? why do we use @media only screen or @media screen when virtually all browsers support media queries + do we need to specify screen for responsive purposes?
There was a problem hiding this comment.
we currently don't enforce one particular standard over the other so I think it just comes to implementers style. This might be something we want to codify via linter however if we see a compelling reason to use one over the other
| <TokenDetailsWrapper> | ||
| <TokenDetailsHeader> | ||
| <Trans>Links</Trans> | ||
| </TokenDetailsHeader> |
There was a problem hiding this comment.
nit: rename to PoolDetailsHeader/Wrapper?
There was a problem hiding this comment.
This section is specifically referring to the Token Details of the Tokens in the pool not like in TDP.
| <PoolDetailsLink address={poolAddress} chainId={chainId} tokens={[token0, token1]} loading={loading} /> | ||
| <PoolDetailsLink address={token0?.id} chainId={chainId} tokens={[token0]} loading={loading} /> | ||
| <PoolDetailsLink address={token1?.id} chainId={chainId} tokens={[token1]} loading={loading} /> | ||
| </LinksContainer> |
There was a problem hiding this comment.
you should probably memo the tokens prop array before passing them in, or change the prop to take in token0 and token1 to prevent rerenders
* update pdp link styles * dynamic link text * move links to their own file * border width case * todo comments * add explorer icon * hide chain logos on other chain * remove quotes * clean up * unused style
Description
Linear ticket: https://linear.app/uniswap/issue/WEB-2985/update-token-links
Slack thread: https://uniswapteam.slack.com/archives/C05NXMASXNZ/p1697748986768909
Relevant docs: https://www.figma.com/file/2yKuZXmQ2UvgBbXR3txz4O/Dot-Info?type=design&node-id=1547%3A229624&mode=dev
Screen capture
Mobile
Tablet
Desktop
Non-Mainnet
Light mode
Test plan
QA (ie manual testing)
Automated testing