From fb7eade70b2e762600e3f4254fb4b04cec5b7c88 Mon Sep 17 00:00:00 2001 From: eddie <66155195+just-toby@users.noreply.github.com> Date: Thu, 30 Mar 2023 11:59:46 -0700 Subject: [PATCH] fix: l2 icon borders in MP (#6254) * fix: l2 icon borders in MP * fix: bool logic * fix: comments and add test * fix: change variable name * fix: split l2 icon into two components --- .../MiniPortfolio/PortfolioLogo.test.tsx | 20 +++ .../MiniPortfolio/PortfolioLogo.tsx | 59 +++---- .../__snapshots__/PortfolioLogo.test.tsx.snap | 164 ++++++++++++++++++ 3 files changed, 212 insertions(+), 31 deletions(-) create mode 100644 src/components/WalletDropdown/MiniPortfolio/PortfolioLogo.test.tsx create mode 100644 src/components/WalletDropdown/MiniPortfolio/__snapshots__/PortfolioLogo.test.tsx.snap diff --git a/src/components/WalletDropdown/MiniPortfolio/PortfolioLogo.test.tsx b/src/components/WalletDropdown/MiniPortfolio/PortfolioLogo.test.tsx new file mode 100644 index 0000000000..86838fa38f --- /dev/null +++ b/src/components/WalletDropdown/MiniPortfolio/PortfolioLogo.test.tsx @@ -0,0 +1,20 @@ +import { SupportedChainId } from '@uniswap/sdk-core' +import { DAI_ARBITRUM } from '@uniswap/smart-order-router' +import { DAI, USDC_ARBITRUM, USDC_MAINNET } from 'constants/tokens' +import { render } from 'test-utils' + +import { PortfolioLogo } from './PortfolioLogo' + +describe('PortfolioLogo', () => { + it('renders without L2 icon', () => { + const { container } = render() + expect(container).toMatchSnapshot() + }) + + it('renders with L2 icon', () => { + const { container } = render( + + ) + expect(container).toMatchSnapshot() + }) +}) diff --git a/src/components/WalletDropdown/MiniPortfolio/PortfolioLogo.tsx b/src/components/WalletDropdown/MiniPortfolio/PortfolioLogo.tsx index d0f42ba028..d5283387c3 100644 --- a/src/components/WalletDropdown/MiniPortfolio/PortfolioLogo.tsx +++ b/src/components/WalletDropdown/MiniPortfolio/PortfolioLogo.tsx @@ -9,7 +9,7 @@ import useTokenLogoSource from 'hooks/useAssetLogoSource' import useENSAvatar from 'hooks/useENSAvatar' import React from 'react' import { Loader } from 'react-feather' -import styled from 'styled-components/macro' +import styled, { useTheme } from 'styled-components/macro' const UnknownContract = styled(UnknownStatus)` color: ${({ theme }) => theme.textSecondary}; ` @@ -57,34 +57,28 @@ const ENSAvatarImg = styled.img` width: 40px; ` -const StyledChainLogo = styled.img<{ isSquare: boolean }>` - height: ${({ isSquare }) => (isSquare ? '16px' : '14px')}; - width: ${({ isSquare }) => (isSquare ? '16px' : '14px')}; - margin-top: ${({ isSquare }) => (isSquare ? '0px' : '1px')}; - margin-left: ${({ isSquare }) => (isSquare ? '0px' : '1px')}; - position: absolute; - top: 68%; - left: 68%; +const StyledChainLogo = styled.img` + height: 14px; + width: 14px; ` -const ChainLogoSquareBackground = styled.div` - height: 18px; - width: 18px; - border-radius: 4px; - background-color: ${({ theme }) => theme.backgroundSurface}; +const SquareChainLogo = styled.img` + height: 100%; + width: 100%; +` + +const L2LogoContainer = styled.div<{ $backgroundColor?: string }>` + background-color: ${({ $backgroundColor }) => $backgroundColor}; + border-radius: 2px; + height: 16px; + left: 60%; position: absolute; top: 60%; - left: 60%; -` - -const SquareBackgroundForNonSquareLogo = styled.div` - height: 16px; + outline: 2px solid ${({ theme }) => theme.backgroundSurface}; width: 16px; - border-radius: 2px; - background-color: ${({ theme }) => theme.textPrimary}; - position: absolute; - top: 68%; - left: 68%; + display: flex; + align-items: center; + justify-content: center; ` /** @@ -101,6 +95,7 @@ export function PortfolioLogo({ const { squareLogoUrl, logoUrl } = getChainInfo(chainId) const chainLogo = squareLogoUrl ?? logoUrl const { avatar, loading } = useENSAvatar(accountAddress, false) + const theme = useTheme() const [src, nextSrc] = useTokenLogoSource(currencies?.[0]?.wrapped.address, chainId, currencies?.[0]?.isNative) const [src2, nextSrc2] = useTokenLogoSource(currencies?.[1]?.wrapped.address, chainId, currencies?.[1]?.isNative) @@ -147,13 +142,15 @@ export function PortfolioLogo({ } const L2Logo = - chainId === SupportedChainId.MAINNET ? null : ( -
- {chainLogo && } - {!squareLogoUrl && logoUrl && } - {chainLogo && } -
- ) + chainId !== SupportedChainId.MAINNET && chainLogo ? ( + + {squareLogoUrl ? ( + + ) : ( + + )} + + ) : null return ( diff --git a/src/components/WalletDropdown/MiniPortfolio/__snapshots__/PortfolioLogo.test.tsx.snap b/src/components/WalletDropdown/MiniPortfolio/__snapshots__/PortfolioLogo.test.tsx.snap new file mode 100644 index 0000000000..56ec6ccc84 --- /dev/null +++ b/src/components/WalletDropdown/MiniPortfolio/__snapshots__/PortfolioLogo.test.tsx.snap @@ -0,0 +1,164 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PortfolioLogo renders with L2 icon 1`] = ` +.c3 { + width: 40px; + height: 40px; + border-radius: 50%; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + gap: 2px; + position: relative; + top: 0; + left: 0; +} + +.c1 .c2:nth-child(n) { + width: 19px; + height: 40px; + object-fit: cover; +} + +.c1 .c2:nth-child(1) { + border-radius: 20px 0 0 20px; + object-position: 0 0; +} + +.c1 .c2:nth-child(2) { + border-radius: 0 20px 20px 0; + object-position: 100% 0; +} + +.c0 { + position: relative; + top: 0; + left: 0; +} + +.c5 { + height: 14px; + width: 14px; +} + +.c4 { + background-color: #0D111C; + border-radius: 2px; + height: 16px; + left: 60%; + position: absolute; + top: 60%; + outline: 2px solid #FFFFFF; + width: 16px; + 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; +} + +
+
+
+ + +
+
+ chainLogo +
+
+
+`; + +exports[`PortfolioLogo renders without L2 icon 1`] = ` +.c3 { + width: 40px; + height: 40px; + border-radius: 50%; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + gap: 2px; + position: relative; + top: 0; + left: 0; +} + +.c1 .c2:nth-child(n) { + width: 19px; + height: 40px; + object-fit: cover; +} + +.c1 .c2:nth-child(1) { + border-radius: 20px 0 0 20px; + object-position: 0 0; +} + +.c1 .c2:nth-child(2) { + border-radius: 0 20px 20px 0; + object-position: 100% 0; +} + +.c0 { + position: relative; + top: 0; + left: 0; +} + +
+
+
+ + +
+
+
+`;