fix: show common bases on mobile (#7365)
* fix: show common bases on mobile * test: add unit tests
This commit is contained in:
eddie
GitHub
parent
15c510b742
commit
4a8fb760d2
33
src/components/SearchModal/CommonBases.test.tsx
Normal file
33
src/components/SearchModal/CommonBases.test.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
import { ChainId } from '@uniswap/sdk-core'
|
||||
import { render } from 'test-utils/render'
|
||||
|
||||
import CommonBases from './CommonBases'
|
||||
|
||||
const mockOnSelect = jest.fn()
|
||||
|
||||
describe('CommonBases', () => {
|
||||
it('renders without crashing', () => {
|
||||
const { container } = render(
|
||||
<CommonBases chainId={ChainId.MAINNET} onSelect={mockOnSelect} searchQuery="" isAddressSearch={false} />
|
||||
)
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('renders correct number of common bases', () => {
|
||||
const { getAllByTestId } = render(
|
||||
<CommonBases chainId={1} onSelect={mockOnSelect} searchQuery="" isAddressSearch={false} />
|
||||
)
|
||||
const items = getAllByTestId(/common-base-/)
|
||||
expect(items.length).toBe(6)
|
||||
})
|
||||
|
||||
it('renders common bases on mobile', () => {
|
||||
window.innerWidth = 400
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
const { getAllByTestId } = render(
|
||||
<CommonBases chainId={1} onSelect={mockOnSelect} searchQuery="" isAddressSearch={false} />
|
||||
)
|
||||
const items = getAllByTestId(/common-base-/)
|
||||
expect(items.length).toBe(6)
|
||||
})
|
||||
})
|
||||
@ -1,7 +1,6 @@
|
||||
import { BrowserEvent, InterfaceElementName, InterfaceEventName } from '@uniswap/analytics-events'
|
||||
import { Currency } from '@uniswap/sdk-core'
|
||||
import { TraceEvent } from 'analytics'
|
||||
import { AutoColumn } from 'components/Column'
|
||||
import CurrencyLogo from 'components/Logo/CurrencyLogo'
|
||||
import { AutoRow } from 'components/Row'
|
||||
import { COMMON_BASES } from 'constants/routing'
|
||||
@ -11,12 +10,6 @@ import { Text } from 'rebass'
|
||||
import styled from 'styled-components'
|
||||
import { currencyId } from 'utils/currencyId'
|
||||
|
||||
const MobileWrapper = styled(AutoColumn)`
|
||||
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
|
||||
display: none;
|
||||
`};
|
||||
`
|
||||
|
||||
const BaseWrapper = styled.div<{ disable?: boolean }>`
|
||||
border: 1px solid ${({ theme }) => theme.surface3};
|
||||
border-radius: 18px;
|
||||
@ -65,37 +58,35 @@ export default function CommonBases({
|
||||
const bases = chainId !== undefined ? COMMON_BASES[chainId] ?? [] : []
|
||||
|
||||
return bases.length > 0 ? (
|
||||
<MobileWrapper gap="md">
|
||||
<AutoRow gap="4px">
|
||||
{bases.map((currency: Currency) => {
|
||||
const isSelected = selectedCurrency?.equals(currency)
|
||||
<AutoRow gap="4px">
|
||||
{bases.map((currency: Currency) => {
|
||||
const isSelected = selectedCurrency?.equals(currency)
|
||||
|
||||
return (
|
||||
<TraceEvent
|
||||
events={[BrowserEvent.onClick, BrowserEvent.onKeyPress]}
|
||||
name={InterfaceEventName.TOKEN_SELECTED}
|
||||
properties={formatAnalyticsEventProperties(currency, searchQuery, isAddressSearch)}
|
||||
element={InterfaceElementName.COMMON_BASES_CURRENCY_BUTTON}
|
||||
return (
|
||||
<TraceEvent
|
||||
events={[BrowserEvent.onClick, BrowserEvent.onKeyPress]}
|
||||
name={InterfaceEventName.TOKEN_SELECTED}
|
||||
properties={formatAnalyticsEventProperties(currency, searchQuery, isAddressSearch)}
|
||||
element={InterfaceElementName.COMMON_BASES_CURRENCY_BUTTON}
|
||||
key={currencyId(currency)}
|
||||
>
|
||||
<BaseWrapper
|
||||
tabIndex={0}
|
||||
onKeyPress={(e) => !isSelected && e.key === 'Enter' && onSelect(currency)}
|
||||
onClick={() => !isSelected && onSelect(currency)}
|
||||
disable={isSelected}
|
||||
key={currencyId(currency)}
|
||||
data-testid={`common-base-${currency.symbol}`}
|
||||
>
|
||||
<BaseWrapper
|
||||
tabIndex={0}
|
||||
onKeyPress={(e) => !isSelected && e.key === 'Enter' && onSelect(currency)}
|
||||
onClick={() => !isSelected && onSelect(currency)}
|
||||
disable={isSelected}
|
||||
key={currencyId(currency)}
|
||||
data-testid={`common-base-${currency.symbol}`}
|
||||
>
|
||||
<CurrencyLogoFromList currency={currency} />
|
||||
<Text fontWeight={535} fontSize={16} lineHeight="16px">
|
||||
{currency.symbol}
|
||||
</Text>
|
||||
</BaseWrapper>
|
||||
</TraceEvent>
|
||||
)
|
||||
})}
|
||||
</AutoRow>
|
||||
</MobileWrapper>
|
||||
<CurrencyLogoFromList currency={currency} />
|
||||
<Text fontWeight={535} fontSize={16} lineHeight="16px">
|
||||
{currency.symbol}
|
||||
</Text>
|
||||
</BaseWrapper>
|
||||
</TraceEvent>
|
||||
)
|
||||
})}
|
||||
</AutoRow>
|
||||
) : null
|
||||
}
|
||||
|
||||
|
||||
@ -0,0 +1,245 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`CommonBases renders without crashing 1`] = `
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
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;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin: -4px;
|
||||
}
|
||||
|
||||
.c2 > * {
|
||||
margin: 4px !important;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 250ms ease-in;
|
||||
transition: opacity 250ms ease-in;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #22222212;
|
||||
-webkit-transition: background-color 250ms ease-in;
|
||||
transition: background-color 250ms ease-in;
|
||||
box-shadow: 0 0 1px white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
border: 1px solid #22222212;
|
||||
border-radius: 18px;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 6px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-right: 12px;
|
||||
line-height: 0px;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.c3:hover {
|
||||
cursor: pointer;
|
||||
background-color: #98A1C014;
|
||||
}
|
||||
|
||||
<div>
|
||||
<div
|
||||
class="c0 c1 c2"
|
||||
>
|
||||
<div
|
||||
class="c3"
|
||||
data-testid="common-base-ETH"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="c4"
|
||||
style="height: 24px; width: 24px; margin-right: 8px;"
|
||||
>
|
||||
<div
|
||||
class="c5"
|
||||
>
|
||||
<img
|
||||
alt="ETH logo"
|
||||
class="c6"
|
||||
src="ethereum-logo.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="css-1qnq88a"
|
||||
>
|
||||
ETH
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c3"
|
||||
data-testid="common-base-DAI"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="c4"
|
||||
style="height: 24px; width: 24px; margin-right: 8px;"
|
||||
>
|
||||
<div
|
||||
class="c5"
|
||||
>
|
||||
<img
|
||||
alt="DAI logo"
|
||||
class="c6"
|
||||
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="css-1qnq88a"
|
||||
>
|
||||
DAI
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c3"
|
||||
data-testid="common-base-USDC"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="c4"
|
||||
style="height: 24px; width: 24px; margin-right: 8px;"
|
||||
>
|
||||
<div
|
||||
class="c5"
|
||||
>
|
||||
<img
|
||||
alt="USDC logo"
|
||||
class="c6"
|
||||
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="css-1qnq88a"
|
||||
>
|
||||
USDC
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c3"
|
||||
data-testid="common-base-USDT"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="c4"
|
||||
style="height: 24px; width: 24px; margin-right: 8px;"
|
||||
>
|
||||
<div
|
||||
class="c5"
|
||||
>
|
||||
<img
|
||||
alt="USDT logo"
|
||||
class="c6"
|
||||
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xdAC17F958D2ee523a2206206994597C13D831ec7/logo.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="css-1qnq88a"
|
||||
>
|
||||
USDT
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c3"
|
||||
data-testid="common-base-WBTC"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="c4"
|
||||
style="height: 24px; width: 24px; margin-right: 8px;"
|
||||
>
|
||||
<div
|
||||
class="c5"
|
||||
>
|
||||
<img
|
||||
alt="WBTC logo"
|
||||
class="c6"
|
||||
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599/logo.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="css-1qnq88a"
|
||||
>
|
||||
WBTC
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c3"
|
||||
data-testid="common-base-WETH"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="c4"
|
||||
style="height: 24px; width: 24px; margin-right: 8px;"
|
||||
>
|
||||
<div
|
||||
class="c5"
|
||||
>
|
||||
<img
|
||||
alt="WETH logo"
|
||||
class="c6"
|
||||
src="https://raw.githubusercontent.com/Uniswap/assets/master/blockchains/ethereum/assets/0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2/logo.png"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="css-1qnq88a"
|
||||
>
|
||||
WETH
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
Loading…
Reference in New Issue
Block a user