Skip to content

I
interface
Commit 4a8fb760 authored by eddie's avatar eddie Committed by GitHub
Browse files
Options

fix: show common bases on mobile (#7365) 

* fix: show common bases on mobile

* test: add unit tests
parent 15c510b7
Hide whitespace changes
Inline Side-by-side
Showing with 304 additions and 35 deletions
src/components/SearchModal/CommonBases.test.tsx 0 → 100644
View file @ 4a8fb760
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)
})
})
src/components/SearchModal/CommonBases.tsx
View file @ 4a8fb760
import { BrowserEvent, InterfaceElementName, InterfaceEventName } from '@uniswap/analytics-events' import { BrowserEvent, InterfaceElementName, InterfaceEventName } from '@uniswap/analytics-events'
import { Currency } from '@uniswap/sdk-core' import { Currency } from '@uniswap/sdk-core'
import { TraceEvent } from 'analytics' import { TraceEvent } from 'analytics'
import { AutoColumn } from 'components/Column'
import CurrencyLogo from 'components/Logo/CurrencyLogo' import CurrencyLogo from 'components/Logo/CurrencyLogo'
import { AutoRow } from 'components/Row' import { AutoRow } from 'components/Row'
import { COMMON_BASES } from 'constants/routing' import { COMMON_BASES } from 'constants/routing'
...@@ -11,12 +10,6 @@ import { Text } from 'rebass' ...@@ -11,12 +10,6 @@ import { Text } from 'rebass'
import styled from 'styled-components' import styled from 'styled-components'
import { currencyId } from 'utils/currencyId' import { currencyId } from 'utils/currencyId'
const MobileWrapper = styled(AutoColumn)`
${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
display: none;
`};
`
const BaseWrapper = styled.div<{ disable?: boolean }>` const BaseWrapper = styled.div<{ disable?: boolean }>`
border: 1px solid ${({ theme }) => theme.surface3}; border: 1px solid ${({ theme }) => theme.surface3};
border-radius: 18px; border-radius: 18px;
...@@ -65,37 +58,35 @@ export default function CommonBases({ ...@@ -65,37 +58,35 @@ export default function CommonBases({
const bases = chainId !== undefined ? COMMON_BASES[chainId] ?? [] : [] const bases = chainId !== undefined ? COMMON_BASES[chainId] ?? [] : []
return bases.length > 0 ? ( return bases.length > 0 ? (
<MobileWrapper gap="md"> <AutoRow gap="4px">
<AutoRow gap="4px"> {bases.map((currency: Currency) => {
{bases.map((currency: Currency) => { const isSelected = selectedCurrency?.equals(currency)
const isSelected = selectedCurrency?.equals(currency)
return ( return (
<TraceEvent <TraceEvent
events={[BrowserEvent.onClick, BrowserEvent.onKeyPress]} events={[BrowserEvent.onClick, BrowserEvent.onKeyPress]}
name={InterfaceEventName.TOKEN_SELECTED} name={InterfaceEventName.TOKEN_SELECTED}
properties={formatAnalyticsEventProperties(currency, searchQuery, isAddressSearch)} properties={formatAnalyticsEventProperties(currency, searchQuery, isAddressSearch)}
element={InterfaceElementName.COMMON_BASES_CURRENCY_BUTTON} 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)} key={currencyId(currency)}
data-testid={`common-base-${currency.symbol}`}
> >
<BaseWrapper <CurrencyLogoFromList currency={currency} />
tabIndex={0} <Text fontWeight={535} fontSize={16} lineHeight="16px">
onKeyPress={(e) => !isSelected && e.key === 'Enter' && onSelect(currency)} {currency.symbol}
onClick={() => !isSelected && onSelect(currency)} </Text>
disable={isSelected} </BaseWrapper>
key={currencyId(currency)} </TraceEvent>
data-testid={`common-base-${currency.symbol}`} )
> })}
<CurrencyLogoFromList currency={currency} /> </AutoRow>
<Text fontWeight={535} fontSize={16} lineHeight="16px">
{currency.symbol}
</Text>
</BaseWrapper>
</TraceEvent>
)
})}
</AutoRow>
</MobileWrapper>
) : null ) : null
} }
......
src/components/SearchModal/__snapshots__/CommonBases.test.tsx.snap 0 → 100644
View file @ 4a8fb760
// 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>
`;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment