From 4a8fb760d26006d98b9ed48499b2b12a3b2cba26 Mon Sep 17 00:00:00 2001
From: eddie <66155195+just-toby@users.noreply.github.com>
Date: Thu, 21 Sep 2023 13:26:59 -0700
Subject: [PATCH] fix: show common bases on mobile (#7365)
* fix: show common bases on mobile
* test: add unit tests
---
.../SearchModal/CommonBases.test.tsx | 33 +++
src/components/SearchModal/CommonBases.tsx | 61 ++---
.../__snapshots__/CommonBases.test.tsx.snap | 245 ++++++++++++++++++
3 files changed, 304 insertions(+), 35 deletions(-)
create mode 100644 src/components/SearchModal/CommonBases.test.tsx
create mode 100644 src/components/SearchModal/__snapshots__/CommonBases.test.tsx.snap
diff --git a/src/components/SearchModal/CommonBases.test.tsx b/src/components/SearchModal/CommonBases.test.tsx
new file mode 100644
index 0000000000..76af44c534
--- /dev/null
+++ b/src/components/SearchModal/CommonBases.test.tsx
@@ -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(
+
+ )
+ expect(container).toMatchSnapshot()
+ })
+
+ it('renders correct number of common bases', () => {
+ const { getAllByTestId } = render(
+
+ )
+ 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(
+
+ )
+ const items = getAllByTestId(/common-base-/)
+ expect(items.length).toBe(6)
+ })
+})
diff --git a/src/components/SearchModal/CommonBases.tsx b/src/components/SearchModal/CommonBases.tsx
index 0cddc1b9be..715323ee37 100644
--- a/src/components/SearchModal/CommonBases.tsx
+++ b/src/components/SearchModal/CommonBases.tsx
@@ -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 ? (
-
-
- {bases.map((currency: Currency) => {
- const isSelected = selectedCurrency?.equals(currency)
+
+ {bases.map((currency: Currency) => {
+ const isSelected = selectedCurrency?.equals(currency)
- return (
-
+ !isSelected && e.key === 'Enter' && onSelect(currency)}
+ onClick={() => !isSelected && onSelect(currency)}
+ disable={isSelected}
key={currencyId(currency)}
+ data-testid={`common-base-${currency.symbol}`}
>
- !isSelected && e.key === 'Enter' && onSelect(currency)}
- onClick={() => !isSelected && onSelect(currency)}
- disable={isSelected}
- key={currencyId(currency)}
- data-testid={`common-base-${currency.symbol}`}
- >
-
-
- {currency.symbol}
-
-
-
- )
- })}
-
-
+
+
+ {currency.symbol}
+
+
+
+ )
+ })}
+
) : null
}
diff --git a/src/components/SearchModal/__snapshots__/CommonBases.test.tsx.snap b/src/components/SearchModal/__snapshots__/CommonBases.test.tsx.snap
new file mode 100644
index 0000000000..98a8802397
--- /dev/null
+++ b/src/components/SearchModal/__snapshots__/CommonBases.test.tsx.snap
@@ -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;
+}
+
+
+
+
+
+
+
+
+
+
+ ETH
+
+
+
+
+
+
+
+
+
+ DAI
+
+
+
+
+
+
+
+
+
+ USDC
+
+
+
+
+
+
+
+
+
+ USDT
+
+
+
+
+
+
+
+
+
+ WBTC
+
+
+
+
+
+
+
+
+
+ WETH
+
+
+
+